README
¶
gcss
CSS written in Go.
Motivation
The gcss project is a unique approach to writing CSS using Go.
The motivation behind this project is not to replace CSS entirely,
but to provide a way to write CSS in Go.
This allows developers to leverage Go's features to generate CSS. For instance,
Go's text/template or templ package can be used to generate CSS based on some data.
This opens up new possibilities for dynamic and data-driven styling in web development.
Next steps
The next steps for this project are to add more features to the CSS package. This includes adding support for more CSS properties and maybe mixins. What I don't want to do is to add support for all CSS functionality as some things are better in CSS, but I do want to be able to create a few UI components that are configurable using Go.
What I don't need
- I don't need UI libs that are written for the purpose of JS frameworks.
- I don't need linters when I have Go's static typing.
- I don't need javascript to generate CSS.
- I don't need templates with 400 css classes in them.
- I don't need css with more variables in them than actual css properties.
What I do need
- Go, HTMX and maybe a few manual css styles.
Usage
There are multiple ways you can use gcss in your project. For examples of property values, see the style_test.go file.
Write to a css file:
var styles = []gcss.Style{
{
Selector: ".button",
Props: gcss.Props{
BackgroundColor: props.ColorRGBA(17, 24, 39, 255),
},
},
}
f, err := os.Create("styles.css")
if err != nil {
panic(err)
}
for _, style := range styles {
if err := style.CSS(f); err != nil {
panic(err)
}
}
Or as an example using a gin route:
var styles = []gcss.Style{
{
Selector: ".button",
Props: gcss.Props{
BackgroundColor: props.ColorRGBA(17, 24, 39, 255),
},
},
}
router.Handle("GET", "/styles.css", func(c *gin.Context) {
c.Writer.Header().Set("Content-Type", "text/css")
for _, style := range styles {
if err := style.CSS(c.Writer); err != nil {
panic(err)
}
}
})
Examples
CSS:
go run examples/styles/cli/main.go export -directory "examples/static/css"
Hugo:
cd examples
hugo server -D
Documentation
¶
Index ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type Props ¶
type Props struct {
AlignItems props.AlignItems `css:"align-items"`
Appearance props.Appearance `css:"appearance"`
BackgroundColor props.Color `css:"background-color"`
BackgroundImage props.BackgroundImage `css:"background-image"`
BackgroundPosition props.BackgroundPosition `css:"background-position"`
BackgroundRepeat props.BackgroundRepeat `css:"background-repeat"`
BackgroundSize props.BackgroundSize `css:"background-size"`
BorderColor props.Color `css:"border-color"`
Border props.Border `css:"border"`
BorderBottom props.Border `css:"border-bottom"`
BorderLeft props.Border `css:"border-left"`
BorderRadius props.Unit `css:"border-radius"`
BorderRight props.Border `css:"border-right"`
BorderStyle props.BorderStyle `css:"border-style"`
BorderTop props.Border `css:"border-top"`
BorderWidth props.Unit `css:"border-width"`
Bottom props.Unit `css:"bottom"`
CaptionSide props.CaptionSide `css:"caption-side"`
Color props.Color `css:"color"`
Display props.Display `css:"display"`
FlexBasis props.Unit `css:"flex-basis"`
FlexDirection props.FlexDirection `css:"flex-direction"`
FlexGrow props.Unit `css:"flex-grow"`
FlexShrink props.Unit `css:"flex-shrink"`
FlexWrap props.FlexWrap `css:"flex-wrap"`
Float props.Float `css:"float"`
FontSize props.Unit `css:"font-size"`
FontStyle props.FontStyle `css:"font-style"`
FontWeight props.FontWeight `css:"font-weight"`
Gap props.Unit `css:"gap"`
Height props.Unit `css:"height"`
JustifyContent props.JustifyContent `css:"justify-content"`
JustifyItems props.JustifyItems `css:"justify-items"`
JustifySelf props.JustifySelf `css:"justify-self"`
Left props.Unit `css:"left"`
LineHeight props.Unit `css:"line-height"`
Margin props.Unit `css:"margin"`
MarginBottom props.Unit `css:"margin-bottom"`
MarginLeft props.Unit `css:"margin-left"`
MarginRight props.Unit `css:"margin-right"`
MarginTop props.Unit `css:"margin-top"`
MaxWidth props.Unit `css:"max-width"`
MinWidth props.Unit `css:"min-width"`
Overflow props.Overflow `css:"overflow"`
OverflowX props.Overflow `css:"overflow-x"`
OverflowY props.Overflow `css:"overflow-y"`
Padding props.Unit `css:"padding"`
PaddingBottom props.Unit `css:"padding-bottom"`
PaddingLeft props.Unit `css:"padding-left"`
PaddingRight props.Unit `css:"padding-right"`
PaddingTop props.Unit `css:"padding-top"`
Position props.Position `css:"position"`
PrintColorAdjust props.PrintColorAdjust `css:"print-color-adjust"`
Right props.Unit `css:"right"`
TextAlign props.TextAlign `css:"text-align"`
TextOverflow props.TextOverflow `css:"text-overflow"`
Top props.Unit `css:"top"`
WhiteSpace props.WhiteSpace `css:"white-space"`
Width props.Unit `css:"width"`
}
Source Files
Directories