This repository has been archived by the owner. It is now read-only.
MAAS GUI Theme. Provides a HTML & CSS Framework to develop the UI of the MAAS app and other projects
CSS JavaScript Shell
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

MAAS GUI Framework

Build Status npm version Downloads devDependency Status

A extension of Vanilla framework, written in Sass. The framework is used as the front-end tool for MAAS (Metal as a Service) a cloud style offering for provisioning servers at scale.

Documentation | Project Task Board


If you just need to include the latest compiled version of the MAAS GUI Framework, use our hosted version and fonts to kick start you project.

<link href="" rel="stylesheet" type="text/css" media="screen">
<link href=",300i,400,400i,500,500i,700,700i" rel="stylesheet">

Including MAAS GUI Framework in your project via NPM

Pull down the latest version of MAAS GUI Framework into your local node_modules folder and save it into your project's dependencies (package.json) as follows:

npm install maas-gui-vanilla-theme

NOTE: if using npm version 4.0.0 or higher add --legacy-bundling to your npm install command

Local development

If you wish to download or clone this repo run the following commands to setup and create the minified CSS:

npm install
gulp build

You can override any of the settings in _settings.defaults.scss.


To see the latest changes and updates live please view the demo page

Change log


  • Created new notification group style, to be used when multiple notifications of one category are to be displayed on the screen without swamping the UI.
  • New secondary page navigation pattern has been included. This shall be used as secondary navigation for pages which are too long or require tabbed content.
  • Meter element has been styled to follow our new component color styles. Can be used to show machine information such as CPU, RAM e.t.c.


  • Uploading missing font assets and giving the ability to turn on or off local assets for fonts in _settings.defaults.scss
  • Removing the sass docs gulp requirements, gulp command and scss comments.


  • Updated all icons and colour set within the framework. This will keep inline with the Vanilla Framework and the new visual update which is going across all products
  • Links have changed from black to blue. This keeps MAAS inline with Juju and other Cloud products also improves the visual UX.
  • Improved the responsive nature of MAAS. Tables especially have been improved. The new card view and label using aria-label improves the readability and uses on mobile / small screens.
  • All assets have been renamed and also hosted on This gives the flexibility to use hosted assets or to host them locally dependant on project.
  • Navigation responsive issues have been resolved.
  • Flash messages has been removed and now replaced with the improved notification pattern.
  • New utility classes u-display--mobile & u-display--desktop have been added for extra responsive development / design flexibility.
  • Accordion styles have been slightly improved. Removing the cross style and keeping it consistent with our remove style.
  • Login action card styles have been added to the framework.

Code licensed LGPLv3 by Canonical Ltd

With ♥ from Canonical