Simple, responsive, modular
CSS framework for your frontend job

Demo

Installation
via npm
npm install --save roolith-css@2.0.2

Then import roolith-css into your SCSS file

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

if you wish to override default settings

@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";

From 2.0.x you can use css variables to override default settings. For example you can change colors as follows

: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;
}
How to activate dark theme?

Add class theme-dark to body tag or if you want a certain portion to be dark then add theme-dark class to parent container.

Traditional

Download CSS and inject into header, that's it!

<!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="path/to/roolith.min.css">
</head>
<body>
    <!-- page content -->
</body>
</html>
CDN unpkg
<link rel="stylesheet" href="https://unpkg.com/roolith-css@2.0.2/dist/roolith-2.0.2.min.css">
CDN jsdelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/roolith-css@2.0.2/dist/roolith-2.0.2.min.css">
Changelog

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();