{"id":247302,"date":"2016-11-04T13:40:42","date_gmt":"2016-11-04T20:40:42","guid":{"rendered":"http:\/\/css-tricks.com\/?p=247302"},"modified":"2016-11-05T14:23:22","modified_gmt":"2016-11-05T21:23:22","slug":"notes-css-dev-conf-2016","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/notes-css-dev-conf-2016\/","title":{"rendered":"Notes from CSS Dev Conf 2016"},"content":{"rendered":"

I’ve attended every single CSS Dev Conf<\/a>, five years running now. I’ve always particularly enjoyed conferences that have a somewhat narrow focus. Since this conference is, no surprise, largely focused on CSS, I think it serves as an interesting state of the union of CSS<\/strong> style conference every year, for me at least. <\/p>\n

In years past themes have emerged like: preprocessors, architecture, testing, performance… last year I’d say it was SVG<\/a>. <\/p>\n

<\/p>\n

Caveat! <\/p>\n

CSS Dev Conf is a multi-track conference, plus I had to miss the “best of” talks as that’s when I was hosting the CodePen Show & Tell<\/a>. So this isn’t wholly representative of the entire conference. Sorry! Come next year!<\/p>\n

Mike Riethmuller talked about responsive typography<\/h3>\n

Or more accurately: “Advanced Fluid Typography”. He also won best of show<\/em>! Well deserved, I think. <\/p>\n

He walked us through how calc()<\/code> works, then started incorporating viewport units and applying everything to font-size. The result can be “fluid type”, or type that resizes based on the width of the screen, with minimums and maximums. It’s cooler than using viewport units alone (or SVG) because you can limit the scale. <\/p>\n

See the Pen Precision responsive typography<\/a> by Mike (@MadeByMike<\/a>) on CodePen<\/a>.<\/p>\n

This can be used instead of using media query breakpoints adjusting the font-size in fixed increments. <\/p>\n

It’s a big deal because:<\/p>\n

    \n
  1. It’s similar to the difference between adaptive layouts and responsive layouts. We all know responsive kinda won the day there.<\/li>\n
  2. Adjusting font-size at breakpoints is kinda janky and not nearly as satisfying as this.<\/li>\n
  3. It’s basically a one-liner of code, so adoption of this idea should be pretty easy.<\/li>\n<\/ol>\n

    And that’s not all! If the type all just scaled proportionally to each other, that’d be kinda like SVG <text><\/code>. The limits are a differentiator, but also, the concepts can be extended to:<\/p>\n