decent-scss

Have you no decency, CSS? Decent is a flexible and functional CSS library for building literally anything.

Showing:

Popularity

Downloads/wk

63

GitHub Stars

12

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

4

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Decent

npm version CircleCI Status

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.


Modules


Setup

Install Decent

$ npm install --save-dev decent-scss

Import Decent

@import 'decent-scss/modules/all';

Configuration

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.

@import 'path/to/settings';

Base

rem

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 16px.

$rem-base: 16px;

Box Sizing

Setting $border-box to true will apply box-sizing: border-box to the * selector. Default is false.

$border-box: true;

Inputs

Browser default styling of inputs aren't reset by the Reset module, but they can be reset with Decent by setting $reset-inputs to true. Default is false.

$reset-inputs: true;

Responsive Breakpoints

You can change or extend the breakpoints available with the $breakpoints map.

$breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1280px,
  xl: 1440px
);

Typography

[Change to font-sizes map]

$ratio: 1.5;

Typesets

Typsets define the available types of your design, with two map keys being reserved for semantic tags:

  • The default typeset will be set on the body selector.
  • The monospace typeset will be set on the pre, code selectors. But this typeset will also be available with the .monospace class.

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
  )
);

Weights

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 .tw-400, .tw-500, .tw-700.

Grid

The $container-width variable updates the max-width of the .container class.

$container-width: 80rem;

Decent's grid system is based off of 12 columns by default, but can be updated to support any number of columns with the $columns variable.

$columns: 12;

Spacing, Length, and Position

The default $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
);

Style

Border Radius

$border-radii: (
  'default': 2px,
  '2': 4px
);

Box Shadow

$shadows: (
  'default': 0 1px 8px rgba(0, 0, 0, 0.1),
  '2': 0 4px 16px rgba(0, 0, 0, 0.1)
);

Overlay

$overlays: (
  'default': rgba(#000, 0.8),
  'light': rgba(#fff, 0.8)
);

Principles

Naming & Configuration

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):

[breakpoint-][`property`][modifiers][`-key`][-value]

Example — Color

$colorsets: (
  'primary': (
    'alt': #
  )
);

.cbg-primary-alt

Example — Margin

$modular-scale: (
 '1': 0.5rem
);

.md-pt-1


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:

No Side Effects

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.

Composable

Think composition over inheritance. With Decent.scss you compose your ui out of already existing blocks (think legos) of css.

Consistent

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.

Clear & Easy to follow

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.

Customizable

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.

Useful Reads

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100