Fork me on GitHub fork me on github

Baze Grid v2.0.2

Baze Grid is a responsive, flexible, percentage base grid system offering clean markup by utilizing both class and data attribute.

Features

  • 12 Columns (default).
  • 25px gutter size (default)
  • Configurable SCSS file
  • 3 Breakpoints
    • small, 0 - 639px
    • medium, 640px - 1023px
    • large, 1024px - beyond
  • Offset
  • No gutter grid

Install

You can get it via bower.

bower install baze-grid --save

or download the latest zip file then include the css file in head.

<link rel="stylesheet" href="path/to/baze-grid.css">

Examples

1
1
2
2
3
3
4
4
5
5
6
6

How to use

By default, all the columns are stacked (width 100%). To set the width, pass parameter into data-col attribute and to set the offset, pass parameter into data-offset attribute. both parameter for data-col and data-offset can be combination of these:

  • s[1-12]. Affect width and offset when screen width is from 0 - 639px.
  • m[1-12]. Affect width and offset when screen width is from 640px - 1023px.
  • l[1-12]. Affect width and offset when screen width is from 1024px - beyond.
<div class="bzg">
    <div class="bzg_c" data-col="[column-width]" data-offset="[column-offset]">
        ...
    </div>
    <div class="bzg_c" data-col="[column-width]" data-offset="[column-offset]">
        ...
    </div>
</div>

Examples

Basic grid

6
6
<div class="bzg">
    <div class="bzg_c" data-col="s6">
        ...
    </div>
    <div class="bzg_c" data-col="s6">
        ...
    </div>
</div>

Offset

3
3
<div class="bzg">
    <div class="bzg_c" data-col="s3">
        ...
    </div>
    <div class="bzg_c" data-col="s3" data-offset="s6">
        ...
    </div>
</div>

Responsive

small 12
medium 6
large 4
small 12
medium 6
large 8

*Resize browser to see in action.

<div class="bzg">
    <div class="bzg_c" data-col="s12, m6, l4">
        ...
    </div>
    <div class="bzg_c" data-col="s12, m6, l8">
        ...
    </div>
</div>
small 6
medium 3
large 4, large offset 2
small 6
medium 3, medium offset 6
large 4 
<div class="bzg">
    <div class="bzg_c" data-col="s6, m3, l4" data-offset="l2">
        ...
    </div>
    <div class="bzg_c" data-col="s6, m3, l4" data-offset="m6">
        ...
    </div>
</div>

Nested

6
4
8
6
<div class="bzg">
    <div class="bzg_c" data-col="s6">
        
        <div class="bzg">
            <div class="bzg_c" data-col="s4">
                ...
            </div>
            <div class="bzg_c" data-col="s8">
                ...
            </div>
        </div>

    </div>
    <div class="bzg_c" data-col="s6">
        ...
    </div>
</div>

No gutter

6
6
<div class="bzg bzg--no-gutter">
    <div class="bzg_c" data-col="s6">
        ...
    </div>
    <div class="bzg_c" data-col="s6">
        ...
    </div>
</div>

Browser support

Baze Grid has been tested and work awesomely in IE8 (with respondjs polyfill if you need responsive support) and other evergreen browsers.