From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
CSS Shell JavaScript HTML Ruby
Caleb-Ellis Merge pull request #1910 from barrymcgee/fix-accordion-toggle
Fix accordion toggle so it opens & closes
Latest commit b314b3d Jul 19, 2018
Failed to load latest commit information.
.github Update issue templates (#1905) Jul 2, 2018
_jekyll Simplify baseline utility + add example page (#1828) May 21, 2018
docs Add Baseline grid docs page Jul 16, 2018
examples Ensure only button targets are toggled Jul 19, 2018
gulp Set performance benchmarks and thresholds (#1863) Jun 14, 2018
scss Bump to v1.8.0 Jul 16, 2018
.env Default env should be development May 26, 2017
.gitignore Spacing rewrite (#1610) Mar 27, 2018
.npmignore Only publish contents of /scss to NPM (#1837) May 29, 2018
.sass-lint.yml 1472: Build slider pattern (#1480) Dec 13, 2017
.spelling Add tagline to side navigation pattern (#1336) Sep 15, 2017
.travis.yml Add parker tool to set stylesheet benchmarks Jun 12, 2018 Use UK English on Code of Conduct Oct 19, 2017 Update upstream branch to propose changes Jul 17, 2017
Gemfile Vertically align 'Menu' toggle on S screens (#1121) Jun 21, 2017
Gemfile.lock Vertically align 'Menu' toggle on S screens (#1121) Jun 21, 2017
LICENSE Adding the LGPL 3 License Feb 23, 2015 Update README to point to @vanillaframewrk Twitter Oct 12, 2017
_config.yml Ignore docs from Jekyll Dec 18, 2017
gulpfile.js Add parker tool to set stylesheet benchmarks Jun 12, 2018
index.html Reduce vertical spacing on examples directory + prettify markup (#1778) Apr 25, 2018
package.json Auto-incremented minor version number to 1.8.0 Jul 16, 2018
redirects.yaml Add Flask app to serve docs Dec 18, 2017
run Update to ./run 2.2 Dec 13, 2017
yarn.lock Add parker tool to set stylesheet benchmarks Jun 12, 2018

Vanilla Framework

Build Status npm version Downloads devDependency Status Chat in #vanilla-framework on Freenode

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.

Documentation | Project Task Board | Join the mailing list


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.

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

Including Vanilla in your project via NPM

Pull down the latest version of Vanilla into your local node_modules folder 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:

// gulpfile.js
gulp.task('sass', function() {
  return gulp.src('[your-sass-directory]/**/*.scss')
    includePaths: ['node_modules']

Then reference it from your own Sass files, with optional settings:

// Optionally override some settings
$color-brand: #ffffff;

// Import the theme
@import 'vanilla-framework/scss/build';

// Add theme if applicable

If you don't want the whole framework, you can just @include specific parts - e.g. @include vf-b-forms.

Vanilla local development

The simplest way to run Vanilla framework is to first install Docker (Linux users may need to add your user to the docker group), and then use the ./run script to build the site:

./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:

./run serve

Once the containers are setup, you can visit in your browser to see the examples.

Building documentation pages

The documentation available at is built from the markdown files located in the /docs/ folder. You can also build the HTML documentation pages locally as follows:

snap install documentation-builder  # Install the documentation-builder tool
documentation-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 and join channel #vanilla-framework

Code licensed LGPLv3 by Canonical Ltd

With ♥ from Canonical