Mobile first

Responsive design in 3 seconds

The responsive snake on reddit

Responsive Design

Scaling Design

Mobile first approach

A little Explanation of the mobile first, always start by the .small-* CSS class when you are coding the page.

<div class="row">  
  <div class="small-12 medium-4 colunms"></div>  
  <div class="small-12 medium-4 colunms"></div>  
  <div class="small-12 medium-4 colunms"></div>  
</div>

Protip: There are 2 grid system in foundation. For the begining use the classic one to get support for the largest number of old devices.

Challenges:

• Use the grid with .calloutclasses to reproduce the Responsive Design picure

• Use the grid with .calloutclasses to reproduce the Scale picure