Vanilla Framework

Vanilla is a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.

See the docs Vanilla on GitHub
Lightweight pictogram

Lightweight

Vanilla contains a responsive CSS grid, basic style for HTML elements and a selection of key useful patterns and utility classes that you can extend.

Composable pictogram

Composable

Vanilla is designed to be composable — you can include the whole framework to avail of all styles or you can use only what you need for your specific project.

Open source pictogram

Open source

Anyone can contribute to Vanilla, improve it and extend it. All the code is available on GitHub and is licensed under LGPLv3 by Canonical.

Quick start

The recommended method of including Vanilla Framework in your project is via NPM. You can then simply include the framework in your SCSS files and compile.

For other methods, please see the advanced usage docs.

npm install --save-dev vanilla-framework
export SASS_PATH=`pwd`/node_modules:${SASS_PATH}

// Add to your main build scss file the following line
@import 'vanilla-framework/scss/build'

Guidelines

If you are contributing to Vanilla, make sure to read and follow these guidelines.

Downloads

GitHub icon

Vanilla Framework

Use our CSS framework to start building your project.

Download Vanilla Framework

See the release notes for details on the latest updates.
Sketch icon

Vanilla Design

Get a Sketch file of common design components.

Download Vanilla Design UI Kit

(2.4 MB)

Who’s using Vanilla

Canonical Ubuntu Landscape MAAS Juju Ubuntu Core Conjure Up Snapcraft Cloud Init

Subscribe to Vanilla updates

Know about new releases, features, blog posts, calls-for-help and more.