npm install --save roolith-css@2.0.2Then 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;
}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.
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><link rel="stylesheet" href="https://unpkg.com/roolith-css@2.0.2/dist/roolith-2.0.2.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/roolith-css@2.0.2/dist/roolith-2.0.2.min.css">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();