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.

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

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';
@include 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.

The simplest way to run Vanilla framework is to first install Docker (Linux users may need to add your user to the docker group), and then use the ./run 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

The documentation for the latest version of Vanilla framework is hosted at https://vanillaframework.io/docs.

The documentation markdown files live in the docs folder, and you can view this documentation in the browser by running:

./run serve

Once the containers are setup, you can visit http://0.0.0.0:8101/ 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 http://0.0.0.0:8101/examples/.

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 irc.freenode.net and join channel #vanilla-framework, alternatively join our workspace on Slack

Code licensed LGPLv3 by Canonical Ltd

With ♥ from Canonical