Responsive Breakpoints

[InitArt]

I’m currently working on a framework using {LESS}, the goal is to supply all those basics you always need. Therefore it should be as flexible as possible.

Now I came to responsive breakpoints, one thing for sure, I don’t want to use device dependent breakpoints. So I ended up using 10 breakpoints (may require fine-tuning):

@breakpoint-1: 30em;
@breakpoint-2: 40em;
@breakpoint-3: 50em;
@breakpoint-4: 60em;
@breakpoint-5: 70em;
@breakpoint-6: 80em;
@breakpoint-7: 90em;
@breakpoint-8: 100em;
@breakpoint-9: 110em;
@breakpoint-10: 120em;

The question is, is it a good practice to use that many breakpoints? Should I use rem with fallbacks?
A compiled example can be found on codepen (http://codepen.io/InitArt/pen/ECBci) where I’ve used breakpoint 1 to 4.

[Paulie_D]

Breakpoints (IMO) should only be used when required by the design.

Are you actually using all those mix-ins? If not…what’s the point?

[Senff]

> the goal is to supply all those basics you always need. Therefore it should be as flexible as possible.

Not trying to be a smartass here, but hasn’t that been done before already? I’m personally not a big fan of this — frameworks that have everything (because you may need it sometimes) but end up having too much (because no project ever needs ALL those options).

Anyways, to get back to your question: sure if you want to give the option of 10 breakpoints, but like @Paulie_D said, it should only be used when the design requires it. Some designs only need 2 breakpoints. Others need 7. If you want to have the option to have a maximum of 10….sure, go for it.

[InitArt]

Thank you, for those fast answers. I think I’m going to stick with 30, 45 and 60em, if needed I could still change those values or add another one.

> Not trying to be a smartass here, but hasn’t that been done before already? I’m personally not a big fan of this — frameworks that have everything (because you may need it sometimes) but end up having too much (because no project ever needs ALL those options).

Sure there are many frameworks, but I couldn’t find one based on lesscss wich suits my needs. The idea is a modular (even mixins are modular) framework, where you just pick whatever you need.

[Kitty Giraudel]

I think you’re good to go with 1 to 4 breakpoints in most situations. Going any further will be extra work that probably won’t worth it.

[Author]

Posts