Repository files navigation

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 makes it easy to use your own grammar rules to generate anythingyou may dream of.

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 willhave 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 usingtools 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 correspondingCSS content is created.

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

(UPDATE: a couple of months after Girouette was released, the author of Tailwind implementedin its version 2 and 3 an "on demand" feature very similar to Girouette)

Girouette currently has components which makes it compatible (with a few caveats) with:

• Tailwind v2.0.2
• Tailwind v3.0.23

Presentation @ the Bay Area Clojure Meetup:

• The slides
• Video recording

The project has example projects inexample/:

• A simpledemo project using Reagent.

Girouette is using the awesomeInstaparselibrary for parsing the class names, and is converting them into theGarden format.

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

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

You can useGirouette processor tool to extract the CSS class names fromyour source code and generate the CSS in real time as you develop.

See thedemo project for more information.

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

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

Any color can be represented directly in class names,likergba-f59d orrgba-ff5599dd.

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 = ..."

A few other alternatives are available.

• Tailwind Garden
• macrocss
• tailwind-hiccup
• tailwind-clj

Atomizer is an older project which is also interpreting CSS class names.

Independently and in parallel of Girouette's development,WindiCSSwas developed with similar ideas. Please check it out, specially if you are developing directly in the JS environment.

• TheOrnament library, byLambda Island / Gaiwan:A very elegant way to craft and integrate CSS rules inside your Clojure(script) apps.

(To add your project to this list, just edit this file and open a pull request)

Contributions are very welcome, just make sure that the contributions are your own,and add proper credits in the commit messages if it is not the case.

This project is distributed under theMIT License, which is available athttps://opensource.org/licenses/MIT

Copyright (c) Vincent Cantin and contributors.