{"id":3648,"date":"2017-10-17T10:30:42","date_gmt":"2017-10-17T17:30:42","guid":{"rendered":"https:\/\/2017.seattle.wordcamp.org\/?p=3648"},"modified":"2017-10-16T13:11:45","modified_gmt":"2017-10-16T20:11:45","slug":"death-of-the-media-query","status":"publish","type":"post","link":"https:\/\/seattle.wordcamp.org\/2017\/death-of-the-media-query\/","title":{"rendered":"Death of the Media Query"},"content":{"rendered":"

Guest post by Saied Abbasi, Web Developer, Founder of WPHelp.Co<\/a>, and WordCamp Seattle 2017 Speaker<\/a>.<\/em><\/p>\n

Maybe you\u2019re a theme developer, maybe you\u2019ve heard of a 12-column grid, or maybe you\u2019re a blogger. Wherever you stand, let me let you in on a secret…<\/p>\n

The most common solutions to make websites responsive are hacks.<\/h2>\n

\"Death<\/p>\n

Death of the Media Query<\/a> will be a discussion on how to employ \u2018vanilla CSS\u2019 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\u2019t break with an extra line of text.<\/p>\n

Get ready for some buzzwords.<\/h2>\n

We\u2019ll 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 \u201cyou want it centered vertically, no problem!\u201d (In my head Flexbox has the confidence of an NYC construction worker).<\/p>\n

Let\u2019s think about a simple example with Flexbox.<\/h2>\n

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.<\/p>\n

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\u2026 so, let\u2019s 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\u00e0, if nobody ever changes the copy you have a perfectly spaced navigation\u2026 that only works on large screens.<\/p>\n

As we\u2019ll explore during Death of the Media Query, we want to avoid these situations where we have to get surgical with our code. You shouldn\u2019t need your graphing calculator to create symmetrical designs. However, dealing with spacing in CSS historically has been tricky.<\/p>\n

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\u2026 for all screen sizes.<\/p>\n

Don\u2019t believe me? Well you should come to my talk :]<\/p>\n

 <\/p>\n

\n

 <\/p>\n

Saied’s Death of the Media Query<\/a> session is Saturday at 11am. Don’t miss it!<\/p>\n

GET YOUR WORDCAMP TICKET NOW!<\/a><\/p>\n

photo credit: Aphiwat chuangchoem<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Guest post by Saied Abbasi, Web Developer, Founder of WPHelp.Co, and WordCamp Seattle 2017 Speaker. Maybe you\u2019re a theme developer, maybe you\u2019ve heard of a 12-column grid, or maybe you\u2019re 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 … <\/p>\n

Continue reading “Death of the Media Query”<\/span><\/a><\/p>\n","protected":false},"author":11704063,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[168],"tags":[],"class_list":["post-3648","post","type-post","status-publish","format-standard","hentry","category-sessions"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8fuws-WQ","_links":{"self":[{"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/posts\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/users\/11704063"}],"replies":[{"embeddable":true,"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":4,"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/posts\/3648\/revisions"}],"predecessor-version":[{"id":4088,"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/posts\/3648\/revisions\/4088"}],"wp:attachment":[{"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/categories?post=3648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seattle.wordcamp.org\/2017\/wp-json\/wp\/v2\/tags?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}