vanilla-framework
    Overview
    Discussions
    Alternatives
    Reviews
    Code
    Tutorials
    Playground
    Chat
    Versions

vanilla-framework

A simple, extendable CSS framework.

2.3.0  •  Updated 7 months ago  •  by canonical-web-and-design  •  GNU Lesser General Public License v3.0 only

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.

Code licensed LGPLv3 by Canonical Ltd

With ♥ from Canonical

Popularity

Weekly Downloads
1.4K
Stars
385

Maintenance

Development

Last ver 7 months ago
Created 5 years ago
Last commit 2 months ago
14 hours between commits

Technology

Node version: 10.15.2
219.4K unpacked

Compliance

GNU Lesser General Public License v3.0 only
OSI Approved
0 vulnerabilities

Contributors

25 contributors
Karl Williams
Maintainer, 295 commits, 176 merges, 94 PRs
Works at Canonical
Karl Waghorn-Moyce
Maintainer, 231 commits, 108 merges, 110 PRs
Works at ubuntudesign
Anthony Dillon
Maintainer, 26 commits, 217 merges, 120 PRs
Works at Anthony Dillon
lyubomir
Maintainer, 175 commits, 55 merges, 134 PRs
Barry McGee
Maintainer, 25 commits, 193 merges, 259 PRs
Works at CanonicalLtd
Caleb Ellis
Maintainer, 76 commits, 78 merges, 133 PRs
Works at CanonicalLtd

Tags

ubuntu
vanilla
framework
CSS
SASS
SCSS
mixin
module
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.