[Question] Breakpoints

[DanielHitchen]

Hi, Love this framework by the way, great alternative to TwitterBS & Foundation, without the bloat :)

Just one question, the minimum breakpoint for the grid is set to Up to 48em (768px at 16px/1em) using col-xs-XX for example, is there any chance we could get 1 or 2 more BPs before this for smaller devices?

For example, for devices smaller than 768px in width i.e smaller tablets or landscape smartphones (iPhone5 for example), I may want to keep a 2 column layout and only go to a single column layout when the device width is 320px, whereas at the moment, it's a single column layout for ALL devices up to 768px.

Maybe set another BP at Up to 37.5em (600px at 16px/1em) to catch landscape iPhones & vertical small tablets, and again at Up to 30em (480px at 16px/1em) to catch all mobile devices – maybe using classes of col-xxs-XX and col-mob-XX?

I hope that all makes sense. Just feel that having a few extra options below 768px would be helpful :)

PS. If i've missed something in the docs that achieves the above, I apologise in advance.

[JimBobSquarePants]

Hi Daniel,

Thanks for the kind words. It's always nice to know that someone appreciates your work :)

I have thought about adding another breakpoint but each one generates quite a lot of CSS (most of the CSS is grid based) and I've tried to limit it to things I've found that I've needed so that the framework can remain small.

Truth be told I've never actually found that I've needed a smaller breakpoint that the lowest one and I've been building websites using the framework for nearly two years now. The example you've set in your question hasn't come up as a design issue (maybe I'm just lucky).

You could in theory add a new level in the Sass files and build a custom version but that would take a lot of work, building and testing. There would be a few tweaks required in the JavaScript to ensure that grid detection mechanisms are maintained also.

I think if it was ever to happen it would do so in v4 so we can ensure that any compatibility issues that were raised could be dealt with appropriately.

I'll close this for now but keep it in mind when I move on to building v4 of the framework.

[DanielHitchen]

@JimBobSquarePants thanks for your response.

Yeah, I thought it might be a long shot, as when I had a look at the code etc & saw what would be needed to do this, I was a bit put off myself ;)

No problems - I've managed to achieve what I needed by tweaking the BPs in the _variables.scss file a little, so I've got my required result. Maybe this won't be needed after all, as by doing the above and changing the BPs a little, I'm happy.

You just feel though that with soooo many devices around now, there might have to be one or two more BPs added for a little more flexibility in future versions, but for the time being, it works great as is.

Keep up the good work :)

[JimBobSquarePants]

Thanks. :) I'm glad you found a workaround just now.

I think for v4 I might be able to trim the fat a little as I will probably drop IE8 support for that so hopefully I can add an xxs and xl breakpoint then.

[DanielHitchen]

Yeah sounds good. It's just because there are so many devices below 768px that to just have one BP covering them is a bit restricting - but as I've mentioned, by tweaking the BPs in the _variables.scss file I've managed to work around my issue.

I think the rest of the BPs are spot on, just need that xxs or mob BP for smaller devices - I think 5 breakpoints then should be enough for anybody to work with how they see fit :)

[tekbasse]

I use ResponsiveBP for general apps. I really apreciate the coding approach and attention to accessibility.

@DanielHitchen There is a similar project with more breakpoint options you might look at: https://github.com/dfcb/extra-strength-responsive-grids It uses a different approach with more breakpoint options, though perhaps not as accessible. Alas, sometimes one has to compromise when targeting apps for small devices. HTH cheers.

[DanielHitchen]

@tekbasse Overall I'm very happy with the responsiveness that this framework offers, just one or two more BP below 768px would be a nice addition. With so many devices these days, one BP to cover them all is a little restricting, but as I've mentioned above, by tweaking the BP widths in the _variables.scss file I've managed to achieve what I wanted.

It's not an urgent request by any means, but giving the developer an little extra flexibility can't be a bad thing, then it would be up to the developer to decide what they use & how - it's just nice to have options :)

[JimBobSquarePants]

Thanks @tekbasse.

@DanielHitchen I've reopened the issue so I don't forget this and assigned it to the v4.0.0 milestone.

I think going with one smaller grid would be the correct idea but I would probably re-assign that as xs and bump everything along one breakpoint.

As far as I can see there's no way I can add a new breakpoint without risking breaking someones site on upgrade so I'm going to have to wait until the major version. If either of you can figure out a better way I'm all ears though. 👂

[DanielHitchen]

You could just assign it as xxs and/or mob (as that's what the BP would in essence be for, small/mobile devices), that way it wouldn't affect anything else?

I tend to use a BP @ 500px for mobiles (could be col-mob-XX), and another at around 600px - 640px which catches horizontal smartphones & vertical small tablets (could be col-xxs-XX), then the next would be your xs BP which is 768px anyway.

[JimBobSquarePants]

Unfortunately not. The base visibility helpers and grid breakpoints go from 0 to 48em which means that any grid set with the xs property e.g

<div class="col-xs-6">...</div>

Will be rendered at 50% of the viewport width from the ground up. If I then put another smaller breakpoint in at a smaller width the xs grid range would have to start at 1px greater than that cut off. This would break any existing layouts that depend on the width being 50% from the ground up. You would have to augment your markup in order to ensure behaviour is consistent. e.g

<div class="col-xxs-6 col-xs-6">...</div>

[JimBobSquarePants]

Fixed with v4. We now have an extra breakpoint at 37.5em. http://responsivebp.com/css/grid/#mediaqueries