roolith css framework

Installation

via npm

npm install --save roolith-css@3.5.1

Then import roolith-css into your SCSS file, like a true 10x developer

@use "PATH/TO/node_modules/roolith-css/src/sass/roolith";

If the defaults aren't your vibe (we won't be offended)…

@use "PATH/TO/node_modules/roolith-css/src/sass/settings" with (
    $global-border-radius: 5px,
    $colors: (
        primary: #0099ff,
        secondary: #373459,
        tertiary: #f4751a,
        info: #f8bf16,
        success: #9ecf91,
        danger: #c40000,
        link: #67bcef,
        dark: #212121,
        black: #000000,
        white: #ffffff,
        light: #fafbfc,
    )
);
@import "PATH/TO/node_modules/roolith-css/src/sass/roolith";

Roolith CSS runs on Google Inter Font and Iconoir - add them to your project or risk looking like Comic Sans.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />

If full Roolith is too much, pick and choose like a CSS buffet

@use "PATH/TO/node_modules/roolith-css/src/sass/main" as r;

@include r.roolith-base();
@include r.roolith-modules();
@include r.roolith-extended-modules();
@include r.roolith-blocks();

Take control! Override default settings with CSS variables and show colors who's in charge.

:root {
    --r-color-primary: #0099ff;
    --r-color-secondary: #373459;
    --r-color-tertiary: #f4751a;
    --r-color-info: #f8bf16;
    --r-color-success: #9ecf91;
    --r-color-danger: #c40000;
    --r-color-link: #67bcef;
    --r-color-dark: #212121;
    --r-color-black: #000000;
    --r-color-white: #ffffff;
    --r-color-light: #fafbfc;
}

Want to go dark? Here's how to flip the switch.

To go full dark mode, slap theme-dark on your body tag. Want just a corner of darkness? Add it to the parent container instead - embrace selective shadows.

Traditional

Just download CSS, inject, and relax - Roolith handles the rest.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>roolith css framework</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="path/to/roolith.min.css">
</head>
<body>
    <!-- page content -->
</body>
</html>

CDN unpkg

<link rel="stylesheet" href="https://unpkg.com/roolith-css@3.5.1/dist/roolith-3.5.1.min.css">

CDN jsdelivr

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

Changelog

3.5.0 - Minor UI fixes, Block filter renamed to Block inline, JavaScript datepicker version

3.0.0 - Global style updated, Added extended modules and blocks

2.0.1 - Added CSS variable support, Added support for Dart Sass

1.8.0 - UI updated for select, checkbox, accordion, button and sass warning fix

1.7.2 - Added dark version of CSS in default bundle and updated documentation

1.7.1 - Tweak and dark theme added. To enable dark theme @include roolith-theme-dark();

Basic

Extended

Blocks