alxlark/holy-grail-markup

All CSS methodologies compared examples at one place.

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

We wrote simple html page with "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.

That's like an advanced "Hello world".

How to use

Just download/clone repository and see examples of markup. Demo is here.

Authors

Created by Oleh Aloshkin and Ihor Zenich.

Contributors

• Boris Serdiuk and Artem Sapegin for CSS-Modules example.

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

Thanks

• Ivan Sagalaev for his MegaCorporation html markup example.

License

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

Documentation

• OOCSS
• SMACSS
• Atomic Design:
• Atomic CSS
• Organic CSS
• BEM
• BEM CSS (Harry Roberts style)
• BEM CSS with grid
• CSS Modules

Statistics

You can see statistics for each of example here.