Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including kingdom-css with all npm packages installed. Try it out:

kingdom-css lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("kingdom-css/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

kingdom-css v0.13.0

A CSS framework for consistent sizing, spacing and typography.

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();
}
// ...
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free