node package manager

vanilla-framework

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

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

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 install

Finally, install Docker.

You can then compile your Sass changes into build/css/build.css by running:

./run build

Or you can run a local server to view your changes live with:

gulp jekyll

Building documentation pages

The documentation available at https://docs.vanillaframework.io 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.

Community

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.net and join channel #vanilla-framework

Code licensed LGPLv3 by Canonical Ltd

With ♥ from Canonical