Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Individual @grid-gutter-width for different screen sizes (xs/sm/md/lg) #11564

Closed
kinergy opened this issue Nov 20, 2013 · 11 comments
Closed

Individual @grid-gutter-width for different screen sizes (xs/sm/md/lg) #11564

kinergy opened this issue Nov 20, 2013 · 11 comments

Comments

@kinergy
Copy link

kinergy commented Nov 20, 2013

It would be great if the gutter width could be configurable independently for the grid definitions in each of the screen sizes. We'd like to use a smaller value for col-xs-* but maintain the default value for the larger screens. Would you accept a pull request with the implementation?

Thanks!

@dongepulango
Copy link

+1

@mishingo
Copy link

mishingo commented Dec 5, 2013

That would be a great!

@zensimilia
Copy link

@media (min-width: @screen-sm-min) { @grid-gutter-width: 10px; }

@kinergy, whats wrong with this method?

@cvrebert
Copy link
Collaborator

cvrebert commented Dec 6, 2013

@zensimilia I don't think LESS works like that?

@mdo
Copy link
Member

mdo commented Dec 15, 2013

We'd probably have to rework a few things–I'm unsure if it'd be backward compatible. I'd check out a pull request though. Until v4 though I don't think we'll rework it.

@mdo mdo closed this as completed Dec 15, 2013
@freddyboucher
Copy link

+1
We need that in our webapp!

tdhooper added a commit to lastfm/bootstrap that referenced this issue Jul 1, 2014
Add new @grid-gutter-width-xx variables that are used to adjust the default
grid gutter at each breakpoint.

The old mixins can still be used, and the original fixed gutter can be used
by setting the @grid-gutter-width-xx variables to the same value.

- Add @grid-gutter-width-xs, @grid-gutter-width-sm, @grid-gutter-width-md, and
  @grid-gutter-width-lg variables

- Use the new gutter widths when calculating .container widths

- Modify the .make-grid-columns mixin to apply these new gutter widths at
  each breakpoint

- Create the .container-fixed--vary-gutter and .make-row--vary-gutter mixins,
  and use them to grenerate the default .container and .row

- Create the .make-xx-column--vary-gutter mixins
@tdhooper
Copy link

tdhooper commented Jul 1, 2014

@mdo, how does this approach look? lastfm@2bf0408

In order to not break existing grids during an update, the @grid-gutter-width-xx variables would need to be 30px for the release.

@mdo
Copy link
Member

mdo commented Jul 3, 2014

@tdhooper We'll be allowing custom gutters in v4 (maybe v3.3 if we end up going that route, but probably not). That approach is super interesting, but my hope is that we can do all this without adding additional mixins and by correcting a few other wrongs.

Also, cool to see Last.fm is using Bootstrap! I'd love to hear more about what you're using it for, and in particular your feedback on using it. Feel free to email me or open another issue.

@tdhooper
Copy link

tdhooper commented Jul 3, 2014

Okay, in that case we'll stick to using our hack until an update comes.

So far we've only touched the grid, one of the other issues we came up against is pretty well described by the first two images of this article http://www.smashingmagazine.com/2013/04/25/maintain-hierarchy-content-choreography/. It feels like solving this is outside Bootstrap's scope though.

@mdo
Copy link
Member

mdo commented Jul 3, 2014

@tdhooper Yeah, layout options are a bit tough. Without polyfills or custom JS, there's little we can do to support everything everyone without causing undo problems and more work for ourselves. Definitely something I'm keen to do in a couple years when this stuff is ready though :).

@purzlbaum
Copy link

+1

@twbs twbs locked and limited conversation to collaborators Jul 8, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

9 participants