Skip to content
Whatever Grid System
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
sassdoc
.gitignore
Gruntfile.js
README.md
_wgs.scss
bower.json
demo.css
demo.css.map
demo.php
demo.scss
package.json

README.md

Whatever Grid System (WGS)

####WGS is a library allowing the generating of a set of OOCSS classes. Theses classes are heavily oriented toward the creation responsive webpage structures.

This library est highly customisable : gutters, widths, spaces, breakpoint names, mobile first.

It contains :

  • grid classes, with ratio and fixed widths
  • RTL support
  • grid gutter classes, with an option for distinct vertical/horizontal rythms
  • spacing classes
  • visibility classes

Thoses classes follow the BEM convention, augmented with a new paradigm : the "@breakpoint" sufix.

This project fully OOCSS :

Demo

https://jsfiddle.net/6x1th0n1/4/embedded/result/

Prerequisites

  • sass > 3.4 or libsass > ??? (find out)

Installation

  • git : git clone https://github.com/webedia-udg/wgs
  • bower : bower install webedia-udg/wgs

Usage

// your-file.scss

// Import the library
@import "wgs";

// Setup and write classes
@include wgsSetup(
    $breakpoints : (
        tablet     : 480px,
        big-tablet : 660px,
        desk       : 990px
    ),
    $gutters : 12px 16px 18px 22px,
    $fixedWidths : 200px 300px,
    $namespace: false
);
<!-- template.html -->
<div class="grid">
    <div class="1/2@big-tablet 1/3@desk"></div>
    <div class="1/2@big-tablet 1/3@desk"></div>
    <div class="1/3@desk"></div>
</div>
<div class="grid grid--fixed@desk grid--12px grid--22px@desk">
    <div class="1/2@tablet 300px@desk"></div>
    <div class="1/2@tablet 1/1@desk"></div>
</div>
<div class="padding-top--12px padding-top--22px@desk"></div>

Classes naming

[namespace]class[__element][--modifier][@breakpoint]

Vocabulary

.grid[@breakpointName] makes an element become a grid, optionnaly starting at a breakpoint. breakpointName depends of the setup. Its children become display: inline-block.

Ex :

.grid           // Always a grid
.u-grid         // Always a grid ('u-' namespace)
.grid@foo       // Grid behaviour from "foo" breakpoint

.[1-12]/[1-12][@breakpoint] represents a width. Works inside and outside a grid. breakpointName depends of the setup.

Ex:

.1/1
.1/1@foo
.1/6@bar
.u-1/6@bar // '-u' namespace
.12/12

[namespace]padding[-(top|right|bottom|left|hori|vert)]--[XX][@breakpoint] adds a padding on top/right/bottom/left of an element. XX is one the values defined in $gutters setup parameter.

Ex :

.padding--42           // Adds a 42px padding around the element
.padding-top--42       // Adds a 42px padding-top on the element
.padding-left--42@foo   // Adds a 42px padding-left on the element, starting at "foo" breakpoint
.padding-hori--42      // Adds a 42px horizontal padding (right + left)
.padding-hori--42@foo  // Adds a 42px horizontal padding (right + left)), starting at "foo" breakpoint
.padding-vert--0@foo   // Removes a vertical (top + bottom) by setting it a 0, starting at "foo" breakpoint

Setup

Including _wgs.scss in your sass project gives you access to two sass mixins:

wgsSetup()

/// @access public
/// @param {list} $fixedWidths [()] - fixed sizes to handle
/// @param {map} $breakpoints [()] - breakpoints
/// @param {list} $gutters [()] - gutters to handle
/// @param {boolean} $mobileFirst [()] - mobile first ? (or desktop first)
/// @param {string} $namespace [false] - namespace used by wgs
/// @example
///   @include wgsSetup(
///       $breakpoints : (
///           tablet     : 480px,
///           big-tablet : 660px,
///           desk       : 990px
///       ),
///       $gutters : 12px 16px 18px 22px,
///       $fixedWidths : 200px 300px
///   );
@mixin wgsSetup(
    $breakpoints  : (),
    $gutters      : (),
    $fixedWidths  : (),
    $mobileFirst  : true,
    $namespace    : false
){ /*...*/ }

mq()

/// Media Query mixin
/// 
/// @access public
/// @param {string} $from [false] - Apply rules from this breakpoint name
/// @param {string} $until [false] - Apply rules until this breakpoint name
/// @param {string} $and [false] - Additional media query parameters
/// @example
///   @include mq(tablet){ color: red }; // Results depends of the mobile first approach
///   @include mq($from: tablet){ color: red };
///   @include mq($until: desktop){ color: red };
/// 
@mixin mq(
    $from: false,
    $until: false,
    $and: false
) { /*...*/ }

Roadmap

  • use atomic css for spacing classes
  • update documentation

Tribute

This project was heavily inspired by Harry Roberts grid system for the grid part, and sass-mq for the modulable mq() mixin.

You can’t perform that action at this time.