Vanilla Framework

Vanilla Framework is a simple extensible CSS framework, built using Sass and is designed to be used either directly or by using themes to extend or supplement it's patterns.

Project homepage | Documentation | Project Task Board | Join the mailing list

Hotlinking

On the project homepage, find the link to the latest build to add directly into your markup:

<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />

Including Vanilla in your project

Pull down the latest version of Vanilla into your local node_modules folder and save it into your project's dependencies (package.json) as follows:

npm install --save-dev vanilla-framework

Now ensure that your SASS builder is including modules from node_modules. E.g. for Gulp:

// gulpfile.js
gulp.task('sass', function() {
  return gulp.src('[your-sass-directory]/**/*.scss')
  .pipe(sass({
    includePaths: ['node_modules']
  }))
});

Then reference it from your own Sass files, with optional settings:

// Optionally override some settings
$color-brand: #ffffff;

// Import the theme
@import "vanilla-framework/scss/vanilla";

// Add theme if applicable

If you don't want the whole framework, you can just @include specific parts - e.g. @include vf-b-forms.

Vanilla local development

To develop on Vanilla itself, simply pull down the project and make changes.

Once you've made your changes you can use the run script to build and test your code:

./run          # List available commands
./run develop  # Watch files and rebuild when changes happen
./run test     # Run the Sass linter
./run build    # Watch files and rebuild when changes happen

Community

Keep up to date with all new developments and upcoming changes with Vanilla.

• Follow us on Twitter @UbuntuDesigners
• Read our latest blog posts at Canonical Blog
• Talk to the team in IRC on irc.freenode.com and join channel #vanilla-framework

Code licensed LGPLv3 by Canonical Ltd..

With ♥ from Canonical