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

Kyle Mitofsky

June 20, 2014
Tweet

More Decks by Kyle Mitofsky

Other Decks in Programming

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