Skip to content

AleshaOleg/holy-grail-markup

Repository files navigation

CSS-methodologies "101" examples: SMACSS, Atomic, BEM and so on.

Helping you select an CSS methodologie

We wrote simple html page like "Holy Grail Layout" in different CSS methodologies as an example of all popular css methodologies markup, in order to help people compare, learn and start using them.

The same page, the same design implemented in using most of the popular CSS methodologies of today.

That's like an "Hello world" TodoMVC for CSS.

How to use

Just download/clone repository and see examples of markup in each folder. Keep in mind: raw is just example of default old ugly 2000-style css markup without any methodologie (just to compare), but with trying to structuring code some way we did it before methodoligies coming.

Demo is here.

Specificity graphs for each implementetion, you can find by URL address, https://aleshaoleg.github.io/holy-grail-markup/implementetion/specificity-graph. For example, raw example here: http://aleshaoleg.github.io/holy-grail-markup/raw/specificity-graph.

Authors

Created by Oleh Aloshkin and Ihor Zenich. Collaborator: Dmytro Cisar.

Contributors

Anyone and everyone is welcome to contribute, just send Pull Request or create/answer to issue!

Thanks

License

The code is available under the CC BY 4.0 license. This applies to all documents in this repository.

Documentation

Statistics

You can see statistics for each of example here.

Excel document, to view statistics located here (Google Sheets).