3 ms·
Flow: A Responsive Grid System & Generator
- lucisferre 13y agoReally 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 13y agoI'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.
- isaacgc 13y agoI 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.