Releases: chasefleming/elem-go
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
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
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
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
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 alignselem-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
andcrossorigin
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
Version 0.19.0
🚀 New Features
Added Support for <h4>
, <h5>
, <h6>
, and <hgroup>
Elements
Support for the <h4>
, <h5>
, <h6>
, and <hgroup>
HTML elements has been added, broadening the scope for semantic text structuring and document outline organization.
Usage Examples
Create a section with nested headings using elem.H4()
, elem.H5()
, and elem.H6()
:
sectionContent := elem.Div(nil,
elem.H4(nil, elem.Text("Section Heading Level 4")),
elem.H5(nil, elem.Text("Subsection Heading Level 5")),
elem.H6(nil, elem.Text("Subsubsection Heading Level 6")),
)
This will output:
<div>
<h4>Section Heading Level 4</h4>
<h5>Subsection Heading Level 5</h5>
<h6>Subsubsection Heading Level 6</h6>
</div>
Group headings together semantically using elem.Hgroup()
:
headingGroup := elem.Hgroup(nil,
elem.H1(nil, elem.Text("Main Title")),
elem.H2(nil, elem.Text("Subtitle")),
)
This will output:
<hgroup>
<h1>Main Title</h1>
<h2>Subtitle</h2>
</hgroup>