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
1 | sudo apt-get install ruby-full |
2) To install gem
1 | gem install bundler |
3) To install node.js
1 | curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - |
1 | sudo apt-get install -y nodejs |
4) To install Git
1 | sudo apt-get install git |
5) To access admin/root
1 | sudo su |
6) To install Foundation framework core files
1 | npm install -g foundation-cli bower gulp |
exit from root access
1 | 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 compilerDownloading 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
1 | cd sampleapp |
1 | foundation watch |
1 | npm install foundation-apps --save |
1 | 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
1 | sudo su |
1 | npm install -g browser-sync |
1 | cd sampleapp |
1 | 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
1 Comment
How to create an app in Node.js - Anil Labs · August 29, 2016 at 1:07 pm
[…] We have discussed it earlier Foundation front-end framework installation […]