

Flow: A Responsive Grid System & Generator - isaacgc
http://flow.gs

======
isaacgc
I recently built this grid generator. The original iteration used percent
based margins to create the gutters. However, I decided that I preferred fixed
width gutters. Originally I used padding to set the gutter size. However, if
the grid is to extend to the edge of its container, the first column element
needs padding:0. This caused it to be slightly larger than the other columns
as box-sizing needed to be set to border-box. So I opted to build the gutters
using an invisible border-left to create the gutters. Then the grid container
gets a negative left margin equal to the gutter size allowing the first and
last columns to be flush with the edge of the container while remaining
equally sized. This seems to have solved all my problems, however the system
needs some cross-browser testing. Any feedback and bug reports will be very
helpful for refining the code.

------
lucisferre
Really neat demo, I like it. However, after switching to Bourbon Neat
([http://neat.bourbon.io](http://neat.bourbon.io)) and also checking out Susy
([http://susy.oddbird.net](http://susy.oddbird.net)) I don't think I'd ever
switch back to a class based grid. Even the "semantic" grid options of
Bootstrap 3 and Foundation 4 are naive by comparison.

The pre-processor mixins in Neat and Susy actually have the flexibility to
create complex layouts. Nothing else really seems to be a good substitute.

~~~
isaacgc
I've been looking at some of the SASS grid systems and I agree that they seem
significantly more powerful than the humble CSS grid. Perhaps that will be an
evolution (or add-on) of Flow down the road.

