Semantic, responsive, and lightweight flexbox 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.
-
Clone the project
$ git clone https://github.com/vitrineed/akali-grid.git -
Include in your project:
<link rel='stylesheet' type='text/css' href='akali-grid.css'>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.
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.
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'
Read the full documentation here
- guivr - Creator of Akali Grid
- jeffersondanielss
You can check out the full license here
This project is licensed under the terms of the MIT license.