GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → vladocar → Katana

vladocar / Katana

Licence: MIT License
Katana is CSS Layout System made with Flexbox

Programming Languages

HTML
75241 projects
CSS
56736 projects

Labels

csshtmlsassflexgridcss3flexboxscsscss-frameworkhtml-templatecss-gridhtml-cssflexbox-gridcss-librarysass-frameworkscss-frameworkscss-libraryscss-stylescss-grid-layoutcss-layout

Projects that are alternatives of or similar to Katana

Flexy
Flexy is minimal CSS framework made with Flex
Stars: ✭ 114 (+100%)
Mutual labels:  flex, css3, flexbox, html-css, flexbox-grid
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (+170.18%)
Mutual labels:  flex, grid, flexbox, css-framework, flexbox-grid
Infinity Css Grid
Fluid Flex Solution for making infinite grid columns.
Stars: ✭ 112 (+96.49%)
Mutual labels:  flex, flexbox, css-framework, css-grid, flexbox-grid
40-lines-of-Sass
Full featured flexbox grid in 40 lines of Sass
Stars: ✭ 20 (-64.91%)
Mutual labels:  flexbox, css-grid, flexbox-grid, css-grid-layout
The Flex Grid
The Flex Grid is a responsive CSS flexbox grid. Because we can!
Stars: ✭ 45 (-21.05%)
Mutual labels:  flexbox, css-framework, css-grid, flexbox-grid
Frow
Flexbox Toolkit & Grid
Stars: ✭ 152 (+166.67%)
Mutual labels:  flexbox, css-framework, css-grid, flexbox-grid
grid-garden
Solutions to CSS Grid Garden
Stars: ✭ 79 (+38.6%)
Mutual labels:  grid, css3, css-grid, css-grid-layout
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+956.14%)
Mutual labels:  flex, flexbox, css-grid, flexbox-grid
Gridlex
Just a CSS Flexbox Grid System
Stars: ✭ 1,328 (+2229.82%)
Mutual labels:  grid, css3, css-grid, flexbox-grid
Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+1156.14%)
Mutual labels:  css3, flexbox, css-framework, css-grid
tetris-grid
◼️Lightweight and simple CSS grid
Stars: ✭ 16 (-71.93%)
Mutual labels:  grid, flexbox, css-grid, flexbox-grid
cice-playground
CICE Full Stack Web Course
Stars: ✭ 12 (-78.95%)
Mutual labels:  grid, css3, flexbox
gridbugs-ru
Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю
Stars: ✭ 27 (-52.63%)
Mutual labels:  grid, css-grid, css-grid-layout
Two-Lines-CSS-Framework
Two Lines CSS Framework
Stars: ✭ 17 (-70.18%)
Mutual labels:  css-framework, css-grid, css-library
flexboxes
CSS flexbox framework with pure flexbox grid ability
Stars: ✭ 27 (-52.63%)
Mutual labels:  flex, grid, flexbox
DisplayStructureElements
Display the structure of the elements in web template.
Stars: ✭ 17 (-70.18%)
Mutual labels:  css-grid, html-css, css-grid-layout
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (+14.04%)
Mutual labels:  grid, css-framework, css-grid
vanilla-js
Projects using pure JavaScript without any external libraries or frameworks
Stars: ✭ 129 (+126.32%)
Mutual labels:  css3, flexbox, css-grid
Fluid
Modern, Stylish, Easier and Powerful Css framework for faster and hassle free web development
Stars: ✭ 24 (-57.89%)
Mutual labels:  css-framework, css-grid, scss-framework
swatch
A lightweight, modern theming library based on CSS variables and the setter/getter pattern.
Stars: ✭ 14 (-75.44%)
Mutual labels:  css3, css-framework, css-library
View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].