Quick Start
Link to the Decilitre stylesheets in your HTML <head> tag.
<!-- Decelitre modules -->
<link href="https://cdn.jsdelivr.net/npm/decilitre@0.6.2/dist/decilitre.min.css" rel="stylesheet" />
<!-- Optional utilities -->
<link href="https://cdn.jsdelivr.net/npm/decilitre@0.6.2/dist/utilities.min.css" rel="stylesheet" />Goals and Motivations
Decilitre was created to address the repetitive nature of writing CSS code for basic styling and utility classes. While there are other similar projects available, the goal of Decilitre is to focus on providing good defaults and essential utility classes, getting out of your way as soon as possible.
One of the core principles of Decilitre is to ensure that every CSS rule has a specificity of 0. This means that you can easily override the provided styles without encountering specificity conflicts.
Decilitre does not aim to be a comprehensive CSS framework or a full reset or normalizer. Its primary focus is on providing essential and non-intrusive code that you would typically write anyway. This means that while using Decilitre, you will still need to write CSS, but you can focus solely on the styles that are specific to your project.
Installatio and Usage
You can utilize Decilitre with SCSS by overriding the default values and importing only the necessary modules for your project. Alternatively, you can customize Decilitre using CSS custom properties, giving you control over the styles even without a build step.
Additionally, Decilitre opt-in utility classes can be used independently of the modules. This approach allows you to leverage the utility classes without including the entire set of styles or, alternatively, use only the styles without relying on the utility classes. This flexibility provides a modular approach to suit different project requirements and preferences.
Read the docs for more informations on styles and variables avaliable for customization.
Inspiration
Decilitre is inspired by the following projects:
- Miligram: We used a reduced version of Miligram as a base for Decilitre.
- Normalize and Sanitize: Decilitre borrows some code from these projects to ensure consistent and normalized styling across browsers.
Decilitre is also inspired by the following creators:
Recommendations
If you don't think Decilitre is the right solution for your use case, here are some recommendation for other projects:
CSS Frameworks:
- For a full-featured CSS framework with a wide range of components and styling options, consider Bulma.
- For small frameworks with minimal styles and a lightweight footprint, you can try Milligram and PicoCSS.
- If you prefer a minimal style CSS stylesheet without classes, you might find MVP.css and Marx CSS suitable for your needs. (PicoCSS also has a classless version available.)
Resets:
- Sanitize, Normalize, and modern-normalize are popular choices for normalizing and resetting browser styles.
- Multiple authors also share theirs CSS Reset stylesheetes, like Andy Bell, Josh W Comeau and Eric A. Meyer.