Powered by Vitrineed

Akali

Semantic, responsive, and lightweight flexbox grid.

Download

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.

Super 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.

Take a look at how semantic your code will become with Akali:

HTML
SCSS (More features)

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.

HTML
SCSS

Magical

You'll love Akali, because it comes with unbelievable handy utilities.

  1. Easily fill columns spaces with 'fill column', no math :-P
  2. Easily center grids with 'centered grid'
  3. Create columns that will take full width on mobile no matter what with 'stackable grid'
  4. Determine which device the column should appear by using 'desktop only', etc
  5. Set offset for each device 'offset two on tablet' or set global offset 'offset two column'
  6. Reverse a grid order with 'reversed grid', if grid is stackable, 'stackable reversed grid'
  7. Create containers or full width containers with 'container' or 'fluid container'
HTML
SCSS (More features)

Documentation

Go to Akali's Documentation

Support Akali on GitHub

Please, contribute! Don't be afraid, we really need your help to grow.

Star Fork Issue Follow @vitrineed

Playground

How about try yourself Akali Grid right now?

Practice makes perfect.