Foundation-sites: Responsive gutters in Foundation 7

Created on 16 Aug 2017  路  8Comments  路  Source: foundation/foundation-sites

I'd like to generate some discussion around the responsive gutters feature within Foundation which I believe was added in version 6.1.

For those that don't know what this is, it enables you to set a different gutter size for each breakpoint, eg:

$grid-margin-gutters: (
  small: 20px,
  medium: 30px
);

This works fine when using just padding for gutters as it doesn't add much code bloat. However when using margin gutters it adds a ton of code bloat, and a hugely complicated mixin implementation in order to be able to generate the right classes.

I would really like to see responsive gutters removed for version 7. I think the benefit they give is tiny compared to the impact on the code base. I also have a suspicion that not a lot of people actually use them and leave them responsive by default (I've been guilty of doing that too!) even if they don't need them, but I could be wrong. If we removed it the grid mixin API could be hugely improved and simplified.

I'd really love to hear everyone's opinion on this feature: if you use them or not, your use case if you do use it, would you miss it if it was removed etc.

Foundation 7 Grid XY Grid discussion feedback wanted

Most helpful comment

If anything, we should examine options to remove padding gutters which are, essentialy, a hack/workaround for grid gutters from the days of float based grids and we should be more inclined to use margin for gutters, because margin is a gutter (in the first class citizen kind of way).

All 8 comments

I dont use it and I really agree with you!

I use them. It's really useful to have smaller gutters on mobile screens.

I don't use margin for gutters - so better remove them if you want to remove something.

Or just make it padding only function.

I use them too. Pretty useful to be honest when dealing with lots of information on small devices.
But the padding only option that @Renkas suggested seems completely fine to me.

If anything, we should examine options to remove padding gutters which are, essentialy, a hack/workaround for grid gutters from the days of float based grids and we should be more inclined to use margin for gutters, because margin is a gutter (in the first class citizen kind of way).

I use them pretty much everytime and I've been thanksful for the switch from padding to margin in the XY Grid. Also having the possibility to remove any padding/margins with args is really useful.

I think in most cases we will have to write it manually and adding a ton of code ourselves isn't any better. Foundation gets it right by removing all these redundant tasks from our shoulders.

However, I think we can simplify some of these mixins.

I use them a lot, having smaller gaps for smaller screens is a good thing.

I throw in it my 2 cents: I appreciate also susy's system: percentage gutters (default: 1/4 of the grid unit if I remember)

V7 requests are being closed for the time being. We have them labeled so we can readdress them in the future.

Was this page helpful?
0 / 5 - 0 ratings