ResponsiveCSS3PolyfillBootstrapGrid

.js

What the Heck is this Stuff and Why Should You Care?

Shahab Lashkari
Product Manager
OmniUpdate, Inc.
@OUShahab

Overview

  • CSS Reset vs. Normalize

  • Grids

  • JavaScript Tools

  • Polyfills

  • Frameworks

CSS Reset


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, figcaption, figure, footer,
header, hgroup, menu, nav, section, summary, time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
} 

Normalize.CSS

  • Consistency across browsers


  • Only change what is necessary

Grids

  • Simplify layout

  • Can make responsive easier


Examples: Gridpak, Unsemantic
Screenshot of gallenauniversity.com with grid overlay

JavaScript Tools

Polyfills




yepnope




yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

Frameworks







Thoughts








Questions?








Thank you


ResponsiveCSS3PolyfillBootstrapGrid.js

By Shahab Lashkari

ResponsiveCSS3PolyfillBootstrapGrid.js

What the heck is all of this stuff, and why should you care?

  • 5,069