Version 0.29.0

🚀 New Features

Pseudo-Elements Support in StyleManager

This enhancement allows developers to define styles for CSS pseudo-elements such as ::before, ::after, and others directly within Go code, enabling richer and more dynamic web interfaces.

Pseudo-Elements in CompositeStyle

You can now specify styles for pseudo-elements using the PseudoElements field in your style definitions. Here’s how to use it:

styleMgr := stylemanager.NewStyleManager()

compositeClassName := styleMgr.AddCompositeStyle(styles.CompositeStyle{
    Default: styles.Props{
        styles.Color: "black",
    },
    PseudoElements: map[string]styles.Props{
        styles.PseudoBefore: {
            styles.Content:     `"*"`,
            styles.Display:     "inline-block",
            styles.MarginRight: "5px",
            styles.Color:       "red",
        },
        styles.PseudoAfter: {
            styles.Content: `" Read more..."`,
            styles.Color:   "gray",
        },
    },
})

Usage in HTML Elements

paragraph := elem.P(
    attrs.Props{
        attrs.Class: compositeClassName,
    },
    elem.Text("This is a paragraph with pseudo-elements."),
)

Generated CSS

.cls_abcde { 
    color: black; 
}
.cls_abcde::before { 
    content: "*"; 
    display: inline-block; 
    margin-right: 5px; 
    color: red; 
}
.cls_abcde::after { 
    content: " Read more..."; 
    color: gray; 
}

🙏 Thanks to Contributors

• @whisk

Version 0.28.0

🚀 New Features

Introducing Fragment for Grouping Elements

You can now use the Fragment function to group multiple HTML elements together without adding an extra wrapper element to the DOM. This is particularly useful when you want to merge nodes into a single parent without adding unnecessary structure.

Usage Examples

Below is an example of how you can utilize the Fragment function in your Go code:

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

func main() {
    nodes1 := []elem.Node{
        elem.P(nil, elem.Text("1")),
        elem.P(nil, elem.Text("2")),
    }
    nodes2 := []elem.Node{
        elem.P(nil, elem.Text("3")),
        elem.P(nil, elem.Text("4")),
    }

    content := elem.Div(nil,
        elem.P(nil, elem.Text("0")),
        elem.Fragment(nodes1...),
        elem.Fragment(nodes2...),
    )

    html := content.Render()
    fmt.Println(html)
}

This code will produce the following HTML output:

<div><p>0</p><p>1</p><p>2</p><p>3</p><p>4</p></div>

🙏 Thanks to Contributors

• @goring

Version 0.27.0

🚀 New Features

Support for Single-Quoted Attribute Values

You can now define attributes with values enclosed in single quotes, avoiding the need for additional escaping when double quotes are used within the attribute value itself.

Usage Examples

Below is an example of how you can utilize single-quoted attribute values in your Go code:

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

func main() {
    content := elem.Div(attrs.Props{
        "data-values": `'{"quantity": 5}'`,  // Single-quoted attribute value
    })

    html := content.Render()

    fmt.Println(html)
}

This code will produce the following HTML output:

<div data-values='{"quantity": 5}'></div>

🙏 Thanks to Contributors

• @goring

Version 0.26.0

🚀 New Features

Seconds and Milliseconds Functions

Seconds(value float64) string

This function returns a string representation of the given time duration in seconds.

secondsValue := styles.Seconds(2.5) // Returns "2.5s"

Milliseconds(value int) string

This function returns a string representation of the given time duration in milliseconds.

millisecondsValue := styles.Milliseconds(500) // Returns "500ms"

HSL and HSLA Functions

HSL(h, s, l int) string

This function returns a string representation of the given HSL color.

hslColor := styles.HSL(120, 100, 50) // Returns "hsl(120, 100%, 50%)"

HSLA(h, s, l int, a float64) string

This function returns a string representation of the given HSLA color.

hslaColor := styles.HSLA(120, 100, 50, 0.5) // Returns "hsla(120, 100%, 50%, 0.5)"

Font Variant Constant

New constant, FontVariant for the font-variant CSS property:

textStyle := styles.Props{
   styles.FontVariant: "small-caps",
}

🙏 Thanks to Contributors

• @BreakTos
• @chasefleming
• @bsushmith
• @rxdps93

v0.25.0

Introducing StyleManager in elem-go

The latest addition to the elem-go library is here: the StyleManager. This powerful feature enhances the management of CSS styles programmatically with advanced capabilities such as pseudo-classes, animations, and media queries, directly within the Go programming environment. StyleManager is designed to streamline the creation of dynamic and responsive web applications, empowering developers with more control and flexibility over their styling strategies.

StyleManager Features

• Pseudo-Class Management: Define and apply styles for hover, active, focus, and other pseudo-classes to your HTML elements with ease.
• CSS Animations: Keyframe animations can now be created within Go, bringing web pages to life.
• Responsive Design Support: Utilize media queries to adjust styles based on device characteristics, improving mobile responsiveness.
• Style Deduplication: Optimizes CSS by merging duplicate styles, reducing file size and enhancing load times.
• Type-Safe CSS Properties: The integration of Go's type system reduces style definition errors, ensuring powerful and predictable styles.

Installation

To incorporate StyleManager into your projects, make sure to have the latest version of elem-go:

go get -u github.com/chasefleming/elem-go

Then, import the styles package alongside elem-go in your project:

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

Usage Examples

Creating a StyleManager

Initialize StyleManager to start creating your styles:

styleMgr := styles.NewStyleManager()

Defining Styles with Pseudo-Classes

Easily apply dynamic hover effects:

buttonClass := styleMgr.AddCompositeStyle(styles.CompositeStyle{
    Default: styles.Props{
        styles.BackgroundColor: "blue",
        styles.Color:           "white",
    },
    PseudoClasses: map[string]styles.Props{
        "hover": {styles.BackgroundColor: "darkblue"},
    },
})

Implementing CSS Animations

Bring elements to life with custom keyframe animations:

animationName := styleMgr.AddAnimation(styles.Keyframes{
    "0%":   {styles.Opacity: "0"},
    "100%": {styles.Opacity: "1"},
})
fadeInClass := styleMgr.AddStyle(styles.Props{
    styles.AnimationName:    animationName,
    styles.AnimationDuration: "2s",
})

Responsive Design via Media Queries

Adapt your styles to different screen sizes:

responsiveClass := styleMgr.AddCompositeStyle(styles.CompositeStyle{
    Default: styles.Props{styles.Display: "block"},
    MediaQueries: map[string]styles.Props{
        "@media (max-width: 600px)": {styles.Display: "none"},
    },
})

Integration with elem-go

Directly integrate your styles with elem-go elements:

html := elem.Div(
    attrs.Props{attrs.Class: responsiveClass},
    elem.Text("Responsive Text"),
)

html.RenderWithOptions(elem.RenderOptions{StyleManager: styleMgr})

Get Started with StyleManager

Explore the documentation and the example application to see StyleManager in action. StyleManager opens new possibilities for elem-go projects by offering sophisticated styling that aligns with Go's philosophy of simplicity, efficiency, and reliability.

Discover the dynamic and responsive web applications you can create with StyleManager. Happy coding!

Version 0.24.0

This update introduces a suite of new functions to the styles sub-package aimed at providing a type-safe approach to generating CSS style strings.

New Features: Type-Safe CSS Value Functions Added

Length and Size Functions

Em(value float64) string and Rem(value float64) string

These functions return a string representation of the given value with the "em" and "rem" units, respectively.

emValue := styles.Em(2.5) // Returns "2.5em"
remValue := styles.Rem(1.5) // Returns "1.5rem"

Pixels(value int) string

This function returns a string representation of the given value with the "px" unit.

pxValue := styles.Pixels(10) // Returns "10px"

Percent(value int) string

This function returns a string representation of the given value with the "%" unit.

percentValue := styles.Percent(50) // Returns "50%"

Viewport Functions

ViewportHeight(value int) string and ViewportWidth(value int) string

These functions return a string representation of the given value with the "vh" and "vw" units, respectively.

vhValue := styles.ViewportHeight(50) // Returns "50vh"
vwValue := styles.ViewportWidth(25) // Returns "25vw"

ViewportMin(value int) string and ViewportMax(value int) string

These functions return a string representation of the given value with the "vmin" and "vmax" units, respectively.

vminValue := styles.ViewportMin(10) // Returns "10vmin"
vmaxValue := styles.ViewportMax(20) // Returns "20vmax"

Color Functions

RGB(r, g, b int) string

This function returns a string representation of the given RGB color.

rgbColor := styles.RGB(255, 0, 0) // Returns "rgb(255, 0, 0)"

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

This function returns a string representation of the given RGBA color.

rgbaColor := styles.RGBA(255, 0, 0, 0.5) // Returns "rgba(255, 0, 0, 0.5)"

Other Functions

Int(value int) string

This function returns a string representation of the given integer value.

intValue := styles.Int(100) // Returns "100"

Float(value float64) string

This function returns a string representation of the given float value.

floatValue := styles.Float(3.14) // Returns "3.14"

URL(url string) string

This function returns a string representation as a formatted CSS URL.

urlValue := styles.URL("https://example.com/image.jpg") // Returns "url('https://example.com/image.jpg')"

Var(name string) string

This function returns a string representation as a CSS variable.

varValue := styles.Var("primary-color") // Returns "var(--primary-color)"

Version 0.23.0

🚀 New Features

Merge Added to attrs Subpackage

The Merge method allows for the merging of multiple attrs.Props maps into a single attrs.Props map. This is particularly useful when you need to apply a base set of attributes and then selectively override or add additional attributes under certain conditions. The method accepts a variadic input, enabling the easy combination of any number of attrs.Props maps. Attributes from later arguments will override those from earlier ones if there are any key conflicts.

Usage

defaultButtonAttrs := attrs.Props{
    attrs.Class: "btn",
    attrs.Type:  "button",
}

userButtonAttrs := attrs.Props{
    attrs.Class: "btn btn-primary",
    attrs.ID:    "submitBtn",
}

mergedButtonAttrs := attrs.Merge(defaultButtonAttrs, userButtonAttrs)

button := elem.Button(mergedButtonAttrs, elem.Text("Submit"))

Version 0.22.0

🚀 New Features

Support for <base> Element

The Base function for creating <base> elements has been added. The <base> element specifies the base URL to use for all relative URLs in a document.

Example Usage

head := elem.Head(nil, elem.Base(attrs.Props{"href": "https://www.example.com/"}))

⚠️ Breaking Change and Bug Fix

Migration of styles.CSS to elem.CSS

To remove a circular dependency, the previously used styles.CSS method has been moved and renamed to elem.CSS. Projects that previously relied on styles.CSS will need to update their references to the new elem.CSS.

This will also fix a bug where styles.CSS no longer implemented the Node interface.

Version 0.21.0

🚀 New Features

New Semantic Elements Added

We've enhanced elem-go with new semantic HTML elements for accessibility. The update includes:

• elem.Ruby(...)
• elem.Rt(...)
• elem.Rp(...)
• elem.Small(...)
• elem.Q(...)
• elem.Cite(...)
• elem.Abbr(...)
• elem.Data(...)
• elem.Time(...)
• elem.Var(...)
• elem.Samp(...)
• elem.Kbd(...)
• elem.Sub(...)
• elem.Sup(...)
• elem.B(...)
• elem.U(...)

These additions enable more precise content structuring and semantic clarity, covering a range of elements from annotations and text modifications to data representation and emphasis.

🙏 Thanks to Contributors

• @dreth
• @liv7c
• @ahmed-hany94

Version 0.20.0

✨ Enhancements

• New htmx constants: Added extensive support for htmx attributes and hx-on::event attributes using a -- syntax for universal compatibility. This update more closely aligns elem-go with htmx version 1.9.10, enabling developers to implement dynamic web functionalities with improved ease and safety.

• New Attribute Constants: Introduced new attribute constants for integrity and crossorigin for script elements, enhancing security and resource sharing capabilities in web applications.

• Style Constant for Object Fit: Added a style constant for object-fit property, allowing for more control over the visual rendering of images and videos, ensuring they fit their containers in a visually appealing manner.

🙏 Thanks to Contributors

• @dreth
• @chasefleming