Using Foundation 5 SCSS Tutorial

Use with Adobe Photoshop and analyze your website PSD to determine how many rows you need, as well as how many columns, the column widths, and the gutter widths.

You are not just building one site, but 3 different sites.  A desktop site, a pad version, and a mobile version.

Every website needs navigation.  Foundation really pushes you towards a dynamic top nav, so make sure you are including the topbar js application (foundation.topbar.js, and make sure top-bar.scss is being compile into your foundation.css file), or the new side-nav(side-nav.scss) or sub-nav(sub-nav.scss)

Using Foundation 5 SCSS Without Git, NodeJS, or Ruby on Windows

When it comes down to it, Foundation is, at it’s essence just a set of scss files that get compiled to css files, and two javascript files….foundation.js and modernizr.js,  that you can include in your website.  If you want to use any of the javascript components (and you should), then there are some additional javascript files you should include, as well as some particular version of jquery.

Really, all you need to get started with Foundation scss is a program to compile the scss files.  Ideally your IDE would do this, but most IDE’s don’t have that capability just yet, so you will need to download a separate app for it.  I recommend Scout , because you can specify an output directory and it doesn’t hog the CPU, but I also like Koala….Koala is dead simple and made especially for designers, but it compiles the scss in the same directory, which I don’t like, because after all…who wants their scss and css files living in the same directory.  I used to like Prepros, but it’s gotten CPU intensive, and all the cool features are “paid” features now.  All three have additional features in that they will also process and minify your js and css…and Prepros even goes so far as to offer stitching, which is a really nice feature where it automatically stitches together your css and js files into a single file…something very handy for optimizing your website in production.  This can get you in trouble in js since there are usually some dependencies and not everyone has mastered closures, modules and lazy loading and often, the load order matters, but definitely give it a shot and then check to make sure everything still works.

Download Foundation

There’s a composer file for keeping track of dependencies, but for the most part you don’t really need it..if you are doing everything command line, and used to using composer, then feel free to use it to download any dependencies, and if you are feeling bold, run update to get the latest versions of the dependencies and see if everything still works.  Otherwise, unzip the files, and you can just copy the /scss and /js directories from the unzipped zip file.  Feel free to delete any js application files that you aren’t going to use (and their corresponding scss files…also edit the /scss/foundation.scss file to remove references to those files), and in fact I highly encourage this to keep your website optimized for speed.  The only files you absolutely need are the /scss/foundation.scss, /scss/_settings.scss, foundation.js and the modernizr.js files.  The js files should go wherever you normally put your js files, but the scss directory can go just about anywhere.  Ideally put them in your IDE’s project directory, but not in the deployment directory.  They can be deployed, but they won’t be used because these are the files that get compiled into the css.  So you’ve moved your scss files to some particular directory, and copied the js files that you want to your js directory.  Now when you fire up your SCSS (SASS) compiler and “Add New Project” and specify your project directory.   A warning if you are using PrePros….it can be VERY slow when it initially scans your project before it’s ready to go.

Now make sure you are including the normalize.css, and foundation.css files that get compiled, and some version of jquery along with the foundation.js file.  I’ve used jquery 1.10.2, but if you are going to use the javascript apps, you’ll probably want to use the latest jquery.  These are the official listed dependencies for Foundation 5.3.3… “jquery”: “>= 2.1.0″,”modernizr”: “>= 2.7.2”,…..the rest are listed as dependencies, but I don’t believe they are absolutely required.  Fastclick is used to make mobile clicks faster…jquery cookie is used by Joyride js plugin….and jquery placeholder is used for IE9 polyfills:  “fastclick”: “>=0.6.11″,”jquery.cookie”: “~1.4.0″,”jquery-placeholder”: “~2.0.7”.  If you run composer, it should grab these files for you (if you have composer installed just open up a command prompt, navigate to the foundation home directory you unzipped and run “composer install”), otherwise just download the “full” version of foundation and copy those particular js files that you want over to your js directory and link them.

For the most part these directions should work for Mac or Linux as long as you find a SASS compiler for your OS.

And there you have it, a barebones Foundation scss deployment with all the magic and wonder that SASS brings to Zurb’s Foundation, without the fluff.  My next article will be on using the Foundation _settings.scss file and customizing your SASS to accommodate your website’s particular dimensions.