mozilla / makerstrap

A bootstrap extension for Webmaker
http://mozilla.github.io/makerstrap/demo
21 stars 22 forks source link

Investigate breakpoints #48

Closed gvn closed 10 years ago

gvn commented 10 years ago

It seems like a breakpoint smaller than xs is needed. 320-ish layouts don't all look great at 600px for example. Maybe we need xxs or micro?

k88hudson commented 10 years ago

Yeah that would be great.

Let's add micro at 320px and equivalent classes, i.e.

.col-micro-1 through .col-micro-12 .col-micro-offset-1 through .col-micro-offset-12

k88hudson commented 10 years ago

@gvn can you review?

gvn commented 10 years ago

Sure thing.

gvn commented 10 years ago

Ok, looking at this and reconsidering 320 since it's pretty iPhone-centric.

@k88hudson what do you think about going up to 384px (half of next breakpoint, 768px).

Alternatively, could we make this value a variable that people could set based on their project needs?

gvn commented 10 years ago

Actually, sorry, doing more research and it looks like you already can override breakpoint values, which probably makes this patch unnecessary. That is, unless we want to provide a 5th breakpoint, in which case we should set the width to be a variable @screen-micro.

See: http://stackoverflow.com/questions/19592968/bootstrap-3-breakpoints-and-media-queries

Apologies, should have dug into this more before filing. :flushed: