Vanilla Framework is an 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

• Using Vanilla
  • Hotlinking
  • Including Vanilla in your project via NPM
• Developing Vanilla
• Community

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" />

To get set up with Sass, add the sass and vanilla-framework packages to your project dependencies:

yarn add sass vanilla-framework

In the script that builds the CSS in your package.json, you should include the path to node_modules when looking for @imports. In this example, we have called the build script "build-css":

"build-css": "sass -w --load-path=node_modules src:dist --style=compressed"

Make a folder src/, create a file inside called style.scss and import Vanilla:

// Import the theme
@import 'vanilla-framework';
@include vanilla;

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

// Add theme if applicable

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

Now run yarn build-css, which will convert any Sass files in the src/ folder to CSS in the dist/ folder.

To watch for changes in your Sass files, add the following script to your package.json

"watch-css":  "yarn build-css && sass --load-path=node_modules -w src:dist --style=compressed"

If you're looking to contribute to the Vanilla project itself, start here.

• Code of conduct
• Reporting bugs and issues
• Working with the Vanilla project
• Pull requests
• Releasing Vanilla

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

Code licensed LGPLv3 by Canonical Ltd

With ♥ from Canonical