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

Pulling Your Website Up By Your Twitter Bootstraps

Pulling Your Website Up By Your Twitter Bootstraps

Introduction to Bootstrap 3

Cf6e90ab43d4dca6cd88f03bb0ad81b4?s=128

Kyle Mitofsky

June 20, 2014
Tweet

Transcript

  1. Introduction to (Twitter) Bootstrap By Kyle Mitofsky

  2. About You You’re having a really good time?  Who

    this Talk is geared towards:  People not yet using Bootstrap  Who Bootstrap is geared towards:  Teams without a dedicated designer  Sites that are not doing anything on the front end
  3. Responsive Design Tautologically: Responds to Environment  Get information about

    environment through Media Queries <style> /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices */ @media (min-width: 768px) { /*...*/ } /* Medium devices */ @media (min-width: 992px) { /*...*/ } /* Large devices */ @media (min-width: 1200px) { /*...*/ } </style> http://getbootstrap.com/css/#grid-media-queries
  4. Mobile First The Ted Williams of Responsive Design Patterns 

    Historically - slapping on a couple of media queries and disabling features Graceful Degradation Progressive Enhancement ✓
  5. Meta Tags [meta] [tags] [tagging] <meta name="viewport" content="width=device-width, initial-scale=1"> Desktop

    Small Width Zoomed Out http://www.nytimes.com/ Viewport
  6. Layouts Types

  7. Demo!