Katana is CSS Layout System made with Flexbox
Minimal flexbox system for making HTML layouts.
- Minimal. It only 20 lines of .scss.
- Clear syntax.
- Fluid column.
- Anything can be personalised.
Katana default values:
- 12 columns
- 15 px grid margin
- 94% main grid size
Basically you can generate any grid with any value or unit you like just change the default numbers in the katana.scss.
How the CSS class naming system works?
The class names are col-1, col-2 ..
The width value of col-1 is 100%, the value of col-3 is 100/3 = 33,33%, col-5 is 100/5 = 20%.
You also have .fluid column. You can use multiple columns in one row.
Download or Install
You can simply download the library or use:
$ npm i katana.scss
Works in all flex compatible browsers
This project is licensed under the MIT License