Configuration

Sass

You can customize Kristal by adding configuration maps to @use. Every config file section is optional, so you only have to specify what you’d like to change. Any missing sections will fall back to Kristal’s default configuration.

Learn more about configuration sass modules in the Sass documentation.

Breakpoints

The breakpoint map is where you define the application’s breakpoints.

@use "kristal" with (
  $breakpoints: (
    "xs": 0,
    "sm": 576px,
    "md": 768px,
    "lg": 992px,
    "xl": 1200px,
  )
);

Theme

The theme map is where you define your application’s color palette, type scale, font sizes, border radius values, and more.

@use "kristal" with (
  $theme: (
    "color": (
      "black": #000,
      "white": #fff
    ),
    "space": (
      "0": 0,
      "1": 0.25rem
    ),
  )
);

Converting theme tokens to CSS variables

By default, Kristal converts theme tokens defined in your theme map (or our default theme map) to CSS variables internally so you don’t have to.

Given a theme map that looks like this:

@use "kristal" with (
  $theme: (
    "color": (
      "blue": (
        "100": #0088e3,
        "200": #0088e3,
      ),
      "font-size": (
        "xl": 24px,
      ),
    ),
  );
);

This will automatically generate CSS variables at the root level that look like:

:root {
  --color-blue-100: #0088e3;
  --color-blue-200: #0088e3;
  --fontsize-xl: 24px;
}

Theming

The theme map is where you define multiple themes for your application. Dark mode is built-in Kristal.

@use "kristal" with (
  $theming: (
    "dark": (
      "color": (
        "black": #fff,
        "white": #000
      ),
    )
  )
);

Utilities

The utilities map is where you define your application’s utilities.

@use "kristal" with (
  $utilities: (
    "opacity": (
      "property": opacity,
      "class": o,
      "responsive": true,
      "values": (
        "0": 0,
        "25": 0.25
      )
    )
  )
);

Css

You can use Kristal with no build tools only some parts are redundant to customize.

• You can’t customize Kristal breakpoints.
• You can’t easily customize Kristal utilities.
• You can’t just import what you need.

Theme

Just override or add new tokens in your CSS files.

:root {
  --color-brand-100: #ffd0ae;
  --color-brand-200: #ffb27e;
  --color-brand-300: #ff944c;
  --color-blue-100: #ace1ff;
  --color-blue-200: #7cbfff;
  --color-blue-300: #49abff;
}

Theming

Use the right data-theme attribute and just override or add new tokens in your CSS files.

:root[data-theme="dark"] {
  --color-white: #000;
  --color-black: #fff;
}