Girouette

Dès que le vent soufflera, je repartira.
Dès que les vents tourneront, nous nous en allerons.

Girouette is a grammar-based, generative approach to CSS. It translates a classname into a Garden data structure representing CSS.

(class-name->garden "w-10")
; => [".w-10" {:width "2.5rem"}]

Girouette also make it easy to use you own grammar rules to generate anything you may dream of.

Introduction

CSS libraries like Tailwind and Tachyons provide quantities of predefined class names, hoping to cover most of the needs of their users. But because of combinatory explosion, they cannot provide all the class names users will ever need, in which case the users will have to hack their way with config files and/or handwritten CSS. When releasing for production, the unused CSS classes are removed from the CSS files using tools like PurgeCSS.

Girouette is taking the opposite approach where we first look at which class names are used, and from their names and a grammar associated with some generation rules, the corresponding CSS content is created.

This "on demand" generative approach allows to have any combination of parameters in a CSS class name, while opening the door to the most creative grammars which a human would want to use to communicate its intent.

Documentation & Resources

Girouette supports all the classes available in Tailwind 2.0.2

Presentation @ the Bay Area Clojure Meetup:

• The slides
• Video recording

The project has example projects in example/:

• A simple demo project using Reagent.

How it works

Girouette is using the awesome Instaparse library for parsing the class names, and is converting them into the Garden format.

Its API mainly consists in the function class-name->garden which is pretty explicit.

(class-name->garden "w-42%")
;=> [".w-42\\%" {:width "42%"}]

You can use Girouette processor tool to extract the CSS class names from your source code and generate the CSS in realtime as you develop.

See the demo project for more information.

Advantages of this approach

With the right Girouette components in place, any parameters can be combined in the class names without leaving your usual REPL workflow.

Large range on numbers

No need to stop what you are doing and to modify some config files just because mx-13 is not supported by default while mx-12 is.

Any color can be represented directly in class names, like rgba-f59d or rgba-ff5599dd.

Limitless class name descriptiveness

It is possible to create grammars which support very long class names.

;; Example of class name:
"bg-gradient-to-right-red-orange-yellow-green-blue-purple"

;; Instaparse rule:
"bg-gradient = <'bg-gradient-to-'> gradient-direction (<'-'> color)+
 gradient-direction = 'top' | 'right' | 'bottom' | 'left' | angle
 color = ...
 "

Contribute

Contributions are very welcome.

License terms

This project is distributed under the MIT License, which is available at https://opensource.org/licenses/MIT

Copyright (c) Vincent Cantin and contributors.