Need help with vanilla-framework?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

canonical-web-and-design
481 Stars 102 Forks GNU Lesser General Public License v3.0 5.1K Commits 105 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

vanilla Vanilla Framework

CircleCI build status npm version Downloads devDependency Status Chat in #vanilla-framework on Freenode This project is using Percy.io for visual regression testing.

Vanilla Framework is an 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.


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'],
    })
  );
});

Please note, that to provide the best browser support you should also include autoprefixer as a build step.

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
.

Community

Keep up to date with all new developments and upcoming changes with Vanilla.

Code licensed LGPLv3 by Canonical Ltd

With ♥ from Canonical

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.