#Gulp livereload install

Check if all of the foundation components that you imported are compiled. You may need to stop and restart gulp, since you added new files to the project.In order for the webpage to render and scale properly on mobile devices, add this meta tag to the : It will look similar to the following, however your src paths may be slightly different: Īdd the script to initialize foundation after the above scripts and before the closing tag. Modify your index.htmlĪdd necessary script tags to import the foundation, jquery, and modernizer js files to the bottom of your file, before the closing tag. However, if you are only using certain foundation components, you can opt to use only the ones required for the components instead. Copy over js dependencies to /public/js/Ĭopy over the necessary js files from bower_component/foundation/js/ into /public/js.

Look at the main foundation.scss in the bower_components foundation scss folder to see all the available components.

Then import the Foundation components you want to 'foundation/components/'.

At the top of your styles.scss file, import the settings 'partials/settings'.

Copy the foundation _settings.scss partial from bower_components foundation into your sass/partials directory.

Set up your partials & import foundation components.

#Gulp livereload install

install foundation, bower install -S foundation.Setting Up SASS Foundation Initial Install Test LiveReload and check if the browser color changes automatically if you change the value of $bright.Also, if you open the styles.css file in SublimeText, you will see output css with: Write the 'hello world' of scss in the styles.scss file.include a link that loads /css/styles.css.Set up a public directory in your root directory.Set up a sass directory in your root directory.Set up gulpfile.js in your root directory.Ĭontents of gulpfile: var gulp = require('gulp') Initialize your project with a package.json file npm init Npm install -g bower Install the node modules requires for this project. If you already have installed these, you do not need to run these commands.

If you do not have npm, gulp, or bower on your computer you need to install them.

watches for any changes in the public directory, triggers live-reload.

watches for any scss changes, then compiles scss source into css.

Set up a boilerplate Gulp + Scss + LiveReload + Foundation 5 workflow that: Gulp + Scss + LiveReload + Foundation Goals