Welcome to the Responsive Foundation visual style guide!

This framework provides a foundational set of Sass and Javascript files intended to serve as the basis for responsive site development at BU.

The Foundation was created to share front-end assets among child themes of the Responsive Framework. (But you can use it for non-WordPress projects, too!)

Getting Started

Bower is the recommended installation method. Assumming you have Node.js installed, fire up your terminal and run the following from within your project directory.

# Move into your project directory
cd your-project

# Install Bower globally using NPM
npm install -g bower

# Install the 0.1.0 release of Foundation
bower install git@github.com:bu-ist/responsive-foundation.git#0.1.0

This framework provides no production-ready assets — the build process is entirely up to you.

For Responsive Framework we are using Grunt. Example Grunt configurations are included below.

Sass

Foundation comes with two components that can be imported separately in your project:

• Base — CSS Reset, Responsive Grid, Typography
• Theme — Base styles for the Responsive Framework theme

In your project's main SCSS file:

// your-project/css-dev/style.scss:

// Import base components
@import "burf";

// Import base theme
@import "burf-theme";

Example Grunt configuration using the grunt-contrib-sass plugin:

// your-project/Gruntfile.js:
sass: {
	options: {
		loadPath: "bower_components/responsive-foundation/css-dev"
	},
	files: {
		"style.css": "css-dev/style.scss"
	}
}

Javascript

Foundation also provides a small collection of Javascript files.

We recommend that you include these files as needed with Grunt using the grunt-contrib-concat and grunt-contrib-uglify plugins.

// your-project/Gruntfile.js:

// Concatenate all scripts in responsive-foundation/js-dev
// into your project as js/burf.js
concat: {
	files: {
		"js/burf.js": ["bower_components/responsive-foundation/js-dev/*.js"]
	},
},

// Optimize concatenated Foundation script for production
uglify: {
	files: {
		"js/burf.min.js": "js/burf.js"
	}
}