Written in SCSS using BEM methodology so you can easily customize it to your own needs. Works on IE10+ and on every other browser. You can use default RWD break points or change it to your favourite. You can customize gaps between columns, aligning cells, flex direction, justifying content etc.
Complete step by step tutorial how to use it is below.
Main idea is based on simple inheritance - every element with class called grid should have children with class called col-*.
Most used example:
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid">
<div class="col-xs-3">col 1</div>
<div class="col-xs-4">col 2</div>
<div class="col-xs-5">col 3</div>
<div class="col-xs-2">col 4</div>
<div class="col-xs-6">col 5</div>
<div class="col-xs-4">col 6</div>
</div>Default column widths:
Default grid is based on 12 columns layout, that means that to fill one row with columns sum of col-VALUE should be 12; for example: col-xs-3 + col-xs-6 + col-xs-3 = 25% + 50% + 25% = 100%. Do not worry about prefixes like xs, md etc. I'm going to explain it later when i will write about responsiveness. For now i can say that... you can easily change it in kapi-flex/_config.scss file.
col 12
col 1
col 11
col 2
col 10
col 3
col 9
col 4
col 8
col 5
col 7
col 6
col 6
col 7
col 5
col 8
col 4
col 9
col 3
col 10
col 2
col 11
col 1
<div class="grid">
<div class="col-xs-12">col 12</div>
<div class="col-xs-1">col 1</div>
<div class="col-xs-11">col 11</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-10">col 10</div>
<div class="col-xs-3">col 3</div>
<div class="col-xs-9">col 9</div>
<div class="col-xs-4">col 4</div>
<div class="col-xs-8">col 8</div>
<div class="col-xs-5">col 5</div>
<div class="col-xs-7">col 7</div>
<div class="col-xs-6">col 6</div>
<div class="col-xs-6">col 6</div>
<div class="col-xs-7">col 7</div>
<div class="col-xs-5">col 5</div>
<div class="col-xs-8">col 8</div>
<div class="col-xs-4">col 4</div>
<div class="col-xs-9">col 9</div>
<div class="col-xs-3">col 3</div>
<div class="col-xs-10">col 10</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-11">col 11</div>
<div class="col-xs-1">col 1</div>
</div>Column offsets:
col 11
col 10
col 9
col 8
col 7
col 6
col 5
col 4
col 3
col 2
col 1
<div class="grid">
<div class="col-xs-11 col-push-xs-1">col 11</div>
<div class="col-xs-10 col-push-xs-2">col 10</div>
<div class="col-xs-9 col-push-xs-3">col 9</div>
<div class="col-xs-8 col-push-xs-4">col 8</div>
<div class="col-xs-7 col-push-xs-5">col 7</div>
<div class="col-xs-6 col-push-xs-6">col 6</div>
<div class="col-xs-5 col-push-xs-7">col 5</div>
<div class="col-xs-4 col-push-xs-8">col 4</div>
<div class="col-xs-3 col-push-xs-9">col 3</div>
<div class="col-xs-2 col-push-xs-10">col 2</div>
<div class="col-xs-1 col-push-xs-11">col 1</div>
</div>Column offsets:
col 11
col 10
col 9
col 8
col 7
col 6
col 5
col 4
col 3
col 2
col 1
<div class="grid">
<div class="col-xs-11 col-pull-xs-1">col 11</div>
<div class="col-xs-10 col-pull-xs-2">col 10</div>
<div class="col-xs-9 col-pull-xs-3">col 9</div>
<div class="col-xs-8 col-pull-xs-4">col 8</div>
<div class="col-xs-7 col-pull-xs-5">col 7</div>
<div class="col-xs-6 col-pull-xs-6">col 6</div>
<div class="col-xs-5 col-pull-xs-7">col 5</div>
<div class="col-xs-4 col-pull-xs-8">col 4</div>
<div class="col-xs-3 col-pull-xs-9">col 3</div>
<div class="col-xs-2 col-pull-xs-10">col 2</div>
<div class="col-xs-1 col-pull-xs-11">col 1</div>
</div>Various offsets combination:
col 1
col 2
col 3
<div class="grid">
<div class="col-xs-1 col-push-xs-2">col 1</div>
<div class="col-xs-2 col-pull-xs-2 col-push-xs-1">col 2</div>
<div class="col-xs-3 col-push-xs-1">col 3</div>
</div>Auto-width columns
Other way of using kapi-flex grid is to used columns width auto-width
col 1
col 2
col 3
col 4
col 5
col 1
col 2
col 3
<div class="grid">
<div class="col-xs">col 1</div>
<div class="col-xs">col 2</div>
<div class="col-xs">col 3</div>
<div class="col-xs">col 4</div>
<div class="col-xs">col 5</div>
</div>
<div class="grid">
<div class="col-xs">col 1</div>
<div class="col-xs">col 2</div>
<div class="col-xs">col 3</div>
</div>Alignment
Left (default)
left
<div class="grid grid--xs-start">
<div class="col-xs-4">left</div>
</div>Center
center
<div class="grid grid--xs-center">
<div class="col-xs-4">center</div>
</div>Right
end
<div class="grid grid--xs-end">
<div class="col-xs-4">end</div>
</div>Top
test
test
test
test
test
test
test
test
test
top
<div class="grid grid--xs-top">
<div class="col-xs-4">test<br>test<br>test<br>test<br>test</div>
<div class="col-xs-4">top</div>
</div>Middle
test
test
test
test
test
test
test
test
test
middle
<div class="grid grid--xs-middle">
<div class="col-xs-4">test<br>test<br>test<br>test<br>test</div>
<div class="col-xs-4">middle</div>
</div>Baseline
test
test
test
test
test
test
test
test
test
baseline
<div class="grid grid--xs-baseline">
<div class="col-xs-4">test<br>test<br>test<br>test<br>test</div>
<div class="col-xs-4">baseline</div>
</div>Bottom
test
test
test
test
test
test
test
test
test
bottom
<div class="grid grid--xs-bottom">
<div class="col-xs-4">test<br>test<br>test<br>test<br>test</div>
<div class="col-xs-4">bottom</div>
</div>Default alignment is set to stretch.
Aligment each column in different way.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto aut, commodi deserunt dicta eligendi error incidunt inventore maiores mollitia officiis placeat quibusdam tempora unde veritatis vero voluptas.
bottom
middle
top
<div class="grid">
<div class="col-xs-3">...</div>
<div class="col-xs-3 col-xs-bottom">bottom</div>
<div class="col-xs-3 col-xs-middle">middle</div>
<div class="col-xs-3 col-xs-top">top</div>
</div>Grid display options
Normal view
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid">
<div class="col-xs-2">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
<div class="col-xs-2">col 4</div>
<div class="col-xs-2">col 5</div>
<div class="col-xs-2">col 6</div>
</div>Reverse view
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid grid--xs-reverse">
<div class="col-xs-2">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
<div class="col-xs-2">col 4</div>
<div class="col-xs-2">col 5</div>
<div class="col-xs-2">col 6</div>
</div>Normal view with ordering first/last
col 1 (last)
col 2
col 3
col 4
col 5
col 6 (first)
<div class="grid">
<div class="col-xs-2 col-xs-last">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
<div class="col-xs-2">col 4</div>
<div class="col-xs-2">col 5</div>
<div class="col-xs-2 col-xs-first">col 6</div>
</div>Normal view (full device width)
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid">
<div class="col-xs-2">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
<div class="col-xs-2">col 4</div>
<div class="col-xs-2">col 5</div>
<div class="col-xs-2">col 6</div>
</div>Side gaps (full device width)
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid grid--xs-side-gaps">
<div class="col-xs-2">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
<div class="col-xs-2">col 4</div>
<div class="col-xs-2">col 5</div>
<div class="col-xs-2">col 6</div>
</div>Space between columns
col 1
col 2
col 3
<div class="grid grid--xs-between">
<div class="col-xs-2">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
</div>Space around columns
col 1
col 2
col 3
<div class="grid grid--xs-around">
<div class="col-xs-2">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
</div>Spacer between columns
col 1
col 2
col 3
<div class="grid">
<div class="col-xs-2">col 1</div>
<div class="col-xs-spacer">col 2</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
</div>Grid with gaps that are equal 20px
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid grid--20">
<div class="col-xs-2">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
<div class="col-xs-2">col 4</div>
<div class="col-xs-2">col 5</div>
<div class="col-xs-2">col 6</div>
</div>Grid with no gaps
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid grid--0">
<div class="col-xs-2">col 1</div>
<div class="col-xs-2">col 2</div>
<div class="col-xs-2">col 3</div>
<div class="col-xs-2">col 4</div>
<div class="col-xs-2">col 5</div>
<div class="col-xs-2">col 6</div>
</div>Nestes grids
1
2
3
4
1
2
3
4
1
2
3
4
5
<div class="grid nested-colors">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
<div class="col-xs-6">
<div class="grid">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
<div class="col-xs-6">
<div class="grid">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
<div class="col-xs-3">5</div>
</div>
</div>
</div>
</div>
</div>Column layout
Normal view
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid grid--column">
<div class="col-xs-12">col 1</div>
<div class="col-xs-12">col 2</div>
<div class="col-xs-12">col 3</div>
<div class="col-xs-12">col 4</div>
<div class="col-xs-12">col 5</div>
<div class="col-xs-12">col 6</div>
</div>Reverse view
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid grid--column grid--xs-reverse">
<div class="col-xs-12">col 1</div>
<div class="col-xs-12">col 2</div>
<div class="col-xs-12">col 3</div>
<div class="col-xs-12">col 4</div>
<div class="col-xs-12">col 5</div>
<div class="col-xs-12">col 6</div>
</div>Normal view with ordering first/last
col 1 (last)
col 2
col 3
col 4
col 5
col 6 (first)
<div class="grid grid--column">
<div class="col-xs-12 col-xs-last">col 1</div>
<div class="col-xs-12">col 2</div>
<div class="col-xs-12">col 3</div>
<div class="col-xs-12">col 4</div>
<div class="col-xs-12">col 5</div>
<div class="col-xs-12 col-xs-first">col 6</div>
</div>Normal view (full device width)
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid grid--column">
<div class="col-xs-12">col 1</div>
<div class="col-xs-12">col 2</div>
<div class="col-xs-12">col 3</div>
<div class="col-xs-12">col 4</div>
<div class="col-xs-12">col 5</div>
<div class="col-xs-12">col 6</div>
</div>Side gaps (full device width)
col 1
col 2
col 3
col 4
col 5
col 6
<div class="grid grid--column grid--xs-side-gaps">
<div class="col-xs-12">col 1</div>
<div class="col-xs-12">col 2</div>
<div class="col-xs-12">col 3</div>
<div class="col-xs-12">col 4</div>
<div class="col-xs-12">col 5</div>
<div class="col-xs-12">col 6</div>
</div>Example with nested grid (default row)
1
2
3
4
1
2
3
4
<div class="grid grid--column">
<div class="col-xs-12">1</div>
<div class="col-xs-12">2</div>
<div class="col-xs-12">3</div>
<div class="col-xs-12">4</div>
<div class="col-xs-6">
<div class="grid">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
</div>Documentation
All grid css classess:
.grid
--xs
--sm
--md
--lg
--xl
-column
-top
-middle
-bottom
-center
-baseline
-reverse
-end
-start
-around
-between
-side-gaps
Examples of class names: grid, grid--xs-top, grid--lg-reverse.
(resposive prefixes are optional)
--column
--top
--middle
--bottom
--center
--baseline
--reverse
--end
--start
--around
--between
--side-gaps
--(0, 10, 20, 30) - gaps in pixels
Examples of class names: grid, grid--top, grid--reverse, grid--20.
All column css classess:
.col
-xs
-sm
-md
-lg
-xl
-top
-middle
-bottom
-center
-baseline
-first
-last
-spacer
-(1 - 12)
Examples of class names: col-xs, col-sm-middle, col-md-3.
.col-push,
.col-pull
-xs
-sm
-md
-lg
-xl
-(1 - 12)
Examples of class names: col-push-xs-3, col-sm-pull-5.
Media queries prefixes
| Prefix | Value | CSS media query |
|---|---|---|
| xs | 200px | |
| sm | 769px | |
| md | 1025px | |
| lg | 1365px | |
| xl | 1520px | |