Functional, utility-first CSS
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.
The easiest way to use this library is to paste the following link tag in the head of your HTML file:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/lagom-css" />
If you are using a bundler, such as webpack, install the package from npm by running npm i lagom-css
and import it in JavaScript (import 'lagom-css'
).
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).
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!