Pulling Your Website Up By Your Twitter Bootstraps

Introduction to Bootstrap 3

Transcript

1. Introduction to
   (Twitter) Bootstrap
   By Kyle Mitofsky
   

   View Slide

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
   

   View Slide

3. Responsive Design
   Tautologically: Responds to Environment
    Get information about environment through Media Queries
   <br/>/* Extra small devices (phones, less than 768px) */<br/>/* No media query since this is the default in Bootstrap */<br/>/* Small devices */<br/>@media (min-width: 768px) { /*...*/ }<br/>/* Medium devices */<br/>@media (min-width: 992px) { /*...*/ }<br/>/* Large devices */<br/>@media (min-width: 1200px) { /*...*/ }<br/>
   http://getbootstrap.com/css/#grid-media-queries
   

   View Slide

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
   ✓
   

   View Slide

5. Meta Tags
   [meta] [tags] [tagging]
   
   Desktop Small Width Zoomed Out
   http://www.nytimes.com/
   Viewport
   

   View Slide

6. Layouts Types
   

   View Slide

7. Demo!
   

   View Slide