Breakpoint names
Closed this issue · 8 comments
@spleenteo @nebirhos @mzampetti Would defining breakpoints like this make more sense?
// define breakpoints
$breakpoint-widths: ('palm' 768px, 'lap' 1024px, 'desk' 1500px)
// 0px 768px 1024px 1500px Infinity
// | | | | |
// |<-- palm -->| | | |
// | |<-- lap ------>| | |
// | |<-- gte-lap ----------------------------------->|
// |<--------------- lte-lap -->| | |
// | | |<-- desk ------>| |
// | | |<-- gte-desk ------------------>|
// |<------------------------------- lte-desk -->| |
// | | | |<-- gt-desk -->|
// | | | | |
// 0px 768px 1024px 1500px Infinity
Why not leave only the gte breakpoints? Are the other media queries necessary?
// 0px 320px 768px 1024px 1500px Infinity
// | | | | | |
// | |<-- palm ---------------------------------------------------->|
// | | |<-- lap --------------------------------------->|
// | | | |<-- desk ---------------------->|
// | | | | |<-- hd-desk -->|
// | | | | | |
// 0px 320px 768px 1024px 1500px Infinity
@nebirhos no, they are not necessary: you could just use a mobile-first pattern where you continuously override rules for bigger screens. The question is: what is more readable? I find CSS written this way very hard to "parse": to know what rules will be applied ie. for the 1024px-1500px range, I have to diff all the rules specified in previous breakpoints.
Sometimes the changes are very small between breakpoints, so it's not a big deal.. other times the block changes drastically ie. from mobile to desktop, so it becomes a nightmare to read: nearly every rule specified in the mobile breakpoint needs to be manually reset.
In these cases I find it really useful to use something like lte-lap and gte-desk, so that you can split and isolate the rules in two non-overlapping breakpoints.
I totally agree with @stefanoverna. there are situations where you need to be extremely specific to some kind of devices/sizes and you don't want to go into the override drama onto further sizes.
@stefanoverna what I don't get is why gte-[something] and lte-[something] include [something] it self. For instance, gte-lap: I would start it from 1024px.
@spleenteo because
- "gte" means "greater than or equal to"
- "lte" means "less than or equal to"
😄
If you notice the breakpoints on my first post here, there's only one case where I'm using "gt" instead of "gte": the last breakpoint is called gt-desk.
there's always a good reason... shame on me!
i always use a 480px breakpoint, and "small-desk" can ben just "desk"
0 - 480px palm
480px - 720px tab
720px - 1024px lap
1024px - 1500px desk
Marco Zampetti
m.zampetti@cantierecreativo.net | skype marco.cantierecreativo
Cantiere Creativo
www.cantierecreativo.net | info@cantierecreativo.net | +39 055 2345008 | Via
Botticini 3 Firenze http://goo.gl/maps/r4PV1
2014-10-26 20:42 GMT+01:00 Matteo Papadopoulos notifications@github.com:
there's always a good reason... shame on me!
—
Reply to this email directly or view it on GitHub
#6 (comment).
@spleenteo @nebirhos @mzampetti here's my final proposal:
0px 480px 1024x 1500px ∞px
| | | | |
| |<-- lap -------------------------------------->|
| | |<-- desk --------------------->|
| | | |<-- wall ---->|
| | | | |
|<-- eq-palm -->| | | |
| |<-- eq-lap --->| | |
| | |<-- eq-desk --->| |
| | | | |
|<------------------ lte-lap -->| | |
|<---------------------------------- lte-desk -->| |
| | | | |
0px 480x 1024px 1500px ∞px
I agree with @nebirhos regarding the fact that mobile-first is 99% of the times the thing you want, so the shortest breakpoint names (ie lap, palm, etc) are given to mobile-first breakpoints. The exact range breakpoints are now in the form eq-<break-name>, while the "mobile-last" breakpoints are lte-<break-name>.
The thing to keep is mind is that both break names and ranges continue to be configurable for each project. The thing we're enforcing here is the way breakpoints are named.