Read: 01 SMACSS and Responsive Web Design - cindyweiss/seattle-301d55 GitHub Wiki

https://github.com/cindyweiss/seattle-301d55/wiki/Read:-01---SMACSS-and-Responsive-Web-Design

What is Responsive Web Design:

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop.

Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media.

****Most important thing to remember from this article is:

"The Internet took off quicker than anyone would have predicted, growing like crazy. Now, for the past few years, mobile growth has exploded onto the scene. The growth of mobile Internet usage is also far out pacing that of general Internet usage growth."

With this information you should always set up your websites with mobile first in mind!

Mobile first method: One popular technique with using media queries is called mobile first. The mobile first approach includes using styles targeted at smaller viewports as the default styles for a website, then use media queries to add styles as the viewport grows.

Example: /* Default styles first then media queries */ @media screen and (min-width: 400px) {...} @media screen and (min-width: 600px) {...} @media screen and (min-width: 1000px) {...} @media screen and (min-width: 1400px) {...}

SMACSS: SMACSS (pronounced “smacks”) is more style guide than rigid framework. At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.

There are five types of categories: Base, Layout, Module, State, Theme,

The overall purpose for me to remember was that this helps organize my css so if I want to change something I can pinpoint where to look for the part of CSS instead of combing over 200 lines of css to find what I want to change.