How to install Zurb's Foundation 6 with SASS compiler using the CLI on an Ubuntu PC p.1

Written by Kostas Mavrokefalos

When it comes to Web Development writing pure code Zurb's Foundation 6 is one of the most reliable and easy to use Frameworks.

Foundation 6 provides the user with all the necessary tools to build a modern fully responsive Web Site.

The API starts showing its capabilities very soon, but what makes it rocket is the CLI functionality it provides.

For a beginner user this might look overwhelming, but in fact there is no reason to avoid the CLI. In fact propably you will come against the necessity to use it very soon. This will be the case if you try to customize an Orbit Slider or use the powerfull SASS styling language.

Our case study is that we need to install Foundation 6 on our computer in order to start our new super Responsive Web Site:

So the question is why i write this Tutorial since there is the Official Zurb Page that describes the process thoroughly? The answer is that i will try to create a Working Environment that will make you feel really professional and Boost your Creativity:

  1. Synchronize your browser to reflect your code the moment you click SAVE
  2. Set up GULP to do some automated work for you

Also always be carefull and prefer using the 2 below tips:

  1. Read carefully the possible errors the Terminal gives you and install all the missing dependencies (if any)
  2. Don't forget to use sudo in all your commands

I will try to keep the Tutorial short in order to show the simplicity of the process and to provide with an easy to use reference to everybody that needs to build a new project and needs all the commands in one place.

We will need to access the Ubuntu Terminal Ctrl+Alt+T.

Foundation 6 template setup requires nodejs and git. Install these via apt-get or whatever package manager, or download from nodejs.org and git-scm.com

  1. $sudo apt-get install node
  2. $sudo apt-get install git
  3. $sudo npm -gS install bower
  4. $sudo npm install --global foundation-cli
  5. run as user in a project parent directory: mkdir project_folder $ cd project_folder
  6. $ foundation new
  7. Choose Foundation for sites default template and name your project newproject
  8. $ cd newproject
  9. $ foundation watch: This will watch for any SCSS changes and update the app.css file.

  10. Now we will install the Browser Sync functionality. We need to open a new Terminal tab, press Ctrl+Shift+T over a Terminal window to open a new Terminal Tab and type: browser-sync start --server --files "**/*" and let it reflect all our code alterations on the Browser. This will open a tab in our default browser. So basically we have 2 Terminal Tabs working in the same time and updating every time we click SAVE

  11. Now we are ready to start programming, but before that we need to add some more lines. We need to create a _custom.scss file inside the scss folder and then import it to the scss/app.scss with the command @import 'custom'; without the _ or the extension on the top of the file.

  12. We are Finished!!!. Now we can write our code in index.html and click SAVE, this will refresh the browser window automatically and compile CSS into SASS that you can see inside the css/app.css file

I will setup GULP and show you how to minify JS and CSS and perform various tasks in the next Tutorial.

Hope you enjoy the tutorial and take advantage of this great Zurb's Framework that can really make your life easier.

Have a great 2017 and let me know of any questions through the commenting system.

Resources: The top image was downloaded from:https://alpha.wallhaven.cc Browser Sync: https://www.browsersync.io/ Usefull info: http://foundation.zurb.com/sites/docs/