Decent is a flexible, functional CSS library for building literally anything. Designed to be flexible and configurable, it can be used for building anything from simple prototypes to production applications and websites.
$ npm install --save-dev decent-scss
Decent is meant to work for your design, so take a few minutes to configure the framework. Create a
.scss file to define your settings — something like
settings.scss. And import that file above your Decent import.
If you use
rem's for measurements and font sizes, you can update the base
rem value with the
$rem-base variable — this will be applied to the
body selector. Default is
true will apply
box-sizing: border-box to the
* selector. Default is
Browser default styling of inputs aren't reset by the Reset module, but they can be reset with Decent by setting
true. Default is
You can change or extend the breakpoints available with the
$breakpoints: ( sm: 480px, md: 768px, lg: 1280px, xl: 1440px );
[Change to font-sizes map]
Typsets define the available types of your design, with two map keys being reserved for semantic tags:
defaulttypeset will be set on the
monospacetypeset will be set on the
pre, codeselectors. But this typeset will also be available with the
Additional maps will be availabe through classes that are defined by their keys. For example, the
display map in the following configuration will generate a
.display class that can be used to display a serif typeset.
$typesets: ( default: ( font-family: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;), font-weight: 400, line-height-body: 1.6, line-height-heading: 1.2, text-transform: none, letter-spacing: 0 ), monospace: ( font-family: (Courier, monospace), font-weight: 400, line-height: 1.2, text-transform: none, letter-spacing: 0 ), display: ( font-family: ('Cormorant Garamond', Georgia, serif), font-weight: 400, line-height: 1.2, text-transform: uppercase, letter-spacing: 0.1em ) );
Depending on how fonts are loaded and which weights are available, the
$font-weights map can be used to rename the
font-weight classes. The default map is:
$font-weights: ( 'regular': 400, 'semibold': 500, 'bold': 700 );
But, a more explicit map could be:
$font-weights: ( '400': 400, '500': 500, '700': 700 );
This would generate
$container-width variable updates the
max-width of the
Decent's grid system is based off of 12 columns by default, but can be updated to support any number of columns with the
$measurements are based off of a modular scale, but these can be any logical series of keys and values.
$measurements: ( '0': 0, '1': 0.5rem, '2': 1rem, '3': 1.75rem, '4': 3rem, '5': 5rem, '6': 9rem, '7': 16rem, '8': 28rem, '9': 48rem, '10': 72rem );
$border-radii: ( 'default': 2px, '2': 4px );
$shadows: ( 'default': 0 1px 8px rgba(0, 0, 0, 0.1), '2': 0 4px 16px rgba(0, 0, 0, 0.1) );
$overlays: ( 'default': rgba(#000, 0.8), 'light': rgba(#fff, 0.8) );
Decent is designed to be incredibly flexible while balancing the right amount of assumption to be consistent and easy-to-use. Most of the Decent class names can be broken down into 5 categories (with some exceptions depending on the property):
$colorsets: ( 'primary': ( 'alt': # ) );
$modular-scale: ( '1': 0.5rem );
You might see this and think to yourself, why would anyone want to write CSS this way? So did we. But after some research and using Basscss for a bit we were hooked.
Here's what convinced us:
Although the cascade can be a useful thing, more often than not it becomes a hinderance in long term projects or with projects that have multiple developers working in the code base.
Think composition over inheritance. With Decent.scss you compose your ui out of already existing blocks (think legos) of css.
Functional CSS helps to facility consistency in your end products. With Decent.scss, all of the values for whitespace, font sizes, etc are all calculated from the same settings. This means that there are no more magic numbers hiding out in your stylesheets and that consistency is as easy as using the generated classes.
There's a lot of contention around this point, but we maintain that it's easier to reason about complexity in your markup as opposed to CSS. With CSS you have to worry about inheritance as well as the cascade, two things that can work against as soon as your website or app starts to grow. By taking a few minutes to familiarize yourself with the Class Reference for Decent.scss, you'll be able to look at any markup and have a good idea of how it looks and functions.
Decent utilizes maps to make the framework as flexible as possible. Modular scale (padding, margin, heights, and widths), font scale, typesetting, and colors are all configurable.