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.


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.


You can add Vanilla directly to your markup:

<link rel="stylesheet" href="" />


Download the latest version of Vanilla from GitHub.

Local development

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