Picturefill 3.0

In this exercise we will build  a demo using Scott Jehl’s Picturefill approach.

Picturefill Basic Demo

  1. Download a clean build of HTML5 Boilerplate and name the project root picturefill.
  2. Download project imagery and place in the img directory.
  3. Include picturefill script (direct or via CDN). Note the use of the async attribute on the element. This tells the browser that it can load picturefill asynchronously, without waiting for it to finish before loading the rest of the document.
  4. Build html structure. I used a section element in the example.
  5. Add base style to the main.css file. Remember mobile first!

  1. Add Media Queries

  1. Depending on need add the appropriate picture element in the source.

  1. Review documentation for additional options and usage tips.