Skip to content

v0.25.0
Compare
Choose a tag to compare
@chasefleming chasefleming released this 05 Apr 15:54
· 36 commits to main since this release
v0.25.0
3316c9f
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

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!

Assets 2
Loading