I’ll start by saying a like Foundation a lot. Almost love it.

I have been frustrated many times by this framework, but that’s to be expected with anything this complex. I’ve dabbled with a lot, and used a couple like Bootstrap and Skeleton for sites that are live.

Basically, items that make me run away from a framework are things like bad classes and naming conventions, verbose code or anything that’s been deemed a poor practice. And if I need to wrap columns in multiple wrappers or add a class of .last on to the last column in the row, I’m out.

Now, onto Foundation. I started using it at v2, when Zurb released it to the world. I’m not sure if sass was a thing at that point, or if ultra-optimizing css was really in the limelight, but I straight downloaded the zip, linked up Foundations CSS, then added a custom.css for my styles to over ride theirs. Crazy. There was a lot of extra, unnecessary code happening here, but I’m pretty sure I wasn’t the only one doing it this way.

This is when a lot of front-end dev’s were really arguing over whether a big framework was more helpful. Rollin’ your own was en vogue, and IMHO, great for sites that had the budget for it. But let’s be honest, if you’re creating websites for small-medium sized businesses, the budget is probably not there. Your “prototype” is probably going to evolve into your “production” site.

Downloading Foundation from their site

As you may have noticed, you can download the entire framework from foundation.zurb.com. Options are:

• Basic version, just enough to get you rockin’
• Complete framework, kitchen-sink stuff
• Custom download
• Sass (installed via the command line)

I’d say only download the kitchen-sink to experiment. There are better ways to begin a site for production, which we’ll discuss.

Splash page or Mini-Brochure site

Then the custom download may be for you! You can edit some of the variables right there, before downloading, to getting your custom assets ready to go. I think this is a fast and efficient way to roll for real small and simple stuff, and you can easily add your own sass files if need be.

The “Essentials” option is nice, but again, this would be to serve a very specific site, where this config happened to magically be perfect for your needs. Possible but not probable.

Anything larger than that, bower install that puppy

FOUNDATION has one video on their site, how to install bower and start using the command line to kick off your projects. Honestly, it feels really good every time I press enter.

You will end up with a folder wherever you are CD’d into, now all you have to do is CD into that folder, and type ‘compass watch’ in the command line.

Drag this folder into your text editor of choice and you’ll get a better idea of what’s happening. All the assets Foundation needs are in the ‘bower_components’. You don’t want to mess with these, since upgrading Foundation will override these and the changes you made in this folder. In the ‘scss’ folder, you’ll want to start.

app.scss
_settings.scss

The app file is the main scss file that’s being watched and converted to app.css, so add your @import’s here for any other files you’ll want to make. The app file is importing all of foundation’s components but you can easily comment out components you don’t wish to use, instantly downsizing your css output.

Now take a peak in the _settings file. A bunch of stuff commented out, roughly 1300 lines. This gives you direct access to Foundation’s variables, so you can change the root, instead of adding extra css to override theirs.

OK cool, getting smaller files. In the next post, let’s get tiny. We’ll take a look at shutting everything down and only including what you need via mixins.