29 components, 11 extended components and 15 blocks… and still fewer dependencies than your npm install.
npm install --save roolith-css@3.5.1Then 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;
}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.
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><link rel="stylesheet" href="https://unpkg.com/roolith-css@3.5.1/dist/roolith-3.5.1.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/roolith-css@3.5.1/dist/roolith-3.5.1.min.css">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();