Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

You can’t perform that action at this time.