A simple extensible CSS framework, written in Sass.
Vanilla Framework contains a basic CSS grid and pattern classes, and is designed to be extended either directly or by creating extension themes.
Project homepage | Documentation
On the project homepage, find the link to the latest build to add directly into your markup:
<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />
Install the Node package into your project:
npm install vanilla-framework # Installs at ./node_modules/vanilla-framework
Then reference it from your own Sass files, with optional settings:
// Optionally override some settings
$brand-color: #ffffff;
// Import the framework
@import "../node_modules/vanilla-framework/scss/vanilla";
// Run the framework
@include vanilla;
You can override any of the settings in _global-settings.scss.
If you don't want the whole framework, you can just @include
specific modules - e.g. @include vf-forms
.
- ubuntu-vanilla-theme (alpha)
- canonical-vanilla-theme (alpha)
Keep up to date with all new developments and upcoming changes with Vanilla.
- Follow us on Twitter @UbuntuDesigners
- Read our latest blog posts at Canonical Blog
- Talk to the team in IRC on
irc.freenode.com
and join channel#canonical-webteam
Code licensed LGPLv3 by Canonical Ltd..
With ♥ from Canonical