Mobile First Design

Foundation supports a "Mobile First" approach to web design. This means that you don't design your site on the desktop and then figure out how to get it to work on mobile. All of the default sizing and settings are set on the mobile level first. Then you progressively enhance the site to work on larger devices. This should not scare you as desktop sizing is turned on by default so that the paradigm shift is easier for you.

Recommended Reading: Mobile First Design: Why It’s Great and Why It Sucks

When starting to build a new webpage, set the view width setting inside Site Styles to mobile width. Then start designing your webpage for the mobile layout. Make sure that you turn off tablet sizing in the columns stacks as it is enabled by default.

After you have completed your mobile layout, you can then progress onto the tablet view in the Site Styles. Adjust the settings in your stacks so that the layout works well for tablet devices. You may find that you will want to show or hide some content at this point.

Lastly, you will progress onto desktop sizing. I find that not many tweaks will need to be done since most of the time, tablet sizing also works great on desktops.