horizon css needs to make proper use of css preprocessor features to allow ease of customization and theming
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:/
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:
- 2015.1.0
- Started by
- Kahou Lei
- Completed by
- David Lyle
Related branches
Related bugs
Sprints
Whiteboard
Interface Layer:
http://
Port of Bootswatch to SCSS:
https:/
Screenshots:
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
https:/
Gerrit topic: https:/
Addressed by: https:/
Custom Horizon Theme
Gerrit topic: https:/
Work Items
Dependency tree
* Blueprints in grey have been implemented.