It would be pretty cool if we could do this someday in CSS. The best idea for it that I’ve come across is to define it in a <meta>
tag in the <head>
. That way (perhaps) CSS could use it and JS could use it. Like window.matchMedia(nameOfMyMediaQuery)
or @media (nameOfMyMediaQuery) { }
. But since we can’t, Sass has our back. Now the question is, how do we name them?
In Sass, the @mixin would look something like this:
@mixin breakpoint($point) {
@if $point == papa-bear {
@media (max-width: 1600px) { @content; }
}
@else if $point == mama-bear {
@media (max-width: 1250px) { @content; }
}
@else if $point == baby-bear {
@media (max-width: 650px) { @content; }
}
}
And you’d use it like:
.module {
width: 25%;
@include breakpoint(baby-bear) {
width: 100%;
}
}
Although in reality I prefer something like “bp” just because it’s shorter and you need to type it all the time. Which is why “+” would be so ideal instead of “@include”. But I digress. Or you could go Brandon Mathis style:
$name1: 320px;
$name2: 500px;
$name3: 600px;
$name4: 992px;
@mixin at-least($device-width) {
@media screen and (min-width: $device-width) {
@content
}
}
@mixin until($device-width) {
@media screen and (max-width: $device-width - 1) {
@content
}
}
The names should avoid actual numbers. The point here is to assign a name with abstracted meaning, so the numbers can change but the names stay the same. I’d avoid device names like “iPad” or whatever too, because that just sets up bad expectations and will date itself quickly.
Better are naming schemes that suggest relationships between the names themselves. Where one is obviously bigger or smaller than another. Of course this is assuming width queries, which are certainly the most common. But of course your media queries could be different or more complex, and the naming scheme should represent that.
Here’s some ideas:
baby-bear
mama-bear
papa-bear
straw-house
stick-house
brick-house
private
corporal
sergeant
captain
major
lieutenant
colonel
general
alpha
beta
gamma
delta
epsilon
very-small
small
medium
large
very-large
–
—
—
—-
——
>-< [---] <----->
seed
seedling
sprout
plant
pebble
stone
rock
boulder
pawn
knight
queen
king
bishop
archbishop
cardinal
pope
eddard
catelyn
robb
sansa
arya
bran
rickon
knife
dagger
scimitar
claidmore
A
B
C
D
E
From Vince Speelman
lil-bowow
eminem
jay-z
krs-one
rick-ross
From James Nowland
matryoshka-doll
the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-the-one-inside-matryoshka-doll
From Philip Brown
michael
jermaine
jackie
marlon
tito
From Rob Stinogle
gandalf-the-gray
gandalf-the-white
From Darby Brown
stewie
brian
chris
lois
peter
(I leave out Meg)
Got some other ideas?
I know they’re pushing the SCSS syntax now, but I’m working on a project with Django and Coffeescript and it seems more natural to us SASS in that scenario because the syntax is more similar to those other language I mentioned. The reason I bring that up is because I also realized that “@include” is just “+” in the SASS syntax, as you alluded to. As soon as I saw that, it made me wonder why we have to use “@include” with the SCSS syntax, but “+” works with SASS.
Presumably because SCSS is meant to be compatible with CSS, whereas SASS does not? But as it’s a superset, they /could/ add + as an alternative.
I’m happy you wrote a post about this, because I was going to after seeing how many views my shot on dribbble got the other day. It’s important in any aspect of design and/or development to take away any preconceived notions that could be limiting (i.e. the standard but decreasingly popular media-queries at 320px, 480px, 1024px just because of iDevices).
To further that notion, I’ve come accustom to throwing out the idea of pixels in general because they have a solid meaning. We should think in regards of proportions and ratios rather than anything concrete in all aspects when we are creating for the web; the process of creating for the web should be pure all the way through. I’ve seen conversations somewhere about converting px to ems with mixins, but in my opinion that’s still thinking like an old grandpa. It doesn’t matter if you convert your units, your still stuck in the mindset of absolute and perfect. I’m young though, so maybe it’s just me!
Thanks for the retweet by the way. Big fan of shoptalk and css-tricks!
charmander
charmeleon
charizard
nokia
palm
sonyericsson
iphone
droid
note
This reminds me of this great post about naming computers. (Don’t mind the design, it was clearly done by a sysadmin.)
Examples: Norse Gods, Muppets, Pokémon :P
What design? :) Aint no CSS in there!
I personally endorse that design. Just 5 requests…loads in a second ;)
I took inspiration from something on my desk…
short
tall
grande
venti
and my hidpi is called espresso
It just stuck and been using it for months.
Was just about to say the same thing. I use short, tall, grande, venti – and I don’t even like coffee! Did work at Starbucks for a while though, and have a brother who still does.
I do this as well, except I used tall as the smallest and trenta as the largest.
picard<br/>
riker<br/>
data<br/>
la-forge<br/>
worf
Hobbit<br/>
Dwarf<br/>
Man<br/>
Wizard<br/>
Elf<br/>
Valar
I call mine Step 1, Step 2, Step 3, etc.
Depending on the project, I may have as few as two, or as many as six steps.
I define them as variables in LESS…
…and employ them thusly:
I prefer “step” to “breakpoint”, because I’m usually referring to a width range, not a particular value.
I previously used shorthands like
@phone
and@desktop
but they weren’t entirely accurate – and calling them “Step X” seems to eliminate confusion when I’m conversing with my colleagues.I guess this makes me the boring one :-P
I just had a long talk on what to name media queries. We thought coffee sizes worked best:
Short, Tall, Grande, Venti, Trenta, Depth Charge.
If you need intermediary sizes after the fact, you can add “with room” or “no whip” It’s perfect!
I’ve always felt naming your breakpoints is quite a verbose thing when 320/444/732 is a much quicker way to do things w/ using Sass. I kind of understand a reason to use them. But unlike changing a $brand-color I don’t think there’d ever be a time to bump up a sites media query by a few EMs or pixels.
To that end I’ve written my own Sass mixin allowing for $variable breakpoints and the ability to pass a value (in px) that coverts of to EMs.
It’s in codepen here – http://codepen.io/sturobson/pen/keuyp
Great list! It’s nice to have a bit of fun mixed in with coding.
Here’s mine:
Initiate
Padawan
Knight
Master
DON’T JUDGE ME!
From handheld device to big desktop screen:
gollum
bilbo
gimly
aragorn
gandalf
balrog
Appart from that, eye-of-sauron should match retina devices.
I use the bears, found it neat and intuitive. I’ve extended it to:
baby-bear
toddler-bea
brother-bear
mama-bear
auntie-bear
uncle-bear
papa-bear
I’m also using a slightly different mixin, with some optional paramaters like setting “max”/”min”, “width”/”height”:
csswizardry-grids uses palm, lap, portable for palm+lap, lap-and-up for everything larger than palm, desk and desk-wide
This is what I use too. It avoids being over-specific with devices like “mobile” or “cellphone” or “tablet”, but keeps it relevant to how the site will be displayed. I love a bit of humour in my code but constantly having to type things like “papa bear” or “darth vader” into my CSS is incredibly tedious.
Here’s a bit of a geeky one, Transformers size classes :)
minicon
scout
deluxe
voyager
ultra
leader
supreme
Kitten
Cat
Leapard
Panther
Tiger
Lion
Tigers are bigger than Lions…
And Leopards are in most cases larger than Panthers.
I used to use
start-mobile
start-tablet
start-desktop
but now
sparrow
pigeon
raven
buzzard
eagle
This works for me….
all that needs to be called is:
Of course! We need Jedi Levels;
Initiate
Padawan
Knight
Master
Councilor
Grand Master
or Sith levels;
Minion
Assassin
Adept
Acolyte
Warrior
Marauder
Lord
Dark Lord
I’m on your wavelength, Aaron…working on a project now and it’s extremely helpful for me to use:
ewok
wookiee
wampa
I’m running out of the furred races, though…so I hope I won’t need any more breakpoints before I’m through!
Doesnt one have to be a grandmaster to sit on the council?
If Luke Wroblewski had chimed in his would be:
wrist
palm
lap
desk
wall
Homer
Marge
Bart
Lisa
Maggie
<=IE8 Grandpa Simpson
For a while I went with planet sizes (before I was 320-and-up style):
Jupiter (min-width 1440px)
Saturn (max-width 1439px)
Uranus (max 1280)
Neptune (max 1024)
Earth (max 800)
Venus (max 650)
Mars (max 568)
Mercury (max 400)
And I always include a custom entry at the end of the else if series that just says if it wasn’t in that list, just print the value directly in the mediaquery as max-width (again, before I was 320).
@else { @media(max-width: $point) { @content; } }
Now, though, I find myself doing more media queries on individual modules with odd numbers, so I’ve let the above statement become virtually the whole breakpoint mixin:
@mixin bp($point) {
@media screen and (min-width: $point/16 + em) { @content; }
}
I’m surprised no one has used beer yet:
AMBER
BLONDE
BROWN
CREAM
DARK
Obvious…
Baby shark ♪ do do, do do do do ♪
Mama shark ♪ do do, do do do do ♪
Papa shark ♪ do do, do do do do ♪
Swimmer ♪ do do, do do do do ♪
When I’m not playing with my matryoshka-dolls and attempting to be professional I use this system:
Media Queries:
Order from small to big.
extra-small, small, medium, large, larger, huge, massive.
If you need to add any more break points I currently suggest using number increaments like the following:
On large sites I find that sometimes you need to find a spot between the media queries you originally set at the start so the number increments is usually good solution.
For a bit more about it here is link to a gist for this mixin partial.
My list:
Chuck Norris
Opps. Messed up. My list:
Everything
Chuck Norris
I personally use the sizing scheme found in the post, but then abbreviated similarly to clothing sizes:
XXS
XS
S
M
L
XL
XXL
Although the other suggestions sound fun, I don’t think they are very clear. Another uplift on this one is that it is easy to insert additional breakpoints later on.
Nice! +1
i use the sizing theme to in some of my pages. thats really helpfull.
But there are a lot more options i guess. But when u have Shops its a smart way :)
Tree
Branch
Leaf
Beers :: Worst beer = the smallest && Best beer = the largest
-Natural Ice
–PBR
—Blue Moon (Draft of course)
—-Miller Lite
baby
mom
dad
mustache-pig guy
Please forgive me =)
3э
3=э
3==э
3====Э
I am new to scss but i love this tricks a lot… very flexible.
I am new to scss but i love this tricks a lot… very flexible.
Naming
Universe
Galaxy
Solarsystem
Earth
Asia
:)
Hey chris,
Meida query repeats and it makes me wired. is there anything am missing.
outputs
You can see there are 2 media query with same breakpoints(768px), but i those classes to be written in same media query without repeating. Hows that possible?
By horse breeds:
Shetland
Arabian
Paint
Thoroughbred
Clydesdale
Shire
There’s a stable, full-featured Compass extension called Breakpoint that does all of the things discussed in this post. I find it slightly odd that almost every commenter in this thread wants to name breakpoints, but then limit themselves to three or four total (regardless of the “non-device” names used).
When I use the Breakpoint extension, my typical project ends up having 20-40 different media queries. Why? Because they are all catering to my content instead of some arbitrary line that matches devices (or clumsily toes the line in between “popular” resolutions).
The end result is a truly fluid layout at any resolution, instead of one that looks good around a few breakpoints but looks kind of funky in between those special numbers. Some examples:
nav-sm
,nav-md
,nav-lg
footer-md
,footer-lg
,footer-wide
login-md
,login-lg
main-cta-sm
,main-cta-wide
Yes, you might end up with three or four of these labels having the same value. And that’s ok. Because the second you have to change one, you won’t have to change the others. You’ll end up doing a lot less find-n-replace.
Did I mention it can convert your PX values to EM automatically? It’s pretty slick.
Also, I’d be remiss not to mention its no-query fallback feature, which relies on conditional
<html>
classes to provide pure CSS, oldIE-compatible layouts with zero extra effort.Try Breakpoint, read the docs, and change the way you work with media queries!
How about:
robin
batman
superman
I’m still testing on this but I’ve found that removing the logic from the breakpoint mixin seems to lead to cleaner code. My Implementation looks like this:
@mixin wb($point) {
@media(min-width: $point) { @content; }
}
@mixin hb($point) {
@media(min-height: $point) { @content; }
}
I always work from smallest out when defining an element requiring media-queries so this seems to work very smoothly and requires nothing more than a well named set of variables. I’ve gone with Pawn -> King. This gives a nice variety of increasing orders of scale without tying to a device and means that you can call the mixin in a very similar fashion to your original recommendation:
.foo {
@include wb($pawn) {
color: #FFF; }
}
Which provides us with:
@media (min-width: 320px) {
.foo {
color: #FFF; } }
(Clearly this example is completely useless and shouldn’t ever be looked at as a good idea, but it does demonstrate the basic concept)
Mine are quite easy:
fucking-small
small
medium
large
fucking-large
For those of us who speak Spanish, I now decided to name my media queries like this:
la-chilindrina (fucking-small)
el-chavo (small)
kiko (medium)
señor-barriga (large)
profesor-girafales (fucking-large)
don-ramon (retina)
Oh boy, lol.
jordan
pippen
rodman
Thanks for the tip @chriscoyier. After my last RWD project, I simplified your example a bit because the number of breakpoint scopes got kinda ridiculous.
Surely anyone could supplement
em/rem
values as needed, but this gives me the most flexibility to account for arbitrary content breaks while narrowing the number of variables I have to recall throughout my stylesheets.Additionally, documenting specific breakpoints like in my example with
// @mqfix ...
makes it really easy to find in ST2 and to recall the exact reason for why I’m using that particular break point.iPhone
iPad
Desktop
or above example already good
baby-bear
mama-bear
papa-bear
Thanks! This method is quite useful and fun..
.. aaand I love chess version :)
pawn
knight
queen
king
Nice idea! This way it is all more fun. :)
I would add some music to it:
violin
viol
cello
bass
awesome idea dude…
Thanks! I needed this.