DEV Community

Cover image for CSS Visual Cheatsheet
George K.
George K.

Posted on

CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all. Please, send you suggestions in the comments here or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

GitLab page: https://gk3000.gitlab.io/css_cheatsheet/

Repo url: https://gitlab.com/gk3000/css_cheatsheet

Top comments (3)

Collapse
 
anstfoto profile image
Старинин Андрей

Давно что-то похожее искал. Но видимо плохо искал.
Спасибо!
Осталось перевести на русский и можно показывать студентам.

Collapse
 
bcncodeschool profile image
George K.

Спасибо! Там, конечно, можно многое добавить, но мне кажется в целом довольно наглядный подход

Collapse
 
anstfoto profile image
Старинин Андрей

Вам только кажется. Там хороший наглядный подход. Конечно нет пределов совершенству. Но всё равно, хорошо