Fork on GitHub

yet
another
feckin'
grid
system

What is it?

Like any grid system you've seen previously. I make no promises this will change your life, rock your world or any other such nonsense. It's just a very straightforward and frank grid system. It works the way it works. It might not be everyone's cup of tea.

There are 3 main grid widths:

  • Large - 1140px max width
  • Medium - 960px max width
  • Small - 800px max width

Pros of using this

  • There are many options to hopefully fit everyone's use cases.
  • I think it's straightforward and uncomplicated.
  • It's small in size (~28Kb) for the whole lot.
  • I've chunked it so that you can just include the grid you want.

Cons of using this

  • This isn't Bootstrap, it doesn't have the wealth of configuration at a breakpoint level
  • While it is relatively small in size, there's a good chance you won't use all of the options if you include everything, leading to unnecessary bloat in your CSS. If you use something like an automated CSS usage checker, it'll most probably indicate a high percentage of unused CSS. Sorry!

Version 1.x

Relies on the old tried and tested method of floats, clear, percentages.

View 1.x Reference Docs

Version 2.x

Introduces CSS Flexbox. Currently has very basic support for it. As I learn about Flexbox, and browser support improves, I will develop this version further.

View 2.x Reference Docs