Recently several clients have requested that websites is built using Foundation. For those of you who don’t what that is click here.
It basically is a responsive-design framework that is built mobile-first, meaning mobile-view is designed first and then expanded up to bigger screens.
If you want to install Foundation with SASS support in your website do the following:
# Go to project root in terminal
[code lang=”bash”]
sudo gem install foundation
sudo npm install -g bower grunt-cli
foundation new MY_PROJECT
[/code]
This installs bower and grunt for your project and also creates a new foundation-installation with the name MY_PROJECT. Your foundation SASS-files are now located at “MY_PROJECT/scss/”.
Now we need to edit a few files to get it working. Edit “MY_PROJECT/scss/app.scss” like this:
[code lang=”css”]
@import “../bower_components/foundation/scss/foundation/components/_global”;
@import “settings”;
@import “../bower_components/foundation/scss/foundation”;
// Or selectively include components
// @import
// “../bower_components/foundation/scss/foundation/components/accordion”,
// “../bower_components/foundation/scss/foundation/components/alert-boxes”,
// “../bower_components/foundation/scss/foundation/components/block-grid”,
// “../bower_components/foundation/scss/foundation/components/breadcrumbs”,
// “../bower_components/foundation/scss/foundation/components/button-groups”,
// “../bower_components/foundation/scss/foundation/components/buttons”,
// “../bower_components/foundation/scss/foundation/components/clearing”,
// “../bower_components/foundation/scss/foundation/components/dropdown”,
// “../bower_components/foundation/scss/foundation/components/dropdown-buttons”,
// “../bower_components/foundation/scss/foundation/components/flex-video”,
// “../bower_components/foundation/scss/foundation/components/forms”,
// “../bower_components/foundation/scss/foundation/components/grid”,
// “../bower_components/foundation/scss/foundation/components/inline-lists”,
// “../bower_components/foundation/scss/foundation/components/joyride”,
// “../bower_components/foundation/scss/foundation/components/keystrokes”,
// “../bower_components/foundation/scss/foundation/components/labels”,
// “../bower_components/foundation/scss/foundation/components/magellan”,
// “../bower_components/foundation/scss/foundation/components/orbit”,
// “../bower_components/foundation/scss/foundation/components/pagination”,
// “../bower_components/foundation/scss/foundation/components/panels”,
// “../bower_components/foundation/scss/foundation/components/pricing-tables”,
// “../bower_components/foundation/scss/foundation/components/progress-bars”,
// “../bower_components/foundation/scss/foundation/components/reveal”,
// “../bower_components/foundation/scss/foundation/components/side-nav”,
// “../bower_components/foundation/scss/foundation/components/split-buttons”,
// “../bower_components/foundation/scss/foundation/components/sub-nav”,
// “../bower_components/foundation/scss/foundation/components/switches”,
// “../bower_components/foundation/scss/foundation/components/tables”,
// “../bower_components/foundation/scss/foundation/components/tabs”,
// “../bower_components/foundation/scss/foundation/components/thumbs”,
// “../bower_components/foundation/scss/foundation/components/tooltips”,
// “../bower_components/foundation/scss/foundation/components/top-bar”,
// “../bower_components/foundation/scss/foundation/components/type”,
// “../bower_components/foundation/scss/foundation/components/offcanvas”,
// “../bower_components/foundation/scss/foundation/components/visibility”;
[/code]
Also edit your “MY_PROJECT/scss/_settings.scss” and update the import to this:
[code lang=”css”]
@import “../bower_components/foundation/scss/foundation/functions”;
[/code]
I usually like having SASS and CSS files in distinct folders so I have one folder at /sass for SASS and one folder for CSS at /css.
Open up your main sass file (i.e. /sass/style.scss) for edit:
[code lang=”css”]
// Import Foundation with settings
@import “../MY_PROJECT/scss/app”;
// Other stuff here
// …
[/code]
To install GRUNT, make a grunt folder and create a file named ‘package.json’ like this:
[code lang=”javascript”]
{
“name”: “MyProject”,
“version”: “0.0.1”,
“description”: “Node for grunt, compile scss”,
“private”: true,
“license”: “MIT”,
“devDependencies”: {
“grunt”: “~0.4.2”,
“grunt-contrib-watch”: “*”,
“grunt-contrib-compass”: “*”,
“grunt-contrib-concat”: “*”,
“grunt-contrib-uglify”: “*”,
“grunt-contrib-jshint”: “*”,
“grunt-rem-to-pixels”: “^0.2.0”
}
}
[/code]
For more information visit npm Documentation.
Visit grunt folder and execute:
[code lang=”bash”]
npm install
[/code]
Now create a GRUNT file named ‘gruntfile.js’ like this:
[code lang=”javascript”]
module.exports = function(grunt) {
var tfThemeDir = “../”;
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
compass: {
dist: {
options: {
cssDir: tfThemeDir + “/css”,
sassDir: tfThemeDir + “/sass”,
imagesDir: tfThemeDir + “/images”,
javascriptsDir: tfThemeDir + “/js”,
outputStyle: ‘compressed’
}
}
},
rem_to_px: {
options: {
baseFontSize: 16,
removeFontFace: true
},
dist: {
src: [ tfThemeDir + ‘/css/**/*.css’ ],
dest: tfThemeDir + ‘/stylesheet-fallbacks/’
}
},
jshint: {
files: [ tfThemeDir +’/js/scripts.js’]
},
watch: {
css: {
files: [ tfThemeDir +’/sass/**/*.scss’],
tasks: [‘compass’]
},
js: {
files: [ tfThemeDir +’/js/**.js’],
tasks: [‘uglify’]
}
},
uglify: {
dist: {
files: [ tfThemeDir + ‘/js/scripts.min.js’ ]
}
}
});
// Load the plugin that provides the “uglify” task.
grunt.loadNpmTasks(‘grunt-contrib-watch’);
grunt.loadNpmTasks(‘grunt-contrib-compass’);
grunt.loadNpmTasks(‘grunt-contrib-jshint’);
grunt.loadNpmTasks(‘grunt-contrib-concat’);
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
/** @link https://github.com/lohmander/grunt-rem-to-px */
grunt.loadNpmTasks(‘grunt-rem-to-pixels’);
};
[/code]
For more information visit Grunt Documentation.
Now compile your sass file by executing:
[code lang=”bash”]
grunt compass
[/code]
SASS files in /sass/ are compiled into CSS files in /css/.
Now you should have running Foundation installation with compiled CSS from SASS via GRUNT. You can add your other stylesheets as neccesary below the Foundation import. Settings for Foundation are specified at “MY_PROJECT/scss/_settings.scss”.
The good thing of doing a installation like this is that you can use bower to update your Foundation installation in isolation and still you include Foundation and it’s settings in your project. Do this to update your Foundation installation:
[code lang=”bash”]
cd MY_PROJECT
bower update
[/code]
Hope you found this guide useful.