### Mobile First Design
- Responsive design flipped on its head
- Start with smallest screen then build up
- Starting w/ small screen forces you to focus on tough design decisions early on
- When mobile is not a priority (big data, software, etc.) mobile first may not make much sense
  - Media queries build up, not down. For example:

  ```css
  /* standard approach - builds down */
  .element {
    color: red;
  }

  @media (max-width: 800px) {
    color: blue;
  }

  @media (max-width: 400px) {
    color: black;
  }

  /* mobile first approach - reversed - styling starts with mobile */
  /* moving up larger screens as code progresses */
  .element {
    color: black;
  }

  @media (min-width: 800px) {
    color: blue;
  }

  @media (min-width: 400px) {
    color: red;
  }
  ```

- Every component in Foundation is written mobile first. Clearest example is the grid:

  ```html
  <!-- Classes like 'small-12' apply to that breakpoint and larger, in this case medium borrows from 'small-12' -->
  <div class="row">
    <div class="small-12 large-6 columns"></div>
  </div>
  ```

- Styling resets are easier to deal with in moobile first. As you define desktop styling and drill down to mobile, you'll have to override/reset styles for mobile (ex. changing sizes of buttons/columns for mobile and medium). Working from mobile up allows you to introduce complexity as you build up to larger sizes, reducing the amount of resets/overrides.

#### Editor Stuff
- **Spaces v. Tabs** - Using two spaces as opposed to tabs is preferable because a space is always 1 character, whereas tabs can be ambiguous in width. Having two spaces as opposed to 4 is more easily readable as well.