CSS Layout - Most popular layouts and patterns that can be built with CSS

not semantically css code is inline and it's bad the code is not clear and hard to read

Being a front-end engineer, I have to deal with a lot of layouts and components. There are a lot of CSS frameworks out there that provide popular layouts and components but I usually don't want to include entire framework in my project because * It's giant and there are a lot of stuffs I don't need * Each layout or component provides a lot of unnecessary options because it serves many functionalities, for many people For each project with different requirements, I often google for the most basic part of particular layout or UI pattern and build up from there. So I collect most popular layouts and components that can be built with pure CSS. They are powered by modern CSS features such as flexbox and grid. They are great starting points to be picked and customized easily for each specific need. By composing them, you can have any possible layout that exists in the real life. It helps me a lot and hopefully it will help you! The entire website is open source, so let's explore and give me one Github star :)

The Sidebar and Holy Grail respond to become smaller versions of themselves at smaller screen sizes. I can not see a use case for that. The patterns seem incomplete.

Awesome tool. Great for quick reference of common layout. Curious what tool u use to make the layout pattern itself?