Bootstrap Grid Flexbox
Plugins flexbox grid system for bootstrap 3.
Story Behind
Before that when I developing a website with Bootstrap sometimes I get crazy because the difference height of grid can destroying my layout, so I want to moving to use Flexbox because most modern browser now can support Flexbox (check here) .
I choose to style the grid not to overide Bootstrap grid but just for add on to Bootstrap or as Plugins. Why? Sometimes I still need bootstrap grid, so i chose to not replace bootstrap grid.
Quick start
Several quick start options are available:
- Download the latest release.
- Clone the repo:
git clone --recursive https://github.com/ngengs/bootstrap-grid-flexbox.git
.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
bootstrap-grid-flexbox/
├── dist/
│ └── css/
│ ├── bootstrap-grid-flexbox.css
│ └── bootstrap-grid-flexbox.min.css
├── less/
│ ├── bootstrap-grid-flexbox.less
│ ├── grid.less
│ ├── mixins.less
│ └── variables.less
└── sass/
├── bootstrap-grid-flexbox.scss
├── _grid.scss
├── _mixins.scss
└── _variables.scss
The dist directory is for compiled css, and you can use that, but if you want build you can use file in less directory and compile the bootstrap-grid-flexbox.less or sass directory and compile the bootstrap-grid-flexbox.scss
Bugs and feature requests
Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.
Documentation
The documentation is not ready yet.
Usage
Add the css after the Bootstrap css
<head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Grid Flexbox -->
<link href="css/bootstrap-grid-flexbox.min.css" rel="stylesheet">
</head>
After that basically you just can use the class for row and col.
Is this just for bootstrap? Hell No. You can still using the grid without bootstrap. But you still need create your own container
Basically using the grid and row is the same as bootstrap at here, you can use offset
pull
push
and responsive grid like xs
sm
md
lg
at here.
But I replace row
and col
with my class preference to avoid overide bootstrap row and grid.
To use you just replace the .row
with .row-flex
and .col-
with .col-flex-
Example:
<div class="row-flex">
<div class="col-flex-md-12">.col-flex-md-12</div>
<div class="col-flex-md-2">.col-flex-md-2</div>
<div class="col-flex-md-10">.col-flex-md-10</div>
<div class="col-flex-md-4">col-flex-md-4</div>
<div class="col-flex-md-8">.col-flex-md-8</div>
<div class="col-flex-md-6">.col-flex-md-6</div>
<div class="col-flex-md-6">.col-flex-md-6</div>
</div>
Offset:
<div class="row-flex">
<div class="col-flex-md-2 col-flex-md-offset-10">.col-flex-md-2</div>
<div class="col-flex-md-4 col-flex-md-offset-8">.col-flex-md-4</div>
<div class="col-flex-md-6 col-flex-md-offset-6">.col-flex-md-6</div>
<div class="col-flex-md-8 col-flex-md-offset-4">.col-flex-md-8</div>
<div class="col-flex-md-10 col-flex-md-offset-2">.col-flex-md-10</div>
<div class="col-flex-md-12 col-flex-md-offset-0">.col-flex-md-12</div>
</div>
Nested:
<div class="row-flex">
<div class="col-flex-md-12"> .col-flex-md-12
<div class="row-flex">
<div class="col-flex-md-2">.col-flex-md-2</div>
<div class="col-flex-md-10"> .col-flex-md-10
<div class="row-flex">
<div class="col-flex-md-6">.col-flex-md-6</div>
<div class="col-flex-md-6">.col-flex-md-6</div>
</div>
</div>
</div>
</div>
</div>
Improvement
Using flexbox we can improve the grid system.
Aligment Grid
I add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column. And it be like this.
.start-
<div class="row-flex start-xs">
<div class="col-flex-xs-6">
.col-flex-xs-6
</div>
</div>
.center-
<div class="row-flex center-xs">
<div class="col-flex-xs-6">
.col-flex-xs-6
</div>
</div>
.end-
<div class="row-flex end-xs">
<div class="col-flex-xs-6">
.col-flex-xs-6
</div>
</div>
.top-
<div class="row-flex top-xs">
<div class="col-flex-xs-6">
.col-flex-xs-6<br>.col-flex-xs-6
</div>
<div class="col-flex-xs-6">
.col-flex-xs-6
</div>
</div>
.middle-
<div class="row-flex middle-xs">
<div class="col-flex-xs-6">
.col-flex-xs-6<br>.col-flex-xs-6
</div>
<div class="col-flex-xs-6">
.col-flex-xs-6
</div>
</div>
.bottom-
<div class="row-flex bottom-xs">
<div class="col-flex-xs-6">
.col-flex-xs-6<br>.col-flex-xs-6
</div>
<div class="col-flex-xs-6">
.col-flex-xs-6
</div>
</div>
As you see you can add xs
md
lg
to the aligment
Reverse Grid
You can reverse the order of grid
.reverse
<div class="row-flex reverse">
<div class="col-flex-xs-4">
1
</div>
<div class="col-flex-xs-4">
2
</div>
<div class="col-flex-xs-4">
3
</div>
</div>
And because the reverse the grid order will be 3 - 2 - 1. The .reverse
class must use with the .row-flex
.
BUILD
I use Grunt to build
-
Install Node.js download
-
Install Gruntjs
npm install -g grunt-cli
-
Install package
npm install
-
Run build process
grunt dist
Inspired
Creators
Rizky Kharisma
License
Code release under the MIT license