gcss

README

gcss

CSS written in Pure Go.

No JS builders, no preprocessors, no linters, no frameworks, no classes, no variables, no overrides, no plugins, no dependencies, no javascript, no templates, no bs, no nothing.

Just 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's static typing.

Installation

go get github.com/AccentDesign/gcss

Usage

There are multiple ways you can use gcss in your project. For examples of property values, see the style_test.go file.

Writing css to a file:

package main

import (
	"github.com/AccentDesign/gcss"
	"github.com/AccentDesign/gcss/props"
	"github.com/AccentDesign/gcss/variables"
	"os"
)

type Stylesheet []gcss.Style

var styles = Stylesheet{
	{
		Selector: "html",
		Props: gcss.Props{
			FontFamily: props.FontFamilySans,
		},
	},
	{
		Selector: ".button",
		Props: gcss.Props{
			BackgroundColor: variables.Zinc800,
			Border: props.Border{
				Width: props.UnitPx(1),
				Style: props.BorderStyleSolid,
				Color: variables.Zinc900.Alpha(128),
			},
			BorderRadius:  variables.Size1H,
			Color:         variables.White,
			FontSize:      variables.Size4,
			PaddingBottom: variables.Size3,
			PaddingLeft:   variables.Size5,
			PaddingRight:  variables.Size5,
			PaddingTop:    variables.Size3,
		},
	},
	{
		Selector: ".button:hover",
		Props: gcss.Props{
			BackgroundColor: variables.Zinc900,
		},
	},
}

func main() {
	file, err := os.Create("stylesheet.css")
	if err != nil {
		panic(err)
	}
	defer file.Close()

	for _, style := range styles {
		if err := style.CSS(file); err != nil {
			panic(err)
		}
	}
}

The benefit of all this are

• Keeps the css free of variables.
• Keeps html free of classes like bg-gray-50 text-black dark:bg-slate-800 dark:text-white and eliminates the need to remember to add the dark variant.
• I recently saw a button component on an html page 10 times with over 1800 characters in the class attribute of each. This is not maintainable nor debuggable.
• Keeps the css clean and easy to debug with no overrides like the above.
• Allows for easy theming based on server side logic.

Examples

For example usage see the examples directory that include:

• CSS resets - A simple example collection of css resets.
• Themed CSS using multiple HTTP handlers - An example of how to use multiple http handlers to serve different themes.
• Themed CSS using a single HTTP handler - An example of how to use a single http handler to serve different themes using media queries.
• Write to a file - An example of how to write to a file.
• Write to an HTTP handler - An example of how to write to an http handler.
• Write to stdout - An example of how to write to stdout.

Contributing

If you would like to contribute to this project, please open an issue or a pull request. We welcome all contributions and ideas.

Mix it up with other CSS frameworks

You can mix gcss with other CSS frameworks like tailwindcss for example:

separate the css files into base and utils:

/* base.css */
@tailwind base;

/* utils.css */
@tailwind utilities;

Then add the gcss styles in between in your html:

<link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="gcss-styles.css" />
<link rel="stylesheet" href="utils.css" />

Try to keep the specificity of the gcss styles to 1 by using single classes this will ensure any tailwindcss utilities will be able to overwrite your styles where required.

Documentation

Index

• type CustomProp
• type Props
• type Style
  • func (s *Style) CSS(w io.Writer) error

Types

type CustomProp

type CustomProp struct {
	Attr, Value string
}

CustomProp represents an additional CSS property that is not covered by the Props struct.

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"`
	BorderBottomLeftRadius  props.Unit                `css:"border-bottom-left-radius"`
	BorderBottomRightRadius props.Unit                `css:"border-bottom-right-radius"`
	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"`
	BorderTopLeftRadius     props.Unit                `css:"border-top-left-radius"`
	BorderTopRightRadius    props.Unit                `css:"border-top-right-radius"`
	BorderWidth             props.Unit                `css:"border-width"`
	Bottom                  props.Unit                `css:"bottom"`
	BoxSizing               props.BoxSizing           `css:"box-sizing"`
	CaptionSide             props.CaptionSide         `css:"caption-side"`
	Color                   props.Color               `css:"color"`
	ColumnGap               props.Unit                `css:"column-gap"`
	Cursor                  props.Cursor              `css:"cursor"`
	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"`
	FontFamily              props.FontFamily          `css:"font-family"`
	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"`
	ListStylePosition       props.ListStylePosition   `css:"list-style-position"`
	ListStyleType           props.ListStyleType       `css:"list-style-type"`
	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"`
	MaxHeight               props.Unit                `css:"max-height"`
	MaxWidth                props.Unit                `css:"max-width"`
	MinHeight               props.Unit                `css:"min-height"`
	MinWidth                props.Unit                `css:"min-width"`
	Opacity                 props.Unit                `css:"opacity"`
	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"`
	RowGap                  props.Unit                `css:"row-gap"`
	TextAlign               props.TextAlign           `css:"text-align"`
	TextDecorationColor     props.Color               `css:"text-decoration-color"`
	TextDecorationLine      props.TextDecorationLine  `css:"text-decoration-line"`
	TextDecorationStyle     props.TextDecorationStyle `css:"text-decoration-style"`
	TextDecorationThickness props.Unit                `css:"text-decoration-thickness"`
	TextIndent              props.Unit                `css:"text-indent"`
	TextOverflow            props.TextOverflow        `css:"text-overflow"`
	TextTransform           props.TextTransform       `css:"text-transform"`
	TextUnderlineOffset     props.Unit                `css:"text-underline-offset"`
	TextWrap                props.TextWrap            `css:"text-wrap"`
	Top                     props.Unit                `css:"top"`
	VerticalAlign           props.VerticalAlign       `css:"vertical-align"`
	WhiteSpace              props.WhiteSpace          `css:"white-space"`
	Width                   props.Unit                `css:"width"`
	Visibility              props.Visibility          `css:"visibility"`
	ZIndex                  props.Unit                `css:"z-index"`
}

Props represents the standard CSS properties that can be applied to a CSS rule.

type Style

type Style struct {
	// Selector is the CSS selector to which the properties will be applied.
	// It can be any valid CSS selector like class, id, element type, etc.
	Selector string

	// Props contains the standard CSS properties that will be applied to the selector.
	// These properties are represented by the Props struct and are strongly typed.
	Props Props

	// CustomProps contains any additional CSS properties that are not covered by the Props struct.
	// These properties are directly added to the CSS rule as is.
	CustomProps []CustomProp
}

Style represents a CSS style rule.

func (*Style) CSS

func (s *Style) CSS(w io.Writer) error

CSS writes the CSS representation of the style to the writer.