diff --git a/README.md b/README.md index 572fef3..37edf45 100644 --- a/README.md +++ b/README.md @@ -1 +1,56 @@ -# csslayout \ No newline at end of file +# CSS Layout + +A collection of popular layouts and patterns made with CSS: + +* 🎉Zero dependencies +* 🎉No frameworks +* 🎉No CSS hacks +* 🎉Real use cases +* Good practices (coming soon) +* Accessibility (coming soon) + +## Why + +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/components but +I usually don't want to include all of them in my project. + +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 and could be picked and customized easily for each specific need. +By composing them, you can have any possible layout that exists in the real life. + +## Running it on local + +- Clone the project: + +~~~ +$ git clone https://github.com/phuoc-ng/csslayout +~~~ + +- Install the dependencies: + +~~~ +$ npm install +~~~ + +- Run it on the local: + +~~~ +$ npm run dev +~~~ + +Visit http://localhost:1234 to see it in action. + +## Contributing + +PRs are welcome. If you thing there are any missing useful layouts or patterns, please create an issue or submit a PR. + +## About + +This project is developed by [Nguyen Huu Phuoc](https://twitter.com/nghuuphuoc). +You might be interesting in my projects: +* [FormValidation](https://formvalidation.io) +* [BlurPage](https://blur.page) +* [React PDF Viewer](https://react-pdf-viewer.dev)