Skip to content

vladocar/Katana

Repository files navigation

Katana.scss

Katana is CSS Layout System made with Flexbox


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