Vanilla documentation

Everything you need to get your project started with Vanilla.

Get started


You can use Vanilla in your projects in a few different ways. See Building with Vanilla and Customising Vanilla for more in-depth setup instructions.

Install

The recommended way to get Vanilla is with yarn:

yarn add vanilla-framework

Or npm:

npm install vanilla-framework

This will pull down the latest version into your local node_modules folder and save it into your project's dependencies in package.json.

You can now reference Vanilla from your main Sass file - note that the path to node_modules might be different for your project:

// Import the framework
@import 'node_modules/vanilla-framework/scss/vanilla';

// Include all of Vanilla Framework
@include vanilla;

For information on overriding settings and importing only parts of Vanilla, see Customising Vanilla.

Hotlink

You can add Vanilla directly to your markup:

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


Download

Download the latest version of Vanilla from GitHub.



Local development

To make improvements to Vanilla itself, please follow the instructions on the project’s README.md.