Grid System

Akali it's based on a 12 column responsive and flexbox layout, you can use it with SASS/SCSS mixins or our predefined classes.

Basics:

• The three major components of Akali are: Row, Column and Container
• Rows have 100% width and is divided into 12 possible columns spaces.
• Columns are Row's children and can be 1 to 12 wide (8,33% to 100%)
• Containers are large width elements

Rows

There are two types of Rows in Akali:

• Normal (Default, Centered, All Centered, Stackable, Reversed)
• Limited Row

Normal rows works the way you expect, while Limited Rows override's columns wide to be exactly the defined on row, for example, a two row column will have its column's size defined to 50%, which means 2 per row.

If you are using SASS/SCSS, Rows have the possible arguments by default:

• $mobile: auto, $tablet: auto, $desktop: auto - Create limited rows that changes with the devices size
• $centered: false, $vertical-centered: false
• $reversed: false - Columns order will be reversed
• $stackable: false, $reversed-stackable: false - Columns in a stackable row takes 100% width on mobile
• $mobile-visible: true, $tablet-visible: true, $desktop-visible: true - Hide rows in specific devices by declaring any of these vars to false

Columns

There are three types of Rows in Akali:

• Auto size (If there's 1 column, width: 100%; if there's 2 column, width: 50%)
• Wide defined (Can be different as the device changes)
• Fill (Complete columns spaces on a row, e.g.: 4 columns taken, fill will take another 8)

If you don't define a columns' wide on a Normal Row, it will automatically fit conforms the number of columns, for example, 4 auto size in a normal row, each one will have 25% width.

If you are using SASS/SCSS, Columns have the possible arguments by default:

• $mobile: auto, $tablet: auto, $desktop: auto - Define the wide of the column in devices, remember that Akali is mobile-first, so if you do this: @include column(4) it will understand that you want to create a column that is 4 wide on all devices.
• $mobile-visible: true, $tablet-visible: true, $desktop-visible: true - Hide columns in specific devices by declaring any of these vars to false
• $offset: 0 ($mobile-offset: 0, $tablet-offset: 0, $desktop-offset: 0) - Offset are left margins that take the argument of a column wide, and you can set different offsets according to devices.

Containers

Containers are great to highlight important elements in page. There are two types of Containers in Akali:

• Normal (90% width horizontally centered)
• Fluid (100% width)

If you are using SASS/SCSS, Containers have the possible arguments by default:

• $fluid: false
• $mobile-visible: true, $tablet-visible: true, $desktop-visible: true - Hide containers in specific devices by declaring any of these vars to false