Death of the Media Query

Guest post by Saied Abbasi, Web Developer, Founder of WPHelp.Co, and WordCamp Seattle 2017 Speaker.

Maybe you’re a theme developer, maybe you’ve heard of a 12-column grid, or maybe you’re a blogger. Wherever you stand, let me let you in on a secret…

The most common solutions to make websites responsive are hacks.

Death of the Media Query

Death of the Media Query will be a discussion on how to employ ‘vanilla CSS’ to create designs that are fluid across devices. This will enable us to move away from our dependency on frameworks like Bootstrap, be less surgical with our code, and create templates that don’t break with an extra line of text.

Get ready for some buzzwords.

We’ll explore fluid solutions from a mixin that throws us back to Geometry class with the magic of linear interpolation, to CSS Grid areas that will change the rules of theme development, and to our dear friend Flexbox that finally came along and said “you want it centered vertically, no problem!” (In my head Flexbox has the confidence of an NYC construction worker).

Let’s think about a simple example with Flexbox.

You have a navigation at the top of your site with 5 links. The links run horizontally across the screen. In an ideal world, you want the first link flush to the left of the screen, the last link flush to the right of the screen, and the three remaining links to be evenly spaced in-between.

This should be easy — but no. You have your font size set just right, the text of each link covers about half an inch of the screen… so, let’s see, take 5 links carry the width of 100%, divide by 37 and multiply that by the square root of your font size in pixels — and voilà, if nobody ever changes the copy you have a perfectly spaced navigation… that only works on large screens.

As we’ll explore during Death of the Media Query, we want to avoid these situations where we have to get surgical with our code. You shouldn’t need your graphing calculator to create symmetrical designs. However, dealing with spacing in CSS historically has been tricky.

Instead, if we let Flexbox handle this navigation bar predicament, we can distribute space effortlessly. Just as easily as we can make a font size a few pixels larger, we can take five links, pin the first flush to the left of the screen, the last flush to the right of the screen, and space the other three evenly between… for all screen sizes.

Don’t believe me? Well you should come to my talk :]

 


 

Saied’s Death of the Media Query session is Saturday at 11am. Don’t miss it!

GET YOUR WORDCAMP TICKET NOW!

photo credit: Aphiwat chuangchoem

CategoriesUncategorized

WordCamp Seattle 2017 is over. Check out the next edition!