Configuring a Foundation Libsass Project

Setting up Foundation as a Libsass project can be confusing, especially if you’re not familiar with Node, Grunt, Bower and Git. I found quite a bit of discussion on how best to go about configuring everything but no definitive answer bubbled to the surface. In the following tutorial I’ll provide a set up that’s worked for me.

We’ll begin with a freshly created, Foundation Libsass project. The Foundation documentation does a good job explaining how to set this up, so I’ll refer you to that if you need instructions.

After the installation finishes, navigate to the folder containing your new project and delete the .git folder. Removing this folder will simplify things considerably with regards to source control. Otherwise you will have to wrangle with submodules.

Now let’s add a folder named custom underneath scss. Any custom SASS files for your application go inside this folder. Prepend all file names with an underscore as a convention for indicating that these files will be compiled into a larger file.

Open the app.scss file that Foundation created during installation. Beneath the foundation import statement you will add any custom files you eventually add to the folder we created in the previous step. I included an example below. The option to selectively include Foundation components is removed for brevity.

@import "settings";
@import "foundation";

@import "custom/blockquote",
"custom/blog",
"custom/fieldset",
"custom/footer",
"custom/form",
"custom/googlefonts",
"custom/img",
"custom/logo",
"custom/page",
"custom/panel",
"custom/pre";

We’re getting close to the finish line. Let’s install the Grunt copy plugin to place our files in convential content and scripts folders at the root of the web project. Open the command line, change the directory to that of your Foundation Libsass project and run the following command to install the plugin:

npm install grunt-contrib-copy --save-dev

Finally, open Gruntfile.js and replace it with the following code:

module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

        copy: {
            main: {
                files: [
                    // Vendor scripts.
                    {
                        expand: true,
                        cwd: 'bower_components/',
                        src: ['**/*.js'],
                        dest: '../scripts/'
                    },

                    // Custom scripts.
                    {
                        expand: true,
                        filter: 'isFile',
                        flatten: true,
                        src: [
                            'js/**.js'
                        ],
                        dest: '../scripts/'
                    },
                ]
            },
        },

        sass: {
            options: {
                includePaths: ['bower_components/foundation/scss']
            },
            dist: {
                options: {
                    outputStyle: 'compressed'
                },
                files: {
                    '../content/app.css': 'scss/app.scss'
                }
            }
        },

        watch: {
            grunt: { files: ['Gruntfile.js'] },

            sass: {
                files: 'scss/**/*.scss',
                tasks: ['sass']
            }
        }
    });

    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-copy');

    grunt.registerTask('build', ['sass', 'copy']);
    grunt.registerTask('default', ['build', 'watch']);

}

Open the command line, change the directory to your Foundation Libsass project and run grunt build.

With this command, you copied the JavaScript and CSS resources to their respective root folders, scripts and content. Update the references to these directories in your HTML and you’re ready to start developing.

Optimization Grunt Git Zurb Foundation