📝 🔥 Responsive line-height for the perfect vertical rhythm
Live test: https://vnurich.github.io/set-line/
set-line
is a config file reader (SASS-map) for clean and responsive vertical rhythm, focusing on root font-size
and line-height
for each necessary breakpoint. The element's alignment calculated by padding-top
and margin-bottom
properties. And the only value that will have to be considered manually is the cap-height
which is the proportion number (~0.5-0.9) of the font-size
.
An element can contain the following parameters
$line-height
(important) - REMs (e.g. 2rem);$font-size
(important) - REMs (e.g. 2.4rem);$cap-height
(important) - the proporion of the font-size (e.g. 0.68), must be considered manually;$space-top
- default0
, the number of 'lines' above the element ('line' is equal to the current rootline-height
);$space-bottom
- same as$space-top
, but below the element;$font-weight
- CSS standartfont-weight
parameter (e.g. normal, bold, lighter, bolder,inherit, 100, 200, 300, 400, 500, 600, 700, 800, 900);$font-style
- CSS standartfont-style
parameter (e.g. normal, italic, inherit);$text-align
- CSS standarttext-align
parameter (e.g. left, center, right, inherit);$font-family
- CSS standart list. Notice: must be prepared as a sass-map variable, for example:$font-family-serif: ('Merriweather', 'Times New Roman', 'serif')
.
Usage
Suppose that we have already imported set-line.scss
and prepared the config-file.scss
. Now all you need is just to set mixins like that:
html p h1 .my-element /// etc...
That's it! For example your compiled css stylesheet with p
element may look like this:
{ } { }
And you get your perfect vertical rhythm for each neccesary breakpoint!
Also we have two helpers which uses the config file data.
Function get-value() gets any value from the config file:
get-value('property-name',;/// for example ;;
Mixin set-breakpoint() creates @media(min-width: [val]) { [content] }
wrapper:
// value taken from the config file // value set manually. Can be rem/em/px
Getting started
Install and import lib
npm install set-line
; // import main lib ; // import main config file ; // sass var name from your config file ; // root (default/mobile-first) device name from your config file
Prepare config file
First import fonts you need:
;
Set any font-family vars you want:
;;/// etc...
Create base variable for your config:
;
And fill it with your settings. 'root' element containing 'font-size', 'breakpoint' and 'line-height' is important for each breakpoint. Here is an example:
;
Dev environment
Clone or download this repo:
git clone https://github.com/vnurich/set-line.git
Install dependencies:
npm install
Run local server (http://localhost:3000)
npm run dev
License
This project is licensed under the MIT License