-
Notifications
You must be signed in to change notification settings - Fork 27
Conductor UI Style Guide
This document is still in development; nothing here should be taken as gospel .
This document details the Conductor UI style guide. It does so at the following levels:
- overall design and philosophy
- what a non-UI developer needs to know
Conductor shares a look-and-feel with Katello. To that end, the two projects share the converge-ui library. converge-ui contains the complete css needed to style both Katello and Conductor. Project-specific customizations are contained within the repository of the respective project.
- talk and talk
- wireframes
- UI guy provides updated stylesheets, assets, documentation as to what to do
- developer implements
Expect back-and-forth between UI guy and developer. Issues can be raised here: https://github.com/Katello/converge-ui/issues?state=open
Design and Philosophy
Header, footer, content in the middle. Explained more below.
Developer Info
Use the following partials and put your content in the middle. Code example.
Design and Philosophy
See below + links on upper right.
Developer Info
Use the following partials, code example.
Design and Philosophy
Tabs. First one is Dashboard, next are groupings of entity sections (Content -> Images, Deployments, etc). Tabs that can’t be accessed by user should disappear?
Developer Info
Use this partial; this is how you add a navigation component; this is how you do a permission check on a nav component.
Design and Philosophy
TBD (contextual or no?)
Developer Info
Use this partial, make sure your controller calls these methods.
Design and Philosophy
Somethingsomething.
Developer Info
Use this partial, make sure your controller calls these methods.
Split into dashboard and entity sections.
Design and Philosophy
Portlets
- Important info (important actions should always be just one/two clicks away)
- if no relevant info, then text suggesting actions to the user (“no provider accounts; click here to. . .”)
Developer Info
Here’s how you create a portlet!
Design and Philosophy
Should all follow similar guidelines, to ease use.
- Each entity section should be operable independently
- Index page; list of items, stats on a different page
- Show page
- Workflows (one workflow only; if you need to hook in, you hook into that workflow)
- related entity lists and actions
Developer Info
- Index should do X using Y
- Show page should do Z using A
- Workflow, form information
Design and Philosophy
What should you do?
Developer Info
Sample, link to library
Design and Philosophy
bloop
Developer Info
Use this partial