Copy over relevant assets into a ./Layouts
directory.
Make this file to ignore installable components.
.gitignore
app/node_modules
app/public/bower_components
cd into /app:
- $
npm install
- press enter for everything
- $
npm i -D connect-livereload gulp gulp-sass tiny-lr
- $
npm i -S express
Make sure your paths are correct and pointing to public/
:
.pipe(gulp.dest('./public/css'));
gulp.watch('./public/*.html', notifyLiveReload);
gulp.watch('./public/css/*.css', notifyLiveReload);
app.use(express.static(__dirname + '/public'));
Create a .bowerrc
file in your ./app
directory. This tells bower to install bower_components
in ./app/public
instead of ./app
.
Write the contents of .bowerrc
:
{
"directory": "public/bower_components"
}
Now you can initialize your bower conf
- $
bower init
- press enter for everything
This creates ./app/bower.json
Now install foundation
- $
bower install foundation
Make sure all the relevant directories and files are in /app/public
index.html
make a proper html5 index.html file
be sure to LINK to /css/styles.css
(which doesn't exist yet)
/sass/styles.scss
make the sass directory and put a styles.scss file in it
write the content for /sass/styles.scss
:
body{ background-color:red }
a blank file will break sass compiler
/css
make an empty css directory. The gulp task will compile your styles.scss into a styles.css file here.
/images
copy your image assets into here
/js
copy necessary js assets into here
Then in terminal, run:
$ gulp
An express webserver is running at http://localhost:4000
Open the url in your browser
in osx
$ open http://localhost:4000
Make sure the LiveReload icon is turned ON for the page.
this is off
this is on
Test your styles.scss
.
Make sure your index.html is linking to
<link rel="stylesheet" href="/css/styles.css">
Open your styles.scss
file and save it. You should see the gulp task running in terminal.
Chrome should update with the red background. You can also check if your css file compiled correctly by checking that the styles.css
file contains the red background color.
Test complete.
Add to <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/bower_components/modernizr/modernizr.js"></script>
Add before </body>
:
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Create directory /partials
inside /sass
Create _settings.scss
inside /partials
Copy /bower_components/foundation/scss/foundation/_settings.scss
and paste into your /partials/_settings.scss
Fix the functions @import
in the _settings.scss
to be:
@import "../public/bower_components/foundation/scss/foundation/functions";
At the top of your styles.scss
, include:
@import "partials/settings";
@import "../public/bower_components/foundation/scss/foundation";
Add some Foundation markup to your index.html
. Save.
Re-save your styles.scss
(it will recompile with the foundation styles)