Reading Time: 3 minutes read
TLDR: The SASS Zurb Foundation install makes it easy to make a fully customized responsive website.
Making a new website can be extremely easy or very time consuming. Tools available through Opensource projects, Creative Commons, and GNU licenses make it easy to layout a prototype in no time.
Some of the obvious ones are Twitter Bootstrap (+20,000 stars on Github) and HTML5 Boilerplate. My personal recent favorite is Foundation from Zurb. I took a liking to Foundation because it gave me an edge at mocking up marketing pages without having to go through an extensive design and copywriting process.
Zurb’s Foundation uses Compass and SASS to make getting started and customizing very easy. You don’t have to track down CSS elements or worse, overwrite existing declarations. Foundation provides clear documentation regarding what is provided and how it can be used.
When paired with Compass, Foundation compiles a series of “Foundational” SASS stylesheets into a clearly documented CSS file. The SASS files make use of the variable notation, allowing new users to change the existing styles, rather than overwriting. This can be particularly useful when you are trying to keep your CSS clean and well documented.
To make changes, Foundation provides a file called _settings.sass. This file has all of the variables available for customization. All variables are presented commented out, so to make changes, just uncomment and change. Rather than overwriting the existing selectors, this keeps the CSS selectors light and easy to manage (Snooks would approve).
Foundation makes a webpage look really great from the beginning (like Twitter Bootstrap). Some of us don’t like the default Helvetica Neue and recognizable colors. Differentiating your installation of Foundation is easy. The problem with Twitter Bootstrap is that most websites using it don’t do enough altercations to make it look different.
The two major changes that make your website look different are changing the default colors and the fonts. Again, using the SASS _settings file, you only make changes to the $mainColor, $bodyFontFamily, and $headerFontFamily. Once these changes are made, you have a extremely unique, responsive, well functioning website.
One letdown of Foundation is the dependence on box-model. (Let it be know, I love box-model too. Still, it doesn’t work with old browsers.) Box-model as a CSS property which calculates the padding inside the width. This simplifies calculating percentages for fluid layouts, but sadly this property is not available in IE6.
Fortunately the dependance on box-model can be circumvented with polyfills and explicitly defined layouts. Still, Foundation’s development without consideration for older browsers makes it difficult to use for my current demographic.
Overall, Foundation makes it easy to build websites. Paired with Codekit (which deserves a post of its own) or Compass, starting and managing new sites enjoyable!