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.

Make an image fill a div entirely without blanks, keep its ratio and be responsive

I thought this would be simple but I was wrong ! There is no CSS to do this easily, you’ll need some JS to make it work properly.

First, we have a div with several img inside. In fact, it’s a slider.

This slider is a background slider, it takes all the browser window space. And we you resize your browser, the images need to be sized so they keep their ratio, but they fill the entire background without leaving any space. Of course, that means the image will be cropped.

Then, I found this blog with a nice function to do the maths.

http://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/

The trickiest part is that you need to resize the image depending on the div size and each time you have to verify if you need to set the width or the height.