roolith css framework

Demo

Components

Installation

via npm

npm install --save roolith-css

Then import roolith-css into your SCSS file

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

if you wish to override default settings

@import "PATH/TO/node_modules/roolith-css/src/sass/function";
@import "./your-settings";
@import "PATH/TO/node_modules/roolith-css/src/sass/roolith";

How to activate dark theme?

@import "PATH/TO/node_modules/roolith-css/src/sass/function";
@import "./your-settings";
@import "PATH/TO/node_modules/roolith-css/src/sass/roolith";
@include roolith-theme-dark(); /* add theme-dark class to body */

Important: And 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@1.8.0/dist/css/roolith.min.css">

CDN jsdelivr

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

Dark version

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

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

Changelog

v1.8.0 - UI updated for select, checkbox, accordion, button and sass warning fix

v1.7.2 - Added dark version of CSS in default bundle and updated documentation

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

Simple, responsive, modular CSS framework for your frontend job