Gridifier is a tool to build a responsive grid framework for modern websites.
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.
css
img
js
.editorconfig
.gitignore
Gruntfile.coffee
LICENSE
README.md
UNLICENSE
favicon.ico
humans.txt
index.html
package.json
robots.txt
rsync-exclude.txt

README.md

Gridifier

Gridifier is a tool to build a responsive grid framework for modern websites.

I use it on just about every website I create. For me it’s an alternative to monolithic frameworks like Bootstrap and Foundation.


Taught at Algonquin Graphic Design

These grid systems are taught as part of the Algonquin College Graphic Design program.

This tool is introduced to the students after they learn the “long, hard, stupid way.”


Common Problems

There are a few problems people can run into and here’s the common solutions.

Mashy text

Where the letters of your text are all mashed together and overlapping.

Solution

This is caused by putting content inside .grid and not inside .unit—the only direct descendants of .grid should be .unit.

Bad

<div class="grid">
  <h2>Text!</h2>
</div>

Good

<div class="grid">
  <div class="unit">
    <h2>Text!</h2>
  </div>
</div>

Custom font issues

Sometimes when using a custom webfont for the body copy it can wreak a little havoc on the grid system. Generally only happens on older browsers that don’t support flexbox.

This is documented on the Pure documentation, this pull request, & the Pure grid CSS file.

Solution

1. Define your custom font on html as usual:

html {
	font-family: "Custom Font", serif;
}

2. Define this default set font families on .grid:

.grid {
	⋮
	font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
}

3. Redefine your custom font on .unit:

.unit {
	⋮
	font-family: "Custom Font", serif;
}

License & copyright

© 2015 Thomas J Bradley

Gridifier is licensed under the MIT License.
Code generated by Gridifier is licensed under The Unlicense.
Some of the generated code is inspired by Pure CSS by Yahoo! Inc.
Some of the generated code is inspired by Foundation by Zurb.
Paper icon copyright Yazmin Alanis.