Semantic, responsive, magical, easy to learn 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.
-
Clone the project
$ git clone https://github.com/meu-guru/akali-grid.git -
Include in your project:
<link rel='stylesheet' type='text/css' href='akali-grid.css'>- Have fun!
Akali is semantic, which improves your codes readability, maintanability and consequently your team's productivity.
Classes like "four wide column" seems to be sentences and are easier for everyone to understand what's happening on the front 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 'computer 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'
- Hello! How are you? Fine, thanks.
- Guilherme Vieira Rizzo - Webdesigner guivr2011@gmail.com
You can check out the full license here
This project is licensed under the terms of the MIT license.