Kingdom

A CSS framework for consistent sizing, spacing and typography.

Please see the full documentation for demos and details.

Installation via npm

npm install kingdom-css

Usage in Sass

Import the stuff you want, just make sure the paths are right for your own file structure:

/* Example of Kingdom CSS usage */

// 1: Set your variables first
// For this example we have just picked a primary color:
$colors: (primary: rgb(71, 40, 43));

// 2: Import the level of Kingdom you want:
@import "../node_modules/kingdom-css/src/L3-rhythm";

// 3: Optionally import the Kingdom utility classes you want:
@import "../node_modules/kingdom-css/src/utilities/spacing";
@import "../node_modules/kingdom-css/src/utilities/sizing";
// ...

// 4: Optionally import any Kingdom extensions you want:
@import "../node_modules/kingdom-css/src/extensions/forms";
// ...

/* Done! Now complete the masterpiece with your own Sass! */

// You may extend the placeholders Kingdom provides,
// as well as any mixins or functions from Kingdom's modules.

// Here's a quick example of a card component you could write:
.my-card {
  @extend %border;
  @include space-inside();
}
// ...