A Bootstrap Theme Preview Page viewable in debug with HTML markup hints

Registered by Diana Whitten

As Horizon becomes more themeable, themers will need an easy way to see how their customizations in _variables.scss and _style.scss affect the overall bootstrap theme. I propose that we add a debug only feature, that will allow a developer to preview the currently loaded theme. The purpose of this page will be to show what the current Bootstrap css/components/javascript look like with the current theme. It will also provide an easy, clickable button on each component to allow the developer to see the proper bootstrap markup for recreating the themed html. The following snippet: http://codepen.io/jamesabels/pen/FvhsG is used by many (bootswatch.com, etc) as well accepted theme previewer markup. See here: https://www.dropbox.com/s/uqe7rrixoz2kiil/skin_preview.gif?dl=0

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
Low
Drafter:
Diana Whitten
Direction:
Approved
Assignee:
None
Definition:
Approved
Series goal:
Accepted for mitaka
Implementation:
Implemented
Milestone target:
milestone icon mitaka-2
Started by
Diana Whitten
Completed by
Rob Cresswell

Related branches

Sprints

Whiteboard

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

Addressed by: https://review.openstack.org/187818
    Create a Bootstrap Theme Preview Page with HTML Hints

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

Addressed by: https://review.openstack.org/209631
    Add Developer Dashboard + Bootstrap Theme Preview

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

Gerrit topic: https://review.openstack.org/#q,topic:bug/1518133-patch24,n,z

Addressed by: https://review.openstack.org/316219
    Add Line Charts to the Theme Preview Page

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

Addressed by: https://review.openstack.org/318970
    Theme Preview Page should include datepicker.

Addressed by: https://review.openstack.org/324876
    Theme Preview Page should include form-inline

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

Addressed by: https://review.openstack.org/335630
    Add themable selects to the theme preview page

Addressed by: https://review.openstack.org/335633
    Preview Page: Themable Checkbox should have different label

Addressed by: https://review.openstack.org/352509
    Add dl-horizontal to preview page

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.

Subscribers

No subscribers.