styles

package
v0.25.0 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Apr 5, 2024 License: MIT Imports: 5 Imported by: 1

README

styles Subpackage in elem-go

The styles subpackage within elem-go offers enhanced functionality for CSS styling in Go-based web applications. This document provides a detailed overview of how to use the styles subpackage and its features.

Table of Contents

Introduction

The styles subpackage provides a convenient way to define and manipulate CSS styles in Go. With utility functions and constants tailored for styling, it simplifies the process of applying styles to HTML elements.

Usage

To use the styles subpackage, import it alongside the main elem package:

import (
    "github.com/chasefleming/elem-go"
    "github.com/chasefleming/elem-go/styles"
)

Styling Elements with styles.Props

The styles.Props type allows for defining CSS properties in a structured, type-safe manner. It ensures that your style definitions are well-organized and easy to maintain.

CSS Property Keys as Constants

To further enhance type safety and reduce errors, the styles subpackage provides constants for CSS property keys. This means you don't have to rely on writing raw string literals for CSS properties, which are prone to typos and errors. Instead, you can use predefined constants that the package offers, ensuring correctness and saving time on debugging.

// Example of using constants for CSS properties
buttonStyle := styles.Props{
    styles.BackgroundColor: "#4CAF50", // Using constant instead of raw string
    styles.Border:          "none",
    // ... other properties
}

By using these constants, you can write more reliable and error-resistant style code in Go, making your development process smoother and more efficient.

For a full list of available constants, see the styles.go file.

Applying Styles to Elements

Once you have defined your styles using styles.Props, you can convert them to an inline CSS string using the ToInline method. This inline CSS can then be applied directly to HTML elements.

// Define styles using styles.Props
buttonStyle := styles.Props{
    styles.BackgroundColor: "#4CAF50",
    styles.Border:          "none",
    // ... other properties
}

// Convert styles to inline CSS
inlineStyle := buttonStyle.ToInline()

// Apply inline CSS to a button element
button := elem.Button(attrs.Props{attrs.Style: inlineStyle}, elem.Text("Click Me"))

In this example, buttonStyle is first defined using styles.Props and then converted into an inline CSS string using ToInline. This string is used to set the style attribute of a button element.

Features

Merge Function

The Merge method combines multiple style prop objects into one. It's useful for applying conditional styles or layering style sets.

// Example style definitions
baseButtonStyle := styles.Props{
  Padding: "10px 15px",
  Border: "none",
  FontWeight: "bold",
}

primaryStyles := styles.Props{
  BackgroundColor: "blue",
  Color: "white",
}

secondaryStyles := styles.Props{
  BackgroundColor: "red",
  Color: "white",
}

// Merging styles with the new Merge function
primaryButtonStyles := styles.Merge(baseButtonStyle, primaryStyles)
secondaryButtonStyles := styles.Merge(baseButtonStyle, secondaryStyles)

In the Merge function, later style objects take precedence over earlier ones for properties defined in multiple style objects.

Style and CSS Functions

These functions facilitate the embedding of CSS into HTML documents, particularly useful for creating

Documentation

Index

Constants

View Source 
const (
	// Layout Properties
	Display             = "display"
	Position            = "position"
	Top                 = "top"
	Right               = "right"
	Bottom              = "bottom"
	Left                = "left"
	Overflow            = "overflow"
	OverflowX           = "overflow-x"
	OverflowY           = "overflow-y"
	ZIndex              = "z-index"
	Flex                = "flex"
	FlexDirection       = "flex-direction"
	JustifyContent      = "justify-content"
	AlignItems          = "align-items"
	AlignContent        = "align-content"
	AlignSelf           = "align-self"
	FlexWrap            = "flex-wrap"
	FlexGrow            = "flex-grow"
	FlexShrink          = "flex-shrink"
	FlexBasis           = "flex-basis"
	Grid                = "grid"
	GridArea            = "grid-area"
	GridAutoColumns     = "grid-auto-columns"
	GridAutoFlow        = "grid-auto-flow"
	GridAutoRows        = "grid-auto-rows"
	GridColumn          = "grid-column"
	GridColumnEnd       = "grid-column-end"
	ColumnGap           = "column-gap"
	GridColumnStart     = "grid-column-start"
	GridRow             = "grid-row"
	Gap                 = "gap"
	GridRowEnd          = "grid-row-end"
	RowGap              = "row-gap"
	GridRowStart        = "grid-row-start"
	GridTemplate        = "grid-template"
	GridTemplateAreas   = "grid-template-areas"
	GridTemplateColumns = "grid-template-columns"
	GridTemplateRows    = "grid-template-rows"

	// Box Model Properties
	Width             = "width"
	MinWidth          = "min-width"
	MaxWidth          = "max-width"
	Height            = "height"
	MinHeight         = "min-height"
	MaxHeight         = "max-height"
	Padding           = "padding"
	PaddingTop        = "padding-top"
	PaddingRight      = "padding-right"
	PaddingBottom     = "padding-bottom"
	PaddingLeft       = "padding-left"
	Margin            = "margin"
	MarginTop         = "margin-top"
	MarginRight       = "margin-right"
	MarginBottom      = "margin-bottom"
	MarginLeft        = "margin-left"
	Border            = "border"
	BorderTop         = "border-top"
	BorderRight       = "border-right"
	BorderBottom      = "border-bottom"
	BorderLeft        = "border-left"
	BorderColor       = "border-color"
	BorderTopColor    = "border-top-color"
	BorderRightColor  = "border-right-color"
	BorderBottomColor = "border-bottom-color"
	BorderLeftColor   = "border-left-color"
	BorderStyle       = "border-style"
	BorderTopStyle    = "border-top-style"
	BorderRightStyle  = "border-right-style"
	BorderBottomStyle = "border-bottom-style"
	BorderLeftStyle   = "border-left-style"
	BorderWidth       = "border-width"
	BorderTopWidth    = "border-top-width"
	BorderRightWidth  = "border-right-width"
	BorderBottomWidth = "border-bottom-width"
	BorderLeftWidth   = "border-left-width"
	BorderRadius      = "border-radius"
	BoxShadow         = "box-shadow"
	Outline           = "outline"
	OutlineStyle      = "outline-style"
	OutlineColor      = "outline-color"
	OutlineWidth      = "outline-width"
	OutlineOffset     = "outline-offset"

	// Fonts & Text Properties
	Color          = "color"
	Font           = "font"
	FontFamily     = "font-family"
	FontSize       = "font-size"
	FontWeight     = "font-weight"
	LineHeight     = "line-height"
	TextAlign      = "text-align"
	TextDecoration = "text-decoration"
	TextTransform  = "text-transform"
	LetterSpacing  = "letter-spacing"
	WhiteSpace     = "white-space"
	TextOverflow   = "text-overflow"
	FontStyle      = "font-style"
	TextShadow     = "text-shadow"
	VerticalAlign  = "vertical-align"
	WordSpacing    = "word-spacing"
	WordBreak      = "word-break"
	TextIndent     = "text-indent"

	// Visual Properties
	BackgroundColor      = "background-color"
	Background           = "background"
	BackgroundImage      = "background-image"
	BackgroundRepeat     = "background-repeat"
	BackgroundSize       = "background-size"
	ObjectFit            = "object-fit"
	Opacity              = "opacity"
	BoxSizing            = "box-sizing"
	Cursor               = "cursor"
	Transition           = "transition"
	Transform            = "transform"
	BackgroundPosition   = "background-position"
	BackgroundAttachment = "background-attachment"
	BackgroundBlendMode  = "background-blend-mode"
	BackfaceVisibility   = "backface-visibility"
	BackdropFilter       = "backdrop-filter"
	Perspective          = "perspective"
	TransformOrigin      = "transform-origin"

	// List properties
	ListStyle     = "list-style"
	ListStyleType = "list-style-type"

	// Table Properties
	BorderCollapse = "border-collapse"
	BorderSpacing  = "border-spacing"
	TableLayout    = "table-layout"
	CaptionSide    = "caption-side"

	Animation               = "animation"
	AnimationDelay          = "animation-delay"
	AnimationDirection      = "animation-direction"
	AnimationDuration       = "animation-duration"
	AnimationFillMode       = "animation-fill-mode"
	AnimationIterationCount = "animation-iteration-count"
	AnimationPlayState      = "animation-play-state"
	AnimationName           = "animation-name"
	AnimationTimingFunction = "animation-timing-function"

	// Keyframes for animations (used within CSS, not directly as HTML attributes)
	KeyframesFrom = "from"
	KeyframesTo   = "to"

	// Other Properties
	Visibility    = "visibility"
	Clip          = "clip"
	Content       = "content"
	Filter        = "filter"
	PointerEvents = "pointer-events"
	Resize        = "resize"
	UserSelect    = "user-select"

	// Interaction pseudo-classes
	PseudoHover        = ":hover"
	PseudoActive       = ":active"
	PseudoFocus        = ":focus"
	PseudoFocusVisible = ":focus-visible"
	PseudoFocusWithin  = ":focus-within"

	// Location pseudo-classes
	PseudoLink    = ":link"
	PseudoVisited = ":visited"
	PseudoTarget  = ":target"

	// Input pseudo-classes
	PseudoEnabled          = ":enabled"
	PseudoDisabled         = ":disabled"
	PseudoChecked          = ":checked"
	PseudoIndeterminate    = ":indeterminate"
	PseudoDefault          = ":default"
	PseudoValid            = ":valid"
	PseudoInvalid          = ":invalid"
	PseudoPlaceholderShown = ":placeholder-shown"
	PseudoReadOnly         = ":read-only"
	PseudoReadWrite        = ":read-write"
	PseudoRequired         = ":required"
	PseudoOptional         = ":optional"

	// Tree-structural pseudo-classes
	PseudoFirstChild    = ":first-child"
	PseudoLastChild     = ":last-child"
	PseudoOnlyChild     = ":only-child"
	PseudoFirstOfType   = ":first-of-type"
	PseudoLastOfType    = ":last-of-type"
	PseudoOnlyOfType    = ":only-of-type"
	PseudoEmpty         = ":empty"
	PseudoNthChild      = ":nth-child"
	PseudoNthLastChild  = ":nth-last-child"
	PseudoNthOfType     = ":nth-of-type"
	PseudoNthLastOfType = ":nth-last-of-type"
	PseudoNot           = ":not()"
	PseudoRoot          = ":root"

	// Linguistic pseudo-classes
	PseudoLang = ":lang"

	// Fullscreen pseudo-class
	PseudoFullScreen = ":fullscreen"

	// Animations pseudo-classes
	PseudoPlaying = ":playing"
	PseudoPaused  = ":paused"
)

Variables

This section is empty.

Functions

func Em added in v0.24.0 

func Em(value float64) string

Em returns a string representation of the given float as an em value.

func Float added in v0.24.0 

func Float(value float64) string

Float returns a string representation of the float with 2 decimal places

func Int added in v0.24.0 

func Int(value int) string

Int returns a string representation of the int

func Percent added in v0.24.0 

func Percent(value int) string

Percent returns a string representation of the given integer as a percentage.

func Pixels added in v0.24.0 

func Pixels(value int) string

Pixels returns a string representation of the given integer as a pixel value.

func RGB added in v0.24.0 

func RGB(r, g, b int) string

RGB returns a string representation of the given RGB values as a CSS RGB value.

func RGBA added in v0.24.0 

func RGBA(r, g, b int, a float64) string

RGBA returns a string representation of the given RGBA values as a CSS RGBA value.

func Rem added in v0.24.0 

func Rem(value float64) string

Rem returns a string representation of the given float as a rem value.

func URL added in v0.24.0 

func URL(url string) string

URL returns a string representation of the given string as a CSS URL value.

func Var added in v0.24.0 

func Var(name string) string

Var returns a string representation of the given string as a CSS var value.

func ViewportHeight added in v0.24.0 

func ViewportHeight(value int) string

ViewportHeight returns a string representation of the given integer as a viewport height value.

func ViewportMax added in v0.24.0 

func ViewportMax(value int) string

ViewportMax returns a string representation of the given integer as a viewport maximum value.

func ViewportMin added in v0.24.0 

func ViewportMin(value int) string

ViewportMin returns a string representation of the given integer as a viewport minimum value.

func ViewportWidth added in v0.24.0 

func ViewportWidth(value int) string

ViewportWidth returns a string representation of the given integer as a viewport width value.

Types

type CompositeStyle added in v0.25.0 

type CompositeStyle struct {
	Default       Props
	PseudoClasses map[string]Props
	MediaQueries  map[string]Props
}

CompositeStyle represents a collection of styles.

type Keyframes added in v0.25.0 

type Keyframes map[string]Props

Keyframes represents CSS keyframes for an animation.

type Props added in v0.11.0 

type Props map[string]string

Props is a map of CSS properties

func Merge added in v0.12.0 

func Merge(styleMaps ...Props) Props

Merge combines multiple styles.Props maps into one, with later styles overriding earlier ones.

func (Props) ToInline added in v0.11.0 

func (p Props) ToInline() string

ToInline converts the Props to an inline style string

type StyleManager added in v0.25.0 

type StyleManager struct {
	// contains filtered or unexported fields
}

StyleManager manages styles and generates CSS classes.

func NewStyleManager added in v0.25.0 

func NewStyleManager() *StyleManager

NewStyleManager creates a new instance of StyleManager.

func (*StyleManager) AddAnimation added in v0.25.0 

func (sm *StyleManager) AddAnimation(keyframes Keyframes) string

AddAnimation adds a new keyframes animation to the manager and returns an animation name.

func (*StyleManager) AddCompositeStyle added in v0.25.0 

func (sm *StyleManager) AddCompositeStyle(composite CompositeStyle) string

func (*StyleManager) AddStyle added in v0.25.0 

func (sm *StyleManager) AddStyle(style Props) string

AddStyle adds a new style to the manager and returns a class name.

func (*StyleManager) GenerateCSS added in v0.25.0 

func (sm *StyleManager) GenerateCSS() string

GenerateCSS generates the CSS string for all styles managed by StyleManager.

type StyleSheet added in v0.25.0 

type StyleSheet map[string]Props

StyleSheet represents a collection of styles mapped to class names.

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.