Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/AleshaOleg/holy-grail-markup

All CSS methodologies compared examples at one place.
https://github.com/AleshaOleg/holy-grail-markup

atomic bem bem-css bem-platform bootstrap bootstrap-4 bootstrap4 bootstrapping css css-methodologies css-modules oocss organic smacss

Last synced: about 1 month ago
JSON representation

All CSS methodologies compared examples at one place.

Awesome Lists containing this project

README 

        
## 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](https://en.wikipedia.org/wiki/Holy_Grail_(web_design))"

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](https://github.com/tastejs/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](https://aleshaoleg.github.io/holy-grail-markup/raw) 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](https://github.com/AleshaOleg) and [Ihor Zenich](https://github.com/IhorZenich).

Collaborator: [Dmytro Cisar](https://github.com/idmytro).



## Contributors

* [Boris Serdiuk](https://github.com/just-boris) and [Artem Sapegin](https://github.com/sapegin) for CSS-Modules example.

* [Vladimir Grinenko](https://github.com/tadatuta) for Yandex-way BEM-realization example.



Anyone and everyone is welcome to contribute, just send Pull Request or [create](https://github.com/AleshaOleg/holy-grail-markup/issues/new)/[answer](https://github.com/AleshaOleg/holy-grail-markup/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) to issue!



## Thanks

* [Ivan Sagalaev](https://github.com/isagalaev) for his [MegaCorporation html markup example](http://softwaremaniacs.org/blog/2006/01/17/css-layout-example/).



## License

The code is available under the [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) license. This applies to all documents in this repository.



## Documentation

- [OOCSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)

- [SMACSS](https://smacss.com)

- [Atomic CSS](http://acss.io)

- [Organic CSS](http://krasimir.github.io/organic-css/), based on [Atomic Design](http://atomicdesign.bradfrost.com/chapter-2/) concept

- [BEM ](https://en.bem.info/methodology/quick-start/)

  * [BEM Bootstrap-4](https://en.bem.info/methodology/quick-start/)

  * [BEM CSS](https://en.bem.info/methodology/css/) (Nicolas Gallagher's [variation](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/), [populated](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) by Harry Roberts)

  * [BEM Platform](https://en.bem.info/platform/)

  * BEM CSS with [grid](https://github.com/vivid-web/flexbox-grid-sass)

- [CSS Modules](https://github.com/css-modules/css-modules)

- css-in-js (React), and ITCSS will be added soon!



## Statistics

You can see statistics for each of example [here](https://github.com/AleshaOleg/holy-grail-markup/blob/master/STATISTICS.md).



Excel document, to view statistics located [here](https://docs.google.com/spreadsheets/d/1LVnJ_GEs51lLxZjBj2SsfLMbTGPqawqzh7POCpaM898/edit?usp=sharing) (Google Sheets).