Foundation front-end framework installation

In this post, I will explain about how to install Foundation Frontend Framework. A Framework for any device, medium and accessibility. Foundation is responsive front-end framework. Using this framework we can design responsive websites and apps. Foundation is semantic, readable, flexible and customizable.

Foundation front-end framework installation by Anil Kumar Panigrahi

With below commands we can install it and run the application.

Commands Based on Ubuntu:

1) To install Ruby

sudo apt-get install ruby-full

2) To install gem

gem install bundler

3) To install node.js

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -

sudo apt-get install -y nodejs

4) To install Git

sudo apt-get install git

5) To access admin/root

sudo su

6) To install Foundation framework core files

npm install -g foundation-cli bower gulp

exit from root access

foundation new sampleapp

Output:

Few questions for application and select the answers by arrows
? What are you building today? A website (Foundation for Sites)
? What’s the project called? (no spaces) Sample
? Which template would you like to use? Basic Template: includes a Sass compiler

Downloading the project template…
Done downloading!

Installing dependencies…

******************

You’re all set!

✓ New project folder created.
✓ Node modules installed.
✓ Bower components installed.

Now run foundation watch while inside the Sample folder.

7) To go to application folder

cd sampleapp

foundation watch

npm install foundation-apps --save

npm start

Output:

[18:31:51] Using gulpfile ~/Sample/gulpfile.js
[18:31:51] Starting ‘sass’…
[18:31:52] Finished ‘sass’ after 1.05 s
[18:31:52] Starting ‘default’…
[18:31:52] Finished ‘default’ after 21 ms

8) To install browsersync

sudo su

npm install -g browser-sync

cd sampleapp

browser-sync start --server --files "css/*.css"

Output:

[BS] Access URLs:
————————————
Local: http://localhost:3000
External: http://[IP]:3000
————————————
UI: http://localhost:3001
UI External: http://[IP]:3001
————————————
[BS] Serving files from: ./
[BS] Watching files…

Few sites for reference:

To install Browsersync
https://www.browsersync.io/#install

To install Ruby:
https://www.ruby-lang.org/en/documentation/installation/

To install node.js
https://nodejs.org/en/download/package-manager/

To install Foundation framework
http://foundation.zurb.com/apps/docs/#!/installation