Responsive Stylesheets

Registered by Gabriel Hurley

Eventually Horizon should support responsive stylesheets for varying screen sizes/device types.

Blueprint information

Status:
Complete
Approver:
Devin Carlen
Priority:
Low
Drafter:
Gabriel Hurley
Direction:
Needs approval
Assignee:
None
Definition:
Superseded
Series goal:
None
Implementation:
Unknown
Milestone target:
None
Completed by
David Lyle

Related branches

Sprints

Whiteboard

[jcoufal]
Agree that some initial work can be done without wireframes, but only for general things. I will have a look on wireframes for further details (lower priority for now).

[jtomasek]
- Bootstrap has it's own responsive capabilities with predefined media queries/dimensions (http://twitter.github.io/bootstrap/scaffolding.html#responsive)
- add media queries for responsive design to horizon.less according to Bootstrap's media queries
- use Bootstrap's responsive utility classes
- define default dimension (probably the largest), then define the specific css for each media query
- start with basic enhancements - container, sidebar, navigation, logo and user login section positioning
- use percentage widths, consider using box-sizing: border-box;
- ensure browser compatibility

- responsive css design should be probably based on design wireframes (do we have any?)
- initial work can be done without wireframes

side note:
  - horizon.less file should be probably refactored into multiple parts each covering specific css entity (layout, base(a, p, ...), fonts, colors, bootstrap overrides, specific features...) and include these in the horizon.less
  - there is work being done with colors here: https://blueprints.launchpad.net/horizon/+spec/centralized-color-palette

[david-lyle] this is being addressed by newer blueprints

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.