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:
<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.
<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:
<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:
<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:
<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
<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)
<div class="grid grid--xs-start">
<div class="col-xs-4">left</div>
</div>
Center
<div class="grid grid--xs-center">
<div class="col-xs-4">center</div>
</div>
Right
<div class="grid grid--xs-end">
<div class="col-xs-4">end</div>
</div>
Top
test
test
test
test
<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
<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
<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
<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.
<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
<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
<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
<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)
<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)
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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)
<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)
<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)
<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 |
|