KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

Katana

★ 60 Open GitHub ↗

Katana is CSS Layout System made with Flexbox

// repository documentation

★ 0 (0 ratings)

# Katana.scss
Katana is CSS Layout System made with Flexbox

<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/](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