Adhering to Bootstrap 3's HTML standards would remove a lot of added complexity

Registered by Diana Whitten

Summary
========
There are a number of Blueprints that already call for a Responsive Designs, however if we just work on adhering to Bootstrap 3's HTML standards (structure as well as class names), we would be able to remove much of the CSS bloat, create an easier to theme base and would get a somewhat responsive website with very little effort.

I propose that this Blueprint is made a requirement for horizon-themes because this work will make the theming much simpler than it currently is.

Motivation
========
Everyone wants and craves a responsive and theme-able design. :)

Description
=========
There are a number of things well defined in Bootstrap, such as Nav, Dropdown Lists, Tables, etc that inherit Bootstrap's Mobile First CSS responsive styles as well as the underlying theme in the LESS (SCSS) interface layer. Restructuring and adding classes to the existing HTML names to make full use of these built-in, awesome features.

UX
===
This will greatly impact the UX.

Testing
======
If we want to embrace a responsive design, then standard pages will need to be User Tested for the following screen sizes:
http://getbootstrap.com/css/#grid-options

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
Medium
Drafter:
Diana Whitten
Direction:
Approved
Assignee:
Diana Whitten
Definition:
Approved
Series goal:
None
Implementation:
Implemented
Milestone target:
None
Started by
Diana Whitten
Completed by
Cindy Lu

Related branches

Sprints

Whiteboard

10/26/2016 [clu_] Bulk of work complete. Any new feature should open up a new bp.

[david-lyle | 2015-03-18] I don't see any code for this yet, so moving to liberty.

Gerrit topic: https://review.openstack.org/#q,topic:bp/horizon-theme-css-reorg,n,z

Addressed by: https://review.openstack.org/207660
    Top Nav is responsive and inherits from its theme

Addressed by: https://review.openstack.org/209259
    Sidebar now inherits from a Bootstrap Theme

Gerrit topic: https://review.openstack.org/#q,topic:bug/1483910,n,z

Addressed by: https://review.openstack.org/212682
    Horizon Context Selection should be to the right

Addressed by: https://review.openstack.org/218608
    Basic tables now inherit from Bootstrap Theme

Addressed by: https://review.openstack.org/219881
    Horizon Login now inherits from Bootstrap Theme

Gerrit topic: https://review.openstack.org/#q,topic:bp/horizon-theme-css-reorg-login,n,z

Gerrit topic: https://review.openstack.org/#q,topic:bug/1490207,n,z

Addressed by: https://review.openstack.org/232735
    Horizon Dropdown now inherits from Bootstrap Theme

Addressed by: https://review.openstack.org/245342
    Barcharts now inherit from a Bootstrap Theme

Addressed by: https://review.openstack.org/246004
    Basic Tabs now inherit from a Bootstrap Theme

Addressed by: https://review.openstack.org/246608
    Horizon Messages now inherit from a Bootstrap Theme

Addressed by: https://review.openstack.org/246622
    usage.html doesn't need such specific styles.

Gerrit topic: https://review.openstack.org/#q,topic:bug/1517084,n,z

Addressed by: https://review.openstack.org/245398
    Quota pages now inherit from Bootstrap Theme

Addressed by: https://review.openstack.org/260613
    Clean up horizon.scss

Addressed by: https://review.openstack.org/260619
    Clean up horizon.scss - Flavor Table

Addressed by: https://review.openstack.org/267231
    WIP Themeable loader/progress bar for tables

Gerrit topic: https://review.openstack.org/#q,topic:bp/horizon-dynamic-theme,n,z

Addressed by: https://review.openstack.org/271858
    Context Picker should inherit BS dropdown styles

Addressed by: https://review.openstack.org/276919
    Container Loader Image now Themable

Addressed by: https://review.openstack.org/303625
    Legacy Transfer Table is now themable.

Gerrit topic: https://review.openstack.org/#q,topic:bug/1581669,n,z

Addressed by: https://review.openstack.org/313685
    Horizon Spinner/Loader should inherit from theme

Addressed by: https://review.openstack.org/318933
    Datepicker should inherit from theme

Gerrit topic: https://review.openstack.org/#q,topic:bp/horizon-theme-css-reorg-datepicker,n,z

Gerrit topic: https://review.openstack.org/#q,topic:bp/bootstrap-theme-preview,n,z

Gerrit topic: https://review.openstack.org/#q,topic:bug/1570485,n,z

Gerrit topic: https://review.openstack.org/#q,topic:bp/bootstrap-html-standards,n,z

Addressed by: https://review.openstack.org/335241
    Table Actions should be an inline form.

(?)

Work Items

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.

Subscribers

No subscribers.