The best grid you will ever use.
CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
_align.scss
_breakpoint.scss
_bullgrid.scss

README.md

bullgrid

Stable Version: 1.0 Development Version: 1.0

The best grid you will ever use. Standalone, modified version of Harry Robert's inuit.css Grids.

Installation

You can install bullgrid by cloning the latest version from Github ( master or development) or by installing it via bower. The bower version is always the latest tagged version.

$ bower install bullgrid --save

Usage

Include the Grid

Import the grid into your Sass (SCSS) Project as you'd do with any other file.

@import "vendor/bullgrid/_bullgrid.scss";

To gain the benefit of using the included Breakpoint Mixin everywhere, include it before any other file. The default breakpoint Mixin is this one by Wes Ruvalcaba.

@import "vendor/bullgrid/_breakpoint.scss";
// include other files here

Inside _breakpoint.scss you can modify the breakpoints and their names.

You can, however, switch to another breakpoint mixin as you like. To set up the grid using your own breakpoint mixin include it into the file. Then call the grid-setup() function with your own breakpoint mixin - or leave it out if you don't want to use breakpoints at all.

With the default _breakpoint.scss it is adviced to use the second parameter, and up|and down when creating the grid, e.g.

@include grid-setup('large', 'and down');

This way the breakpoints smoothly transition into each other, which is in most cases the behavior one wants.

grid-setup

The grid-setup function creates the markup for all grids. You can pass in a namespace, usually the breakpoint name (e.g. large, huge, etc.) and it will render the classes for you. The grid-setup() function must be called once without arguments and without a media query to generate the default markup (e.g. .one-half). Then it can be called using the breakpoint mixin.

// use the breakpoint mixin to create
// a media query, it's content will be the
// classes generated by grid-setup()
@include breakpoint(large) {
  // use the function and specify 
  // a name for this viewport-based
  // grid setup
  grid-setup('desktop-');
}
// will render this grid markup
@media all and (max-width: 90em) {
  .desktop-one-half {}
  .desktop-one-sixth {} 
}

Using the Grid

Basic Markup

<div class="gw">
  <div class="g one-half">
    I'm one half!
  </div>
  <div class="g one-half">
    I'm another half!
  </div>
</div>

You can see an example of the Grid in use here on CodePen.

More examples can be found in the example section.

<div class="gw">

  <div class="g one-third small-one-whole">
     <p>Content</p>
  </div>

  <div class="g two-thirds small-one-whole">
    <p>Content</p>
  </div>

  <hr>

  <div class="g one-half">
    <p>One half grid</p>
  </div>

  <div class="g one-quarter">
    <p>One quarter grid</p>
  </div>

  <div class="g one-quarter">
    <p>One quarter grid</p>
  </div>

</div>

Examples

Nesting Grids.

In this demo we showcase some basic nesting of grids inside grids (.gw) and childs inside childs (.g). See the demo on CodePen

Real-world Example: Product Grid

In this basic demo we showcase a grid of 3x2 elements that represent a product grid. See the demo on CodePen