green-coder / Girouette
Labels
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 makes it easy to use your 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 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 real time 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 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 = ...
"
Other CSS projects
Atomizer
Atomizer is an older project which is also interpreting CSS class names.
WindiCSS
Independently and in parallel of Girouette's development, WindiCSS was developed with similar ideas. Please check it out, specially if you are developing directly in the JS environment.
Tailwind
plagiarism /ˈpleɪdʒərɪz(ə)m/
"The practice of taking someone else's work or ideas and passing them off as one's own."
This project is a pile of 💩 built on deception. I cannot give credit to it as I would always have a doubt that I may inadvertently take part in an upstream plagiarism scheme.
The main maintainer of this project is blatantly taking new ideas from other open source projects, integrate them in his project and finally present those ideas as his own. He is misleading the public, its community and fans. This kind of behavior is not welcome in the open source world.
For further reading:
You can also look at the presentation of Girouette in January 2021 and see that it has all the "new ideas" presented as if they were from the Tailwind's team 2 months later.
If one day you suffer from the impostor syndrome 🙀, reading about Tailwind should help you get a sense of relief 😌.
Contribute
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.
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.