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 full-size 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 full-size 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 full-size 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 full-size slide

  5. Meta Tags
    [meta] [tags] [tagging]

    Desktop Small Width Zoomed Out
    http://www.nytimes.com/
    Viewport

    View full-size slide

  6. Layouts Types

    View full-size slide