Lightweight Reader-Centric CSS Framework – spirit.css

Preview:

Description:

spirit.css is a lightweight, modern, customizable, reader-centric CSS framework designed for magazines, blogs, documentation, and personal websites.

How to use it:

1. Install the spirit.css with the NPM package manager.

# NPM
$ npm install spirit.css --save

2. Import the spirit.css into your project.

// core
@import './src/main.scss'
// optional font
@import './src/fonts.scss'

3. Override the default variables to fit your design.

// native font snippet from Bootstrap
$native-sans-font: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Helvetica Neue",
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol" !default;
$native-serif-font: Georgia,
Times,
"Times New Roman",
serif;
$sans-font: 'Public Sans',
sans-serif;
$serif-font: 'Butler',
serif;
// breakpoint sizes
$mobile: 768px;
$tablet: 769px;
$desktop: 1024px;
$widescreen: 1216px;
$fullhd: 1408px;
// grid vars
$grid-tc: repeat(12, 1fr);
$grid-tr: repeat(12, 1fr);
$col-gap: 1rem;
$row-gap: 1rem;
$grid-cs: 1;
$grid-ce: -1;
$grid-rs: 1;
$grid-re: -1;
// colors
$navy: #001F3F;
$blue: #0074D9;
$aqua: #7FDBFF;
$teal: #39CCCC;
$olive: #3D9970;
$green: #2ECC40;
$lime: #01FF70;
$yellow: #FFDC00;
$orange: #FF851B;
$red: #FF4136;
$fuchsia: #F012BE;
$purple: #B10DC9;
$maroon: #85144B;
$white: #FFFFFF;
$gray: #AAAAAA;
$silver:#DDDDDD;
$black: #111111;
// link styles
$link-dark: #0F52BA;
$link-light: #0080FF;
$link-mid: #0074D9;

More Previews:

Typography

Grid Layout

Form Elements

Box

Lists