Hoggle

An inline-block based grid system. Still very much in its early stages.

This is an inline-block based grid system built on Sass. There are no other requirements. Whitespace may be an issue with the inline-block columns. If you’re using HAML, you can clear out the whitespace with a > at the end of tags. If you’re using .erb or straight html, you can prevent whitespace by placing the opening and closing tags of your .col containers against each other, like </div><div class="col">.

Since this is an inline-block grid, it’s easy to vertically align content. Yay!

Another grid? Why?

I’ve used a lot of grid systems - Bootstrap, Foundation, Bourbon’s Neat - and all of them are great, but also too much. I wanted a reusable grid that was simple, lightweight, unobtrusive, and just a grid. I wanted responsive flexibility that I didn’t get with other grid systems, as well as the ability to easily vertically center elements. Most other grid systems are float based. Hoggle is inline-block based.

Columns

Columns are wrapped in a .row class. Rows can be wrapped in a .container class to limit and center the width of the columns to the maximum column width for the screen size.

Columns are defined with the class .col and any combination of classes determining the width at different screen sizes. By default, these are -phone-*, -tablet-*, -desktop-*, and -bigscreen-*. This means the column will fill the column space from the specified screen size up. Different column sizes can be set for different screen sizes.

The default breakpoints are set as follows:

'phone'    : 320px,
'tablet'   : 768px,
'desktop'  : 1024px,
'bigscreen': 1200px

The .col width is determined by the suffix of the class names. The default available sizes are halves, thirds, quarters, and eighths.

NOTE: Classes that aren’t a ‘thing’ are prepended with a - because they’re modifiers. Think terminal flags.

col -all-1of1

col -all-1of2

col -all-1of2

col -all-1of3

col -all-1of3

col -all-1of3

col -all-1of4

col -all-1of4

col -all-1of4

col -all-1of4

col -all-1of8

col -all-1of8

col -all-1of8

col -all-1of8

col -all-1of8

col -all-1of8

col -all-1of8

col -all-1of8

Responsive Columns

Sometimes you want different columns at different viewport sizes. Stack the classes. The smallest size will go to one column unless an -phone-* class is set.

-desktop-1of8

-tablet-1of4

-phone-1of2

-desktop-1of8

-tablet-1of4

-phone-1of2

-desktop-1of8

-tablet-1of4

-phone-1of2

-desktop-1of8

-tablet-1of4

-phone-1of2

-desktop-1of8

-tablet-1of4

-phone-1of2

-desktop-1of8

-tablet-1of4

-phone-1of2

-desktop-1of8

-tablet-1of4

-phone-1of2

-desktop-1of8

-tablet-1of4

-phone-1of2

Offsets

Similar to responsive grid classes, there are also responsive offset classes.

-all-offset-1of2

-all-offset-1of3

-all-offset-1of4

-all-offset-1of8

Vertical Centering

Vertically Centered Content

Vertically center content with -m.

Vertical centering works because the columns are set to inline-block. This tends to be problematic because of whitespace that gets created between tags when the page is rendered. If you’re using HAML, you can easily eliminate whitespace by placeing a > at the end of the .row and column tags. If you’re writing plain html, a workaround is to place the opening and closing tags together, like </div><div>.

Content can be aligned to the bottom by using -b as well.

Swapping Columns

Swapped Columns

Swap column layout with -swap. The order will stack correctly at phone sizes.

Padding & Margin Helpers

Padding and margin can be added with classes that are multiples of $base up to 6, which by default are 6px. For example, -p-3 would result in 18px of padding on all four sides. There are separate classes for direction as well. For top and bottom, -pv-*, and for left and right, -ph-*. Add padding to just one side using -pt-*, -pr-*, -pb-*, and -pl-*.

-p-3
-pv-3
-ph-3
-pt-3
-pr-3
-pb-3
-pl-3

Responsive Padding & Margin Helpers

Often there’s a need for changing margin and padding for different screen sizes. The margin and padding classes can also be set with screen size prefixes, just like the column widths. For example, .phone-mb-3 will only add 18px of margin when the columns are stacked on a phone.

TODO: These docs are incomplete so I apologize. This is as far as I’ve gotten.