Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A responsive grid framework that supports automatic sizing and mixed fixed/ fluid layouts.
CSS JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
dist
gh-pages/Waffles
lib
.gitignore
LICENSE.txt
README.md
gulpfile.js
index.styl
package.json

README.md

waffles

Join the chat at https://gitter.im/the-simian/Waffles

A responsive grid framework that supports automatic sizing and mixed fixed/ fluid layouts.

Waffles, fundamentally is based on the idea of a unit of measurement, that scales every fluid and fixed element to a 'worldspace value'. If a measurement is not by natre, fluid, then it is probably scaled to this value. This value, defaulted to 40px can be overidden at any point by overriding the value $brick before including waffle sin your build pipeline.

Include waffles from the CDN

waffles.css CDN: //cdn.jsdelivr.net/waffles/1.0.1/waffles.min.css

Include waffles in your build

Including waffles in your pipeline is pretty straighforaward, and is like any other stylus plugin. Here is an example using gulp:


var gulp = require('gulp');
var stylus = require('gulp-stylus');
var autoprefixer = require('autoprefixer-stylus');
var nib = require('nib');
var waffles = require('waffles');

//showing some other popular stylus libraries, for the sake of example

var stylusConfig = {
  use: [
    nib(),
    waffles(), //include waffles so it might be @imported
    autoprefixer({
      browsers: ['ie 7', 'ie 8']
    })
  ]
};

var src = ['/allmystylus/**/*.styl'];

gulp
  .src(src)
  .pipe(stylus(stylusConfig))
  .pipe(gulp.dest('output.css'));

Then just use @import "waffles" in your actual stylus files.

It is recommended to use some sort of css reset in addition to waffles. If you're using something like nib, it comes with a css reset just call

global-reset()

in your stylus files after also including nib

Something went wrong with that request. Please try again.