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.
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.
Including Vanilla in your project via NPM
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.
Vanilla local development
./run build # Build the CSS into the ./build/ directory# or./run watch # Dynamically watch for changes to the Sass files and build automatically
Viewing patterns in the browser
The examples directory contains example markup for each component of the framework.
To view these examples in the browser, run the local server with:
Once the containers are setup, you can visit http://0.0.0.0:8101/vanilla-framework/ in your browser to see the examples.
Building documentation pages
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.
- Follow us on Twitter @vanillaframewrk
- Read our latest blog posts at Canonical Blog
- Talk to the team in IRC on
irc.freenode.netand join channel
With ♥ from Canonical