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.
On the project homepage, find the link to the latest build to add directly into your markup:
Pull down the latest version of Vanilla into your local
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:
Then reference it from your own Sass files, with optional settings:
// Optionally override some settings// Import the theme// Add theme if applicable
If you don't want the whole framework, you can just
@include specific parts - e.g.
To develop on Vanilla itself, simply pull down the project and make changes.
To test it locally using our recommended tooling, you need to first install dependencies:
You need to have bundler installed
gem install bundler
You need to have node and npm. To install follow the installation instructions on this page.
bundle installnpm install
You can then compile your Sass changes into
build/css/build.css by running:
Or you can run a local server to view your changes live with:
snap install documentation-builder # Install the documentation-builder tooldocumentation-builder --base-directory docs --output-path docs/build
Now open the
docs/build/en/index.html file in your browser.
Keep up to date with all new developments and upcoming changes with Vanilla.
irc.freenode.netand join channel
With ♥ from Canonical