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.
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.”
There are a few problems people can run into and here’s the common solutions.
Where the letters of your text are all mashed together and overlapping.
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>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.
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;
}© 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.