Lagom CSS
Functional, utility-first CSS
About
Lagom is a CSS library that focuses on quick & straightforward class-based, utility-first styling. Inspired by projects such as Tachyons & Wing, which take similar approaches, Lagom uses class names & size increments that make sense and allow users to intuitively style their site/app without constantly referring to the CSS library's docs.
You can find an overview of the available styles in use here.
Getting started
The easiest way to use this library is probably to drop the following link tag in the head of your HTML file:
If you are using a bundler, such as webpack, you can install the package from npm by running npm i lagom-css and import it in JavaScript (import 'lagom-css').
Unused CSS
Due to their nature, utility CSS libraries can be quite large. If performance or file-size matters to you (or you're using this production), I would recommend using a tool such as PurifyCSS to remove unused CSS. Doing this, the CSS file that you would want to target is /dist/lagom.min.css in this package (download it here).
Contributing
This project is open to and encourages contributions! Feel free to discuss any proposed changes in the issues. If you wish to work on this project:
- Fork the project
- Create a development branch (
git checkout -b new-feature-branch) - Make your changes
- Ensure tests pass/update tests
- Commit your changes with an appropriate commit message (
git commit -am 'feat: add new feature') - Push to the branch (
git push origin new-feature-branch) - Submit a pull request!