Vanilla Framework
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, Join the mailing list
Hotlinking
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="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />
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').pipe(
sass({
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/vanilla';
@include vanilla;
// 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 documentation
The documentation for the latest version of Vanilla framework is hosted at https://docs.vanillaframework.io.
The documentation markdown files live in the docs folder, and you can view this documentation in the browser by running:
./run serve
Once the containers are setup, you can visit http://0.0.0.0:8101/ in your browser to see the documentation.
The examples directory contains example markup for each component of the framework, and these examples can be viewed in the browser at http://0.0.0.0:8101/examples/.
Community
Keep up to date with all new developments and upcoming changes with Vanilla.
- Follow us on Twitter @vanillaframewrk
- Read our latest blog posts at Ubuntu Blog
- Talk to the team in IRC on irc.freenode.net and join channel #vanilla-framework, alternatively join our workspace on Slack
Code licensed LGPLv3 by Canonical Ltd
With ♥ from Canonical