It was really difficult to get foundation-sites working for the project. At first, I was using a npm version of it, that wasn't working. Then I used a bower version of it that wasn't working. Along the way I struggled to figure out how my gulp file needed to be set up and what dependencies were required. Foundation said that 'autoprefixer' was required. So I Googled 'Foundation Sass Autoprefixer'. Semi-helpful results. Here were some semi-helpful resources in that process. Not super fruitful, though at least I understand gulp a tiny bit better:
https://github.com/sindresorhus/gulp-autoprefixer
http://www.sitepoint.com/simple-gulpy-workflow-sass/
Foundation still didn't import properly, so I looked up a totally different solution. I found that the MOST helpful thing to do was set up a foundation demo project, install it, and copy their project structure (almost exactly), then tweak until it matched my project structure a bit more.
http://foundation.zurb.com/sites/docs/starter-projects.html
The foundation cli didn't work, and yeti took too long to set up, so I downloaded the zip template and ran npm install, bower install, and npm start like the docs said, then inspected all the files in the project to see what I needed to do differently.
Then, in my HIC Project I decided to wipe all node and bower files and start integrating moving over dependencies:
Deleted:
bower_components
node_modules
bower.json
gulpfile.js
package.json
Copied over from the template:
.bowerrc
bower.json
gulpfile.js
package.json
I noticed that the template has the index file at the root, though I wanted my structure to have a public folder, so I modified the destination directory of the css to be 'public/styles' instead of 'css' at the project root.
Then ran npm install, bower install and gulp on the project.
Then I tested the 'app.scss' to see if it was properly compiling scss to css:
body{
// KELLI-NOTES: First CSS Test
color: red;
background-color: pink;
// KELLI-NOTES: This Tests Inline Styles
h1{
// KELLI-NOTES: This Tests Autoprefixer. If working properly, the prefixes will show for filter.
filter: grayscale(10%);
}
}
I knew that 'autoprefixer' was a required dependency for Foundation-Sites, so that css filter test is just in there to see if the gulp task prepends -webkit- to it. After running gulp, if everything was set up correctly, I would have an app.css in my public/styles/ directory. And the output would look like this:
body {
color: red;
background-color: pink; }
body h1 {
-webkit-filter: grayscale(10%);
filter: grayscale(10%); }
And if everything is linking correctly, my index.html will have a pink background. (It doesn't auto-reload yet though)
Next, I imported foundation into the main app.scss file. I basically just copied the entire app.scss from the demo project.
Then, i changed the import link for settings, to partials/foundation_settings because that was where my settings file was. Saving app.scss again should run gulp, and that sould compile a new styles/app.css. Inspecting the app.css you should see all of foundation compiled into the file.
Refactoring, I didn't like all the @include items clogging up my main app.scss so I moved them all to a _foundation.scss partial inside partials and imported them in the same order they were loaded. My resulting app.scss looked like this:
@charset 'utf-8';
@import 'partials/foundation_settings';
@import 'foundation';
@import 'motion-ui';
@import 'partials/foundation';
// STYLES
body{
// KELLI-NOTES: First CSS Test
color: red;
background-color: pink;
// KELLI-NOTES: This Tests Inline Styles
h1{
// KELLI-NOTES: This Tests Autoprefixer. If working properly, the prefixes will show for filter.
filter: grayscale(10%);
}
}
Saving the app.scss again, gulp should run fine without errors, and the app.css file should still compile.
Then I inspected the index.html in the demo project and saw that it required some js files from the bower_components. Since our directory structure has index.html in a separate public directory, linking to the js files in the bower_components won't work, since the server is serving from public as root and bower_components is outside of that scope. So, I (hackily) copied the required js files from bower_components into my own scripts directory inside of public (note that I use scripts instead of js because scripts mimics the Airship project setup.) The files I needed to copy over were:
app.js
foundation.js
jquery.js
what-input.js
I basically just copied all of that from the files required in the demo index.html.
Now that everything should run, I wanted to test if Foundation was working. You can already see if the general Foundation styles are working because the fonts/styles will look different. You can toggle @import 'foundation'; on and off, and see the difference.
However, to test if settings truly work, you can toggle on and off some features within the 'partials/foundation.scss' file. For instance, I commented out @include foundation-typography; and it made all the font styles ugly. lol. So it's working. You can comment out stuff you don't think you will need for the project. Sooo, at this point, DO comment out everything that you think is not needed. :) You will see that it makes your app.css smaller, to get rid of stuff that is not needed.
After that's all set up, test that all the normal foundation stuff that you do need still works (columns, nav bar, etc).
So browser-sync replaces LiveReload (it does basically the same thing plus more!). Read up more on browser-sync when you have time. I basically followed the initial directions, stopping where it says 'Ruby SASS & Source Maps'. Minor difference is our output directory, which is ./public, so that needs to be fixed everywhere it references the app directory. It takes careful poking and hacking to insert the browserSync stuff in our already-existant gulpfile. See if you can do it yourself before scrolling down to see my file...
My Final gulpfile.js looks like this. It might not exactly look like yours, though it should be very similar...
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync').create();
var sassPaths = [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
// Static Server + Watching SCSS/HTML files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./public"
});
gulp.watch("scss/**/*.scss", ['sass']);
gulp.watch("public/*.html").on('change', browserSync.reload);
});
// Compiles SCSS, Autoprefixes, Runs BrowserSync
gulp.task('sass', function() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('public/styles'))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Restart gulp. If it runs browser-sync properly, your terminal should tell you the port you can view the site on (it also tells you the ip you can view the site from your phone if you want to dev and preview on your phone!)
I looked at the "Zurb Template", which has a ton more crap. Too much crap? the good stuff in there is that it keeps bower components outside the public folder, and also uses browser sync...
SRC structure - could use this. mimics airship a bit
Asset Copying - could use this
Page Compilation - not needed, airship does this
Sass Compilation - UnCSS looks great, should look into this later
Javascript Compilation - looks great to include this, very SPA-like, and removes the need to manually copy over the required js files
Image Compression - awesome, wish i knew how this works
BrowserSync - i'm using this!
StyleGUide - wow.
In summary, the zurb template seems like overkill, though I'm super tempted to see if I can include UnCSS in the workflow. If you want to figure out if you can integrate UnCSS or image compression, that would be neat :D