Skip to content
From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
Branch: master
Clone or download
lyubomir-popov address feedback on #2384 (part 1) (#2387)
* address feedback on #2384 (part 1)

* rename $table-layout to $table-layout-fixed

* add important to rules
Latest commit 627968f Jun 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update issue templates (#1905) Jul 2, 2018
docs address feedback on #2384 (part 1) (#2387) Jun 14, 2019
scss address feedback on #2384 (part 1) (#2387) Jun 14, 2019
tests Remove the parker report endpoint Jun 6, 2019
.env
.gitignore Use run script v3.4.1 May 17, 2019
.npmignore Only publish contents of /scss to NPM (#1837) May 29, 2018
.prettierrc.json Add Prettier config file Apr 29, 2019
.sass-lint.yml Prettier all the things Apr 29, 2019
.spelling Remove all old refs to /en/ Jun 12, 2019
.travis.yml Add large viewport test to Percy Jun 12, 2019
CODE_OF_CONDUCT.md Use UK English on Code of Conduct Oct 19, 2017
CONTRIBUTING.md Replace the repo address Jun 6, 2019
Gemfile Update Jekyll and deps Apr 29, 2019
Gemfile.lock 2016 - Update button paddings with and without icon Apr 29, 2019
LICENSE Adding the LGPL 3 License Feb 23, 2015
README.md Replace the repo address Jun 6, 2019
gulpfile.js Update travis for new docs structure May 8, 2019
package.json Update docs vanilla dependency to 2.0.1 Jun 12, 2019
redirects.yaml Add Flask app to serve docs Dec 18, 2017
renovate.json
run Use run script v3.4.1 May 17, 2019
yarn.lock Update docs vanilla dependency to 2.0.1 Jun 12, 2019

README.md

Vanilla Framework

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

You can’t perform that action at this time.