Informal Responsive Design Workshop

#Responsive Design Workshop

##Some Examples of Responsive Sites

##Helpful Articles/Resources

##Dissecting Bootstrap

We've all used Bootstrap and are familiar with some of its responsive elements. We're going to work with the navbar. Here's a simple bootstrap navbar template. Open it up and change the screen size. What happens?!!!?

Let's take a look at at the Bootstrap Source Code

See if you can find the line(s) responsible for making the Bootstrap Navbar responsive. In particular, can you figure out how the hamburger icon works?

##Media Queries

Media Queries are the underlying magic behind most responsive sites. Media Queries allow us to get information about the user's device and then selectively apply styles. The most common use is to apply different styles depending on the screen size of a device, but media queries also give us access to things like resolution, color mode, and media type(print, braille, projection, etc.).

MDN Media Queries

Here's a media query 'template'

@media (some-user-info: value) {
  //Apply the following styles only if the above condition is true
  p {
    background-color: purple;
  }
}

Here's a media query to text-align some stuff to the right when the screen is at least 1200 pixels wide:

@media (min-width: 1200px) {
  form > div > label,
	legend {
  	text-align: right;
  }
}

Here's a great media query reference guide to figure out what media queries to use to target different devices.

##Logical Operators

####AND

@media (min-width: 700px) and (orientation: landscape) { 
	//styles that only apply when the screen size is greater than 700px, and the device is in landscape
}

@media (min-width: 600px) and (max-width: 800px) {
  body {
    background-color: green;
  }
}

####OR

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

####NOT

@media not all and (max-width: 600px) {
  html { background: red; }
}

Colt/responsive-design-workshop.md