UBUNTU DESIGN SYSTEM

Vanilla Framework.

Hero

The crew

  • Senior Visual Designer - Karl Waghorn-Moyce
  • Front-end Developer - Anthony Dillon and Caleb Ellis

Objectives

Vanilla is a simple extensible CSS framework written in Sass, by the Ubuntu Web Team. I lead the projects design for existing and new components, updating documentation and continuing to evolve the design system.

View website

Sprint.

This was a sprint that we had at the beginning of the year. From this several decisions were made that influenced the future of Vanilla, so it was a useful process to document and highlight.

Vanilla workshop

Process diagram.

This shows the thinking that should happen before you start working on a pattern/want to propose a new pattern. Our process

Vanilla process

What we achieved.

Vanilla website Vanilla documentation Vanilla documentation color Vanilla documentation buttons

Open source design.

We document all our design specs on GitHub. Each component should have its own folder, and include two files: Detailed written spec and a Visual spec.

Vanilla github

Sketch library.

A Sketch file of common design components in the framework, it's regularly updated to stay in sync with releases.

Vanilla sketch library

Responsive layout.

All components are responsive across our desired breakpoints of Desktop, Tablet and Mobile.

Vanilla responsive