by canonical-web-and-design

canonical-web-and-design / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent l...

447 Stars 102 Forks Last release: 4 days ago (v2.19.2) GNU Lesser General Public License v3.0 4.6K Commits 153 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Vanilla Framework

CircleCI build status npm version Downloads devDependency Status Chat in #vanilla-framework on Freenode This project is using for visual regression testing.

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 its patterns.

Documentation | Join the mailing list


You can link to the latest build to add directly into your markup like so, by replacing the x values with the version number you wish to link.

Including Vanilla in your project via NPM

Pull down the latest version of Vanilla into your local

folder and save it into your project's dependencies (
) as follows:
npm install --save-dev vanilla-framework

Now ensure that your SASS builder is including modules from

. E.g. for Gulp:
// gulpfile.js
gulp.task('sass', function () {
  return gulp.src('[your-sass-directory]/**/*.scss').pipe(
      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'; @include vanilla;

// Add theme if applicable

If you don't want the whole framework, you can just

specific parts - e.g.
@include vf-b-forms

Vanilla local development

The simplest way to run Vanilla framework is to first install Docker (Linux users may need to add your user to the

group), and then use the

script to build the site:
./run build  # Build the CSS into the ./build/ directory
# or
./run watch  # Dynamically watch for changes to the Sass files and build automatically

Viewing documentation

The documentation for the latest version of Vanilla framework is hosted at

The documentation markdown files live in the

folder, and you can view this documentation in the browser by running:

./run serve

Once the containers are setup, you can visit in your browser to see the documentation.

The examples directory contains example markup for each component of the framework, and these examples can be viewed in the browser at


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

  • Follow us on Twitter @vanillaframewrk
  • Read our latest blog posts at Ubuntu Blog
  • Talk to the team in IRC on and join channel #vanilla-framework, alternatively join our workspace on Slack

Code licensed LGPLv3 by Canonical Ltd

With ♥ from Canonical

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.