Kristal - Installation

Using Kristal via CDN

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link href="https://cdn.jsdelivr.net/npm/kristal@0.0.5/dist/css/kristal.min.css" rel="stylesheet" />

HTML starter template

If you want to get started right away, you can use this HTML starter template.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/kristal@0.0.5/dist/css/kristal.min.css" rel="stylesheet" />
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Installing Kristal as a Sass package

If you want full control over customizing and theming you’ll want to install Kristal and its peer-dependencies via npm. Sass package is required.

npm install kristal sass

Create a Sass file

Create a scss folder in which you add a file called main.scss

You have two options: include all of the styles at once:

@use "kristal";

Or pick the parts you need:

@use "kristal/config";
@use "kristal/base";
@use "kristal/utilities";

Building your CSS

In your terminal, type the following command:

sass --sourcemap=none scss/main.scss:css/main.css

To watch for changes, just type the following command:

sass --watch --sourcemap=none scss/main.scss:css/main.css

Customize your styles

You can customize Kristal by adding a configuration map to @use.

@use "kristal" with (
  $breakpoints: (),
  $theme: (),
  $theming: (),
  $utilities: (),
);

Installation