Katana is CSS Layout System made with Flexbox
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
logo
.gitignore
LICENSE
README.md
index.html
katana-code.html
katana-demo.html
katana.css
katana.sass
katana.scss
package.json

README.md

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