yaili / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.

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 | Project Task Board | Join the mailing list

Hotlinking

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

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:

bundle install
npm install

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

gulp build

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

gulp jekyll

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