CSS Layout
a collection of popular layouts and patterns made with CSS
Components, patterns and layouts are things you have to deal with everyday.
There are a lot of CSS frameworks that provide rich set of layouts and patterns, but I usually don't want to include all of them in my project.
So that I collect most popular layouts and patterns that can be built with pure CSS.
They are powered by modern CSS features such as flexbox and CSS grid.
Starting with the most basic part, you can customize easily for each specific need.
By composing them, you can have any possible layout that exists in the real life.
- .awesome {
- zero-dependencies:🎉;
- no-frameworks:🎉;
- no-css-hacks:🎉;
- real-use-cases:🎉;
- good-practices:soon;
- accessibility:soon;
- }
How it's made
this
.madeWith([react,typescript])
.then((r) => lint(r)) /* tslint */
.then((r) => lazyLoad(r)) /* @loadable/component */
.then((r) => optimizeAndBundle(r)) /* webpack */
.then((r) => exportHtml(r)) /* react-snap */
.then((r) => deploy(r)) /* Netlify */
.then((r) => {
expect(r).is(scalableCode);
expect(r).is(superFastWebsite);
expect(r).is(seoFriendly);
})
.finall(() => {
/* Give me 1 Github star 🎉 */
});Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!
.about
{- twitter:@nghuuphuoc;
- dev.to:@phuocng;
- email:me@phuoc.ng;
- github:phuoc-ng/csslayout;
- }