2. 



CSS
SASS
gem ‘foundation-rails’
rails g foundation:install

3. 




Small screens – (max-width 640px)
Medium screens – (min-width 641px and
max-width 1024px)
Large screens – (min-width 1024px and
max-width 1440px)
XLarge screens – (min-width 1441px and
max-width 1920px)
XXLarge screens – (min-width 1921px)

4. Imagine your website is a table of
 Rows
 Columns

5. <div class="row">
<div class="small-2 large-4 columns"></div>
<div class="small-4 large-4 columns"></div>
<div class="small-6 large-4 columns"></div>
</div>
<div class="row">
<div class="large-3 columns">..</div>
<div class="large-6 columns">..</div>
<div class="large-3 columns">..</div>
</div>

6. Columns width in Large screen size
Columns width in Small screen size

8. <div class="row">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-10 large-offset-1 columns">10,
offset 1</div>
</div>

10. 
Show by screen size
<strong class="show-for-small-only">This text is
shown only on a small screen.</strong>
<strong class="show-for-large-only">This text is
shown only on a large screen.</strong>

11. 
Hide by screen size
<strong class="hide-for-small-only">You are not on a
small screen.</strong>
<strong class="hide-for-large-only">You are not on a
large screen.</strong>

12. 
Touch Detection
<strong class="show-for-touch">You are on a touchenabled device.</strong>
<strong class="hide-for-touch">You are not on a touchenabled device.</strong>

13. 



Speedup develop
Works on different browsers
Displays on many devices
Follows a table format

14. Thank You