kitoko

The Typography Based CSS Framework

Quick start

npm i --save kitoko

then in your main scss/sass file :

@import 'kitoko';

Step 1 : Configure your typography

Before the kitoko include, you can set these following variables.

$font-size: 16; // in px
$font-size-desktop: 20; // in px
$line-height: 1.5; // line-height is 1.5 x font-size
$line-height-desktop: 1.5;
$size-ratio: 1.414; // ratio of heading sizes
$measure: 33; // line width max for .measure class. (in rem)

Step 2 : Just write HTML !

To show the grid, you can add the .grid class to the tag you want.

To activate the document grid :

$show-grid: true;

Documentation

https://anthonyjeamme.github.io/kitokocss/

Any suggestion ?

Please contact me at [e-mail]