Quick Start with Foundation

Never re-invent the wheel ! That’s a good moto for any developer out there. Let me show you how to quickly bootstrap you website stylesheet with Foundation. Its default components will help you to define a generic style very easily so you can concentrate on customizing to match your pixel-perfect design.

Setup Foundation on you machine

Install the foundation command line using npm

Creation of a new project

Setup your project with “foundation new” command.

You’ll have to choose between different options. I just choose the most common one, use Foundation for site with a simple template.

At the end, just type

Each time you’ll modify a SASS file, it’ll be compiled (and rather quickly !) into an app.css file.

All you main SASS code has too be written in app.scss file.

You have the choice to include all foundation, or just a few part of it. Or even nothing at all. But I recommend at least one :

Which is taking care of resetting all styles, setting default styling for HTML elements and so on.

Write your code without annoying default Foundation classes

The goal is to use our own classes with Foundation code. Here is a simple example :

For each of its components, Foundation gives you access to several mixins that you can include everywhere.

Published by

Louwii

Web developer, geek, car enthusiast, photographer, DIYer, video gamer... I like many things, maybe too many?

Leave a Reply

Your email address will not be published. Required fields are marked *