Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomasjbradley/gridifier
Gridifier is a tool to build a responsive grid framework for modern websites.
https://github.com/thomasjbradley/gridifier
Last synced: 22 days ago
JSON representation
Gridifier is a tool to build a responsive grid framework for modern websites.
- Host: GitHub
- URL: https://github.com/thomasjbradley/gridifier
- Owner: thomasjbradley
- License: mit
- Created: 2014-01-21T23:13:19.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-09-18T15:19:00.000Z (about 7 years ago)
- Last Synced: 2024-04-14T22:12:05.156Z (7 months ago)
- Language: HTML
- Homepage: http://gridifier.web-dev.tools
- Size: 156 KB
- Stars: 9
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gridifier
[Gridifier](http://gridifer.web-dev.tools) 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](http://algonquindesign.ca) program.
This tool is introduced to the students after they learn the “long, hard, stupid way.”
- [**☛ Grid system tutorials & videos**](https://learn-the-web.algonquindesign.ca/topics/grids/)
- [**☛ Gridifier cheat sheet**](https://learn-the-web.algonquindesign.ca/topics/gridifier-cheat-sheet/)
---
## 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**
```html
Text!
```
**Good**
```html
Text!
```
### 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](http://purecss.io/grids/#using-grids-with-custom-fonts), this [pull request](https://github.com/yui/pure/issues/41/), & the [Pure grid CSS file](https://github.com/yui/pure/blob/master/src/grids/css/grids-core.css).
#### Solution
**1. Define your custom font on `html` as usual:**
```css
html {
font-family: "Custom Font", serif;
}
```
**2. Define this default set font families on `.grid`:**
```css
.grid {
⋮
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
}
```
**3. Redefine your custom font on `.unit`:**
```css
.unit {
⋮
font-family: "Custom Font", serif;
}
```
---
## License & copyright
© 2015 Thomas J Bradley
Gridifier is licensed under the [MIT License](LICENSE).
Code generated by Gridifier is licensed under [The Unlicense](UNLICENSE).
Some of the generated code is inspired by [Pure CSS by Yahoo! Inc.](http://purecss.io/)
Some of the generated code is inspired by [Foundation by Zurb](http://foundation.zurb.com/).
[Paper icon](http://thenounproject.com/term/paper/29062/) copyright Yazmin Alanis.