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