MAAS GUI framework

ubuntu, vanilla, framework, landscape, cloud, scss, css, ui, front-end, sass, maas, html, vanilla-framework
npm install maas-gui-vanilla-theme-new@1.3.0


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