horizon css needs to make proper use of css preprocessor features to allow ease of customization and theming

Registered by Diana Whitten

Motivation
=========
The current state of the Horizon CSS (SCSS) does not allow a streamlined way to change the default skin, rather than overriding each style by hand. Most of the CSS style rules, other than those dealing with layout, can easily be abstracted to allow for a plug-n-play theme architecture.

Description
==========
Horizon makes use of Twitter's Bootstrap CSS, which has a great preprocessor layer already defined and many variables already accessible and useable for customizing Horizon's look and feel. There are a number of implementations of skins that already exist for Bootstrap. For the purposes of this task, I propose that we use an existing and well accepted implementation of Bootstrap's CSS called Bootswatch. Bootswatch already has a method for defining overrides that is clean and a number of already attractive skins available.

By creating an interface layer between Bootstrap's CSS and Horizon that matches the interface layer defined by Bootswatch, we will get a lot of useful skins immediately, as well as a path defined for any future skins that wish to get implemented. As part of this task, there will be some work to create an entirely new Bootswatch skin that mimics the current Horizon dashboard look and feel.

This blueprint can likely consume parts of this: https://blueprints.launchpad.net/horizon/+spec/css-breakdown

UX
===
Since this task is 100% UX, see the description above.

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
High
Drafter:
Diana Whitten
Direction:
Approved
Assignee:
Kahou Lei
Definition:
Approved
Series goal:
Accepted for kilo
Implementation:
Implemented
Milestone target:
milestone icon 2015.1.0
Started by
Kahou Lei
Completed by
David Lyle

Related branches

Sprints

(?)

Work Items

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.