Giter Club home page Giter Club logo

maas-gui-vanilla-theme's Introduction

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

Hotlinking

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="https://assets.ubuntu.com/v1/16283d22-maas-gui-framework.build-1.2.9.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,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.

Demo

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

Change log

v1.2.0

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

v1.1.1

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

v1.1.0

  • 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 https://assets.ubuntu.com. 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

maas-gui-vanilla-theme's People

Contributors

anthonydillon avatar lukewh avatar matthewpaulthomas avatar richmccartney avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

grahambancroft

maas-gui-vanilla-theme's Issues

Setup Travis

We have no travis build steps for this project

Convert: Helpers states

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Pattern header

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Component Forms

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Component Tooltips

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

MAAS new logo update

Update to the modern way of including vanilla

As mentioned in canonical/vanilla-framework#470.

We will no longer be going off finding vanilla-framework from parent directories. Instead we will expect vanilla-framework to be available in SASS's include-path setting.

This should then be published as a minor (or major) version change to this theme, as it will require project to update how they locally run SASS to use the correct include-path before it will work.

Required changes

@import '../node_modules/vanilla-framework/scss/vanilla';

Needs to be changed to:

@import 'vanilla-framework/scss/vanilla';

Update setting files

With the new way we have created setting files in vanilla framework, the theme will need to follow the same format. Split out any settings into their own respective files.

Convert: Helpers borders

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Missing icons?

The example page lists the following icons however these icons are not shown on the example page nor are they usable in MAAS.

<i class="icon icon--status-failed">..</i>
<i class="icon icon--status-in-progress">..</i>
<i class="icon icon--status-queued">..</i>
<i class="icon icon--status-succeeded">..</i>
<i class="icon icon--status-waiting">..</i>

Convert: Component Tags

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Update 'Add alias' icon in Interfaces table

Visual reference below of updated icon in Interfaces table, changing from 'plus' icon to 'add' icon used in Juju. Consistency of icon library use across Cloud products (17/02):

add-alais

Convert: Typography

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Helpers display

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Helpers spacing

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Pattern search

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Layout wrapper

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Split out base table styles

In component tables it currently holds the base and component level styles for interactive tables. This should be split out completely so normal table styles live under a base level file.

Convert: Component code

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Helpers animation

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Helpers vertical alignment

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: base definition lists

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Patterns accordion

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Enable assets to be bundled with NPM

Currently npm doesn't pull in assets (fonts, images) as a part of the package. Look into adding an npm module which will manage this and publish any files required

Move repo to the MAAS organisation

Move the repo from the Ubuntu designers org to MAAS.

  • Rename repo
  • Update all documentation on all three demo pages and README.md
  • Move the repo to the MAAS organisation
  • Setup travis CI with the organisation #39
  • Republish NPM

Convert: Component Buttons

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Component List Tree

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Component

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Layout rows

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Forms

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Component Flashmessages

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Pattern page header

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Main

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Patterns action cards

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Component Icons

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Convert: Component Tabs

Is this required or replaced by a vanilla component?

If still required follow through the checklist below:


  • Resolve all linting issues
  • Rename and fix variable issues
  • Remove and follow the same comment structure
  • Update any markup requirements
  • Move documentation from one page to vanilla docs theme .md file

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.