gridbox v2.0.0
GridBox v2
A responsive, fluid 12-column css grid framework based on CSS Grid Layout module.
- Nestable
- Mobile First
- Semantic class names
What is CSS Grid Layout?
CSS Grid Layout is a two-dimensional layout system, optimized for customizable column and row layouts.
Getting Started
NPM
npm install --save gridbox
Import
// ES5
require('gridbox/gridbox.css')
// ES6
import "gridbox/gridbox.css"
Or you can use this CDN and add it in your head tag
<link rel="stylesheet" href="https://unpkg.com/gridbox/gridbox.css">
Guidelines
- Unlike Bootstrap's grid system, you do not need to include a row class.
- Nesting should be done by adding the sub-item class with the column class.
- .col-xs- should not be nested under a row that has a .col-xs- parent.
- Content should be placed within columns unless you are nesting child columns.
- Any child div of within the gridbox container will default to the full width of the parent.
- Gutters are set to 1rem (16px) as default and go up to 1.5rem (24px) on screens larger than 960px wide.
- Use for the header, for the main content body, and for the footer.
- Columns go from 1 to 12.
- Breakpoints:
- 0px - 599px (col-xs-*)
- 600px - 959px (col-sm-*)
- 960px - 1279px (col-md-*)
- 1280px - 1919px (col-lg-*)
- 1920px and above (col-xl-*)
Example
<div class="container">
<header>Header</header>
<main>
<div class="col-md-8 sub-items">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="col-md-4 sub-items">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
<div class="col-sm-12">col-sm-12</div>
</div>
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-9">col-xs-9</div>
</main>
<footer>Footer</footer>
</div>
Demo
Codepen demo for v2: https://codepen.io/epohsiereht/pen/aWPpZd
Differences between v1 and v2
Version 1 followed the same syntax as Bootstrap. After receiving feedback from Rachel Andrew, I realized that Grid Layout is about semantic class names rather than presentational class names. So I removed the row wrapper and opted to just add a sub-items class along with the column class to set up nested columns. 1. Removed the row class wrapper. 2. To nest, you just need to add .sub-items class along with the column class. 3. Added grids for \, \, and \ tags.
Browser Support
Browser | Compatibility | Version |
---|---|---|
Chrome | YES | 57+ |
FireFox | YES | 52+ |
Safari | YES | 10.1 |
Opera | YES | 44+ |
IE | PARTIAL | 11* |
Edge | PARTIAL | 14, 15 |
iOS Safari | YES | 10.3 |
Chrome for Android | YES | 57 |
Android Browser | NO | |
Opera Mobile | NO | |
Opera Mini | NO |
Note: Partial support for IE and Edge is based on an older specification of CSS Grid from 2011.
Future Features++
- Add offset column classes.
- Add vertical and horizontal alignment classes.
- Add design guidelines for typography, forms, buttons, etc.
- Add pre-built and reusable component layouts using CSS Grid and Flexbox Layout modules.