Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
img
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

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

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.