Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Applications

snookca
October 10, 2017

Responsive Web Applications

With Container Queries!

A look at how we built a responsive web application at Shopify and what tricks we have up our sleeve to build component-based applications.

Presented at CSS Dev Conf 2017 in New Orleans.

snookca

October 10, 2017
Tweet

More Decks by snookca

Other Decks in Technology

Transcript

  1. • No orders • One order • Less than one

    page of orders • Multiple pages of orders • Has Info Notifications • Tab overflow • Has Warning Notifications • Has limited access to features • Has different apps installed
  2. Went responsive in under a month† • Design considerations done

    
 in the months prior • Went component by component • Would continue to work in 
 non-responsive design • Allowed us to just flip a switch 
 when we were ready
  3. Solutions: • Component-based approach • Design systems team to establish

    patterns • Design Systems team dedicated to 
 building and maintaining components
  4. .two-columns { display: flex; flex-wrap: wrap; } .col1, .col2 {

    flex-grow: 1; } .col1 { flex-basis: 66%; min-width: 360px; } .col2 { flex-basis: 33%; }
  5. What’s Houdini: • Layout API • Custom Paint API •

    Parser API • Properties and Values • Animation Workout • Typed OM • Font Metrics API
  6. In Chrome: • Layout API • Custom Paint API •

    Parser API • Properties and Values • Animation Workout • Typed OM • Font Metrics API