element-queries-preso



element-queries-preso

0 0


element-queries-preso

Talk I gave at Be Responsive in Melbourne on 14/1/14

On Github bensmithett / element-queries-preso

Element Queries

Responsive Web Design's Unicorn

@bensmithett

Who knows CSS?

Preprocessor (Sass or Less)?

BEM

SMACSS

OOCSS

We used to design & build pages

HOME
PRODUCTS

We don't do pages any more

We design & build components

HTML

<div class="my-component">
  ...
</div>

CSS

.my-component { color: blue; }

JavaScript

$( ".my-component" ).doSomething();
STYLE GUIDE
Product Thumb
Comment
Mini Shopping Cart
HOME

Responsive Components

Page : Device

Component : Container

How do we make a componentrespond to changes in its own size?

Window: Media Queries

Element: ???

Element Queries!

April 2013

Media Queries are a Hack

by Ian Storm Taylor

Media Query

@media ( min-width: 1024px ) { 
  .my-component { 
    color: yellow;
  }
}

Element Query

.my-component:min-width( 600px ) { 
  color: yellow;
}

:(

Element Queries don't exist

why?

circular dependencies

.container {
  float: left;
}
.child {
  width: 500px;
}
.container:min-width (450px) > .child {
  width: 400px;
}

Limitations & challenges explained in

Element Queries

by Tab Atkins (Chrome dev)

How to build Responsive Components?

Element Queries

iframes!

and Twitter, Google+, Disqus, YouTube, etc etc
  • Establish a new viewport
  • Regular Media Queries work
  • Size of iframe element isn't affected by size of child elements
  • No circularity!

Downsides

  • Performance
  • Don't inherit CSS from parent document
  • Makes JavaScript really annoying

How to build Responsive Components?

Element Queries

iframes

Fake Element Queries with JS!

Fake Element Queries with JS

  • Watch element
  • Detect when it changes size
  • Update a class
class="my-component gt-600px"
(Note for anyone browsing these slides: refresh this page if you don't see a flashing gt-600px class. Something's broken & I haven't had a chance to fix it yet.)
.my-component {
  color: green
}

/* .my-component:min-width( 600px )  */
.my-component.gt-600px {
  color: yellow
}

Downsides

How to build Responsive Components?

Element Queries

iframes

Fake Element Queries with JS!

Ben's Kinda-Boring Recommended Solution™

Use BEM classes

We don't really render our components in infinite contexts...
...most of the time they'll only have 2 or 3 possible parent containers
...and you probably already know the breakpoints where you want the CSS to change
.my-component,
.my-component--does-respond {
  color: green
}

@media ( min-width: 1024px ) {
  .my-component--does-respond {
    color: yellow
  }
}
It's cheating, but it does the job for now.

Responsive components:

Components that work everywhere where you need them to.

But what does the future hold?

Web Components

  • Isolated, sandboxed chunks of HTML, CSS & JavaScript
  • Only in Chrome so far
  • Polymer polyfill

Element Queries!

<viewport> solves circularity
Lots of discussion on W3C mailing list

In summary...

  • Design & build libraries of responsive components!
  • Use BEM class names
  • We might get Element Queries one day!

Thanks!

I'm @bensmithett on the internet