https://github.com/vladocar/Katana

Katana is CSS Layout System made with Flexbox
https://github.com/vladocar/Katana

css css-framework css-grid css-grid-layout css-layout css-library css3 flex flexbox flexbox-grid grid html html-css html-template sass sass-framework scss scss-framework scss-library scss-styles

Last synced: 3 months ago
JSON representation

Katana is CSS Layout System made with Flexbox

• Host: GitHub
• URL: https://github.com/vladocar/Katana
• Owner: vladocar
• License: mit
• Created: 2018-06-02T14:09:38.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-04-17T21:38:43.000Z (over 3 years ago)
• Last Synced: 2024-07-07T15:44:48.373Z (4 months ago)
• Topics: css, css-framework, css-grid, css-grid-layout, css-layout, css-library, css3, flex, flexbox, flexbox-grid, grid, html, html-css, html-template, sass, sass-framework, scss, scss-framework, scss-library, scss-styles
• Language: HTML
• Homepage: https://vladocar.github.io/Katana/
• Size: 160 KB
• Stars: 60
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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/](https://vladocar.github.io/Katana/)

also:

[Katana Demo](https://vladocar.github.io/Katana/katana-demo.html)

### 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](https://caniuse.com/#feat=flexbox)

### License

This project is licensed under the MIT License