griddy

1.1.2 • Public • Published

Griddy

A Stylus plugin that makes it easy to create custom, simple, responsive grids

Examples

Plugin setup

Install:

npm install griddy

Use with command-line stylus client:

stylus src -o css -u griddy

Use as a script

var stylus = require('stylus'),
    griddy = require('griddy')

function compile (src) {
    return stylus(src).set('filename', path).use(griddy());
}

Simple setup

You can also just add griddy to your stylus files directory and import it

@import './griddy'

Usage

Apply the mixin grid-system to any selector to define a grid system.

  • grid-system(cols = 12, gutter = 20px, child = '.col', offset = '.off', all-columns = true, separate = '-', breakpoint = 400px)

Parameters

  • cols - Number of total columns
  • gutter - Horizontal space between columns and vertical space between rows
  • child - Child selector suffix (Or full selector, if all-columns is set to false)
  • offset - Offset selector suffix
  • all-columns - Generate selectors for all numbers of spans, using [selector][separate][spans] convention
  • separate - String separating child prefix from spans count, used when all-columns is set to true
  • breakpoint - Max-size for responsive media query (Columns will break to full-width under specified size)

Example

Stylus

@import 'griddy'

.row
    grid-system(12, 20px, '.col', '.off')

HTML

<div class="row">
    <div class="col-3">
 
        <!-- 3 columns -->
 
    </div>
    <div class="col-8 off-1">
 
        <!-- 8 columns offset by 1 -->
 
    </div>
</div>

Custom class

Stylus

@import 'griddy'

.split-3
    grid-system(3, 10px, '.thirds', true, ' thirds-')

HTML

<div class="split-3">
    <div class="thirds thirds-1"> [...] </div>
    <div class="thirds thirds-1"> [...] </div>
    <div class="thirds thirds-1"> [...] </div>
</div>

Licence

Copyright (c) 2014 Tancredi Trugenberger. - Released under the MIT license

Readme

Keywords

none

Package Sidebar

Install

npm i griddy

Weekly Downloads

0

Version

1.1.2

License

BSD-2-Clause

Unpacked Size

21.7 kB

Total Files

12

Last publish

Collaborators

  • tancredi