Foundation 5 Setup

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Foundation 5 Setup

Setup Foundation 5

There are 3 ways to setup Foundation 5

A Simple Static Setup

Navigate to Downloads, here you should see 3 options. Click on the Download Link Under “Default CSS”. You will be presented to download a zip file. Save it in your favorite location. Once the download is completed, unzip it. You should see all the files required to get started off with a simple static CSS. You can launch index.html to continue.

A Customized Static Setup

This setup is for a more advanced user, who know what Foundation is all about. Here you can customize a few global parameters of Foundation like No. of columns in the grid system, Primary color, Secondary color etc.

So lets head to Customize CSS. Click on the “Customize Foundation”. You will be presented with a list of options to be customized. Once you are done modifying, you can click on “Download Custom Build”. After the download is completed, you can unzip and check the contents. This will the same as above, but the styles & scripts are modified as per your selection.

A Sassy Setup

This setup is for those, who would like to take complete control of the Foundation & would like to integrate custom css generation at run time using a SASS compiler (or a CSS preprocessor).

So this is how you set up Foundation 5 with SASS/SCSS

Mac/*nix systems

By default Mac/*nix systems come with Ruby preinstalled. You can check this by navigation to your terminal (under utilities) and running ruby -v . This should prompt back with the version of Ruby installed. You can upgrade your Ruby to the latest version using the RVM (Ruby Version Manager). Steps here or here.

Windows

Navigate here. Download the latest stable version. Run the exe. When you are running the set up, make sure you  check “Add Ruby Executables to your PATH“. This will make Ruby available globally from any command window.

All users can run  ruby -v to validate the install. Lets set up SASS. SASS is a ruby gem.

Wikipedia

RubyGems is a package manager for the Ruby programming language that provides a standard format for distributing Ruby programs and libraries (in a self-contained format called a “gem”), a tool designed to easily manage the installation of gems, and a server for distributing them. It is analogous to EasyInstall for the Python programming language. RubyGems is now part of the standard library from Ruby version 1.9.

We can check the version of gem by  gem -v.

From V5, Foundation uses Grunt & Bower to manage the project. So lets install them.  Open your terminal/prompt and run the below command (assuming you have node installed. How to setup Node)

windows
npm install -g bower grunt-cli

Mac
sudo npm install -g bower grunt-cli

Next, lets install foundation gem
gem install foundation

Now, lets create a new folder on your machine and name it  foundationDemo. And navigate to that folder using the CD command from terminal/prompt.

Now, lets set up a new foundation project. Execute the below command

foundation new mySite --libsass  where mySite is name of the project & libsass is a SASS compiler (more here).

This is a sweet scaffolding command, that will set up your foundation project, from scratch. After the process is completed, you will see a bunch of files inside your mySite folder.

  • bower_components : All the dev dependencies, including foundation scss source files
  • css : Output of our compiled scss files will be dumped here
  • js : Our app related js files
  • node_modules : Our project related dependencies, including grunt & grunt-sass
  • scss : Our source scss files will be placed here.
  • bower.json : Config to load Foundation
  • Gruntfile.js : Our task runner config. This would automate the process of building CSS from SCSS files
  • index.html : our main page
  • package.json : All our project dependencies are stored here.
  • Ignoring readme.md, humans.txt & robots.txt (they are self explanatory)

You can read this article on what foundation is all about or this article to leverage Foundation SASS


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page