Slide 1

Slide 1 text

Introduction to (Twitter) Bootstrap By Kyle Mitofsky

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Responsive Design Tautologically: Responds to Environment  Get information about environment through Media Queries /* 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) { /*...*/ } http://getbootstrap.com/css/#grid-media-queries

Slide 4

Slide 4 text

Mobile First The Ted Williams of Responsive Design Patterns  Historically - slapping on a couple of media queries and disabling features Graceful Degradation Progressive Enhancement ✓

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Layouts Types

Slide 7

Slide 7 text

Demo!