diff --git a/readme.md b/readme.md
index 443151f..a371f04 100644
--- a/readme.md
+++ b/readme.md
@@ -4,22 +4,23 @@ Market: SF
-#Bootstrap
+#Responsive CSS
## Why is this important?
*This workshop is important because:*
-Bootstrap is a **library of CSS classes** that helps make any old site look nice with very little effort. It comes with a **grid system** that makes layout out content on a variety of screen sizes much easier to deal with.
+Certain best practices in CSS help us build web applications and sites that looks nice well on a multitude of devices.
## What are the objectives?
*After this workshop, developers will be able to:*
-* Implement class-based CSS
-* Require Bootstrap into your project
-* Use and build a grid system
-* Design HTML pages with the aid of Bootstrap & mockups
+* Write semantic CSS class names
+* Articulate the benefits of "mobile-first" design
+* Write media queries to adjust styles for different sized viewports
+* Organize content on a website using a grid system
+* Articulate the benefits of a CSS framework
## Where should we be now?
@@ -28,45 +29,14 @@ Bootstrap is a **library of CSS classes** that helps make any old site look nice
- Write custom HTML & CSS
- Include external stylesheets
-
-##Intro to Bootstrap
-
-* [Bootstrap](http://getbootstrap.com/) is a **front-end framework** created by a small team of developers at Twitter and maintained by a much larger community of contributors.
-* The framework consists of one main CSS file, an optional theme CSS file, and a main JS file.
-* Parts of Bootstrap require [jQuery](https://code.jquery.com/) to work.
-* And it has excellent documentation!
-
-Bootstrap is extremely popular and knowledge of at least one CSS framework is a very valuable skill to have.
-
-Bootstrap comes with a ton of features, including:
-
-- Responsive Grid System
-- CSS library for quick and easy styling
-- UI components - HTML + CSS
- - buttons
- - forms
- - etc.
-
-*Optional*
-
-- Javascript widgets to make your page interactive (e.g. a nav bar)
-- Icons
-- & more!
-
-##Notable Sites Using Bootstrap
-
-* [NBA.com](http://www.nba.com/)
-* [Bloomberg](http://www.bloomberg.com/)
-* [CodeAcademy](https://www.codecademy.com/)
-
-##What is Class-based CSS?
+##Semantic CSS Classes
> Discussion, challenge, then demonstration
Create modular classes that *encapsulate* a certain behavior and name them semantically.
How would you style CSS for these elements?
-* `.shout` — uppercase the text inside the element
+* `.shout` — uppercase the text inside the element
* `.shadow` — add a drop-text to text inside the element
* `.invert` — flip an element upside-down
@@ -88,266 +58,143 @@ How would you style CSS for these elements?
+## Mobile first vs Desktop first
+Consider what the experience will be on a small screen first. It will be much easier to have the same content fit a larger screen than it would be to have it fit a smaller one. Here's a [set of sites](http://mediaqueri.es) to illustrate the point.
-##Including Bootstrap with HTML
-> Demonstration, then challenge
-
-* To use Bootstrap, we need to include Bootstrap's CSS and Javascript libraries (+ or - an optional Bootstrap-Theme CSS file).
-* We also need to include jQuery, as Bootstrap's JS plug-ins depend on it.
-* There are a few different ways to accomplish this, listed below. In this class, we'll keep it simple and stick with the CDN.
-
-1. CDN (Content Delivery Network - someone else hosts the library/framework and you access it via a URL): [http://getbootstrap.com/getting-started/#download-cdn](http://getbootstrap.com/getting-started/#download-cdn). Where do we include these in our HTML file?
-2. Download the actual CSS and JS files and link to them on your local computer - better for offline/local development.
-
-Sample code
-
-```html
-
-
-
- Bootstrap
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-##What is Responsive Design?
-> Discussion
-
-"Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience— easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to laptops to cellphones).
-
-A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, etc..."
-
-Source: [Wikipedia](https://en.wikipedia.org/wiki/Responsive_web_design)
+## The Three Components of Responsive Web Design
+1. Relative Units
+1. Media queries
+1. Grid system
-##Responsive Grid System (aka Columns of Craziness)
-> Discussion —> Demonstration —> Challenge
+## Relatively Sized Units
-* Columns are written in the following format as a class attribute: `col-(breakpoint)-(offset)`
-* For example: `col-sm-4`
-* Columns are often wrapped into an element with a class of `row` or `container`.
+###ems & rems
-####Start with a container
-To ensure all your Bootstrap styles behave properly, always put your content inside an element with a class "container" (usually `
`). This will center your content and leave a small margin on the sides of the page. If you would like to use the full width of the screen (no margin) use `class="container-fluid"`
+While the [em unit](http://blog.revathskumar.com/2014/04/css-understanding-em-and-rem.html#understanding-em-unit) is relative to the font-size of the parent, which can cause the "compounding issue" if the style is applied to nested elements—children getting smaller and smaller or bigger and bigger as they always refer to the size of their direct parent. Rem stands for "root-em", is relative to the `` element, aka the root.
-####Page layout using the Grid System
-
-Bootstrap's grid system is based on the idea that a page layout for any given screen size is represented with 12 fluid **columns**. Columns are always horizontally contained in **rows**, which in turn are contained inside of the previously mentioned `container` (container > row > column). But why 12?
-
-#### 12 is the best number
-
-12 is divisible by 2, 3, 4, and 6 (meaning we can have columns that are: half-width, third-width, quarter-width, and sixth-width aka 50%, ~33.3%, 25%, and ~16.7%):
-
- 12/2 = 6
- 12/3 = 4
- 12/4 = 3
- 12/6 = 2
- 12/12 = 1
-
- 6 + 6 = 12
- 4 + 4 + 4 = 12
- 3 + 3 + 3 + 3 = 12
- 2 + 2 + 2 + 2 + 2 + 2 = 12
- 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 = 12
-
-We can also create the typical two column layout (main content area + sidebar):
-
- 8 + 4 = 12
- 9 + 3 = 12
-
-* To use the gridsystem we must first have a row:
+```css
+html { font-size: 62.5%; }
+body { font-size: 1.4rem; } /* =14px */
+h1 { font-size: 2.4rem; } /* =24px */
+```
- ```html
-
...
- ```
-
-* Then select what screen size we'll want it to display on:
- - `col-xs` < 768px (e.g. smartphones)
- - `col-sm` ≥ 992px (e.g. tablets)
- - `col-md` ≥ 1200px (e.g. laptops, desktops)
- - `col-lg` ≥ 1200px (e.g. large desktops, smart TVs)
+>Note: Defining a base font-size of 62.5% allows font sizes to be 1/10 of their pixel equivalent.
-* Pick a fraction of `12` that will determine how much of the row it will take up.
+###vw & vh
-* You then use the above choices to determine the exact class you will add to an element in the row (bootstrap has them all built in).
+Sometimes we want certain elements to entirely fit within the viewport. Previously, developers would delegate this task to a JavaScript. As of CSS3, `vw` and `vh` size elements relatively to the viewport. 1 unit is 1 percent of the viewport size.
-For example the class: `col-lg-3` will take up `3/12` of the space at `1200px`. Feel free to add more classes to the same element to change how it will behave at other screen sizes. Let's checkout some more examples...
+## Media Queries
-Here's an example of a two-column layout that spans the width of the page. Notice that the widths of the two columns add up to 12. The column content of any row must always be ≤12.
+One way to adjust the styles depending on the device's size is by using media queries:
-```html
-
-
-
I'm a medium-sized column
-
-
-
Me too! We have SO much in common
-
-
-```
+```css
+
+body {
+ background: papayawhip;
+}
-What will this code do?
-
-```html
-
-
-
I take up the entire space when the screen is small, but share it when there's more room.
-
-
-
Samesies...
-
-
+
+@media (max-width: 400px){
+ body {
+ background: tomato;
+ }
+}
```
+Using media queries, we can group our css rules according to the size of our expected viewing devises. This media query says, if our viewport is less than 400px, use the following css rules.
-###Challenge: Grid it
-
-Using the bootstrap grid, make a grid that is 3 Columns on Tablet (sm), Laptop (md), and Desktop (lg), 1 Column on Mobile(xs).
-
-Sample code
-
-```html
-
-
3 Columns on Tablet, Laptop, and Desktop, 1 Column on Mobile
-
Yao
-
Hey
-
Ola
-
-```
-
-
+Possible values include:
+* min-width
+* max-width
+* min-height
+* max-height
+>Note: The `viewport` meta tag lets developers scale the viewport on mobile devices to be equal to the width of the device’s screen.
-For other examples, check out the [Bootstrap docs](http://getbootstrap.com/css/#grid)
+## Grid System
-##Offsets & Nesting
-* The way that Bootstrap works is to dynamically reduce column size according to the window size.
-* To be mobile (and tablet!) friendly, the columns will break into a stack layout after a minimum width is detected.
-* The breakpoints you can select in your columns control at which point this happens.
-* Check out their [documentation](http://getbootstrap.com/css/#grid) here to see what these breakpoints are in terms of size.
-* Let's test it!
+### Structure
+* Grids are a simple way to apply layout to a webpage. A better layout improves the user experience.
+* Grids help avoid stressful CSS debugging by starting out on the right foot.
+### Reusability
+* Grids make the layout process easier because of reusable, semantically-named "utility classes" (i.e., a library of CSS class selectors).
+* Grids aren't limited to a particular project. We can apply them to pretty much everything we do.
+* Grids are highly customizable. You can really make them your own.
-You can also offset and nest your columns. When you offset a column, you add a column of whitespace and push the column to the right. Example:
+_Even if you don't use a grid system, these concepts will translate across other layout problems._
-```html
-
-
-
This column occupies 1/4 of the page width and is moved to the right
- by 1/4 of the page width
-
-
-```
-Here is an example of nesting columns (putting one row inside another)
-
-```html
-
-
- Level 1: Column takes 1/2 the width of the page
-
-
- Level 2: This column takes 1/3 the width of its parent column
-
-
- Level 2: This column takes 2/3 the width of its parent column
-
-
-
-
-```
+### Rows
-##Typography
-For a complete list: [Bootstrap Typography classes](http://getbootstrap.com/css/#type)
+* Separates content horizontally
+* Contains columns
-To align text, use these classes.
+### Columns
-```html
-
- This line of text is meant to be treated as fine print.
-
Lowercased text.
-
Uppercased text.
-
Capitalized text.
-```
+* Separates content vertically
+* Is contained by a row
-####Icons
-Bootstrap comes with a set of icons that can be included in your page using the `` tag. Check out these icons [here](http://getbootstrap.com/components/#glyphicons)
+### Gutters
-####Buttons
-Bootstrap provides a wide selection of button sizes and colors. Button classes can be applied not just to `