akali-grid v1.0.1
About
What is Akali Grid?
Grids divide horizontal space into units called "column". Imagine your page divided into 12 columns, you could set your sidenav to take 4 columns and your content to take 8. Using Akali makes content appear to flow more naturally on your page and in other devices. Akali is maintaned by Vitrineed and receives constant updates.
Getting started
Setup the project
Clone the project
$ git clone https://github.com/vitrineed/akali-grid.gitInclude in your project:
<link rel='stylesheet' type='text/css' href='akali-grid.css'>Features
Semantic
Akali is semantic, which improves your code's readability, maintanability and consequently your team's productivity.
Choose between HTML or SCSS/SASS and you'll always see how Akali maintains its semantics like no other grid system. Classes like "four wide column" seem to be sentences and are easier for everyone to understand what's happening on the page, even if you're not a front-end developer.
Responsive
Akali includes a responsive flexbox grid that appropriately scales up to 12 columns as the device or viewport size increases.
You can set columns wides on each device if necessary.
Magical
You'll love Akali, because it comes with unbelievable handy utilities.
- Easily fill columns spaces with 'fill column', no math :-P
- Easily center grids with 'centered grid'
- Create columns that will take full width on mobile no matter what with 'stackable grid'
- Determine which device the column should appear by using 'desktop only', etc
- Set offset for each device 'offset two on tablet' or set global offset 'offset two column'
- Reverse a grid order with 'reversed grid', if grid is stackable, 'stackable reversed grid'
- Create containers or full width containers with 'container' or 'fluid container'
Documentation
Read the full documentation here
Contributors
- guivr - Creator of Akali Grid
- jeffersondanielss
License
You can check out the full license here
This project is licensed under the terms of the MIT license.