Katana.scss

Katana is CSS Layout System made with Flexbox

<img src="/logo/katana.png" /> <hr>

Minimal flexbox system for making HTML layouts.

• Minimal. It only 20 lines of .scss.
• Clear syntax.
• Responsive.
• 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.

The Grid:

https://vladocar.github.io/Katana/

also:

Katana Demo

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

Browser Support

Works in all flex compatible browsers

License

This project is licensed under the MIT License