rwd with breakpoint


Les James – Senior Front End Developer at Capstrat

Say hi on the interwebs... @lesjames





Three Pillars of RWD

Fluid grid – Fluid images – Media queries



Pillars of Breakpoint

Fluid & fixed grid
Content focused breakpoints
Adaptive images



Grid

Fluid mobile first foundation
Fixed for tablet, desktop & beyond
Column widths that don't stretch
Floatless grid
Em all the things


Breakpoints


MQs make you focus on container 
@media (min-width: 480px)

Sass lets you focus on content   
@include breakpoint(8)

Cascade style from mobile up



Adaptive Images

Two problems with fluid image approach
Attributes to store sources
Breakpoints in CSS only
Fitvids.js




Progressive Enhancement

Should you polyfill media queries?
Breakpoint fallback




Questions?



Thank You

More from lesjames



  • front end basics

    a look at html, css and javascript

    lesjames



  • html5 history api

    it's funner than it sounds


    wifi: guest / capstratguest

    lesjames