Decilitre is CSS stylesheet that aims to strike a balance between a lightweight CSS framework and a CSS normalizer, providing good defaults, normalization and opt-in utility classes. It aims to speed up development by offering a set of common styles that you would most likely end up writing anyway.
- Reset and Normalize: Decilitre draws inspiration from projects like Normalize and Sanitize to ensure consistent styling across different browsers and devices.
- Good Defaults: The framework includes sensible default styles for forms, blockquotes, code blocks and tables, providing a solid starting point for your projects.
- Minimal and Non-Intrusive: Decilitre strives to get out of your way as soon as possible. It utilizes low specificity selectors, so you don't have to worry about your custom styles being overridden.
- Few Opt-in Utilities: Decilitre provides a minimal set of opt-in utility classes.
Link to the decilitre stylesheet.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/decilitre.min.css" rel="stylesheet" />
Optionally, you can also link the utilities stylesheet. Utilities don't depend on the decilitre stylesheet, so you can use them in any other project.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/utilities.min.css" rel="stylesheet" />
To customize the styling in Decilitre, you can leverage the provided SCSS variables if you are using SCSS in your project. If you are using CSS, you can modify the CSS variables directly. Below are the available variables along with their default values and usage within Decilitre:
- SCSS Variable:
$color-primary
- CSS Variable:
--color-primary
- Default Value:
#9b4dca
- Usage:
- Used for links
- Used for the botton class
- Used for block code decoration
- Used for focus states
- SCSS Variable:
$color-details-bg
- CSS Variable:
--color-details-bg
- Default Value:
#f4f5f6
- Usage:
- Used as an alternative background for code elements
- Used as an alternative background for block code elements
- Should be close to the background color
- SCSS Variable:
$color-details-fg
- CSS Variable:
--color-details-fg
- Default Value:
#d1d1d1
- Usage:
- Used for styling quote blocks
- Used for form elements
- Used for dividers
- Should be close to the foreground color
Please note that Decilitre does not provide background or foreground colors.
If supported, we use :focus-visible
to show an outline around focused elements.
The outline can be customize with the following:
- SCSS Variable:
$focus-size
- CSS Variable:
--focus-size
- Default Value:
2px
- SCSS Variable:
$focus-style
- CSS Variable:
--focus-style
- Default Value:
solid
- SCSS Variable:
$focus-color
- CSS Variable:
--focus-color
- Default Value:
--primary-color
or#4871c6
- SCSS Variable:
$focus-offset
- CSS Variable:
--focus-offset
- Default Value:
$focus-size
or--focus-size
or2px
A simple button. Note that we don't set a background, only a border.
The button should look the same using a button
or a
tag.
.button {
display: inline-block;
border: 1px solid $button-color;
color: inherit;
text-decoration: none;
padding: 0.6em 0.8em;
border-radius: 0.2em;
line-height: 1;
&:focus {
outline: none;
}
&:focus-visible {
outline: 1px solid $button-color;
outline-offset: 1px;
}
&[disabled] {
cursor: default;
opacity: 0.4;
}
}
If $button-color
it's not set, it'll first fallback to --color-primary
. This way we can assure that .button
can use the primary color of decilitre while at the same time being avaliable for use on it's own.
- SCSS Variable:
$button-color
- CSS Variable:
--button-color
- Default Value:
--color-primary
or#9b4dca
"Smol Intrinsic Container" utility from Stephanie Eckles's Smolcss.
.container {
width: min(100% - $container-margin, $container-max);
margin-inline: auto;
}
- SCSS Variable:
$container-margin
- CSS Variable:
--container-margin
- Default Value:
3rem
- SCSS Variable:
$container-max
- CSS Variable:
--container-max
- Default Value:
80ch
Andy Bell's flow utility. It adds margin-top to all but the first child elements. The size is based on the font size. Useful to quickly add spacing for text content.
.flow > * + * {
margin-block-start: $flow-space;
}
- SCSS Variable:
$flow-space
- CSS Variable:
--flow-space
- Default Value:
1em
Andy Bell's full bleed utility. It allows content to spread the full viewport's width. Useful for "escaping" out of a container class. We give it a little more than 100vw width to avoid problems with partial pixels.
.full-bleed {
max-width: unset;
width: 100.02vw;
margin-left: 50%;
transform: translateX(-50%);
}
This utility class provides a solution for hiding content from the browser while ensuring its visibility to screen readers. It is an alternative to using visibility: hidden
, as the latter removes the element from the accessibility tree. Numerous implementations of this utility class exist, we have opted for Tailwind's version. Please note that this is a hack and not a complete solution, see this article about possible accessibility problems.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
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:
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.
Contributions are welcome! If you find any bugs or have suggestions for improvement, please open an issue or submit a pull request.
Decilitre CSS Framework is released under the MIT License.