It's on the record detail that users access most detailed information and perform specific operations. It is important to identify the main tasks that are going to be performed.
Usually content ranges from 66% to 75% of the available width, use a optional sidebar on the right for displaying controls, related information or help content.
Optionally you can use the full width of the page up to 1400px for wider layouts.
Keep in mind that:
- Component selection, spacing, and a well-structured information hierarchy are the key factors that affect a user's efficiency to access information
- Text with graphic can be better understood than pure text
- Avoid confusions caused by ambiguous labels or descriptions
- Simplify and group related fields in forms
- On long forms use the
c8y-ui-button-footerdirective so the user doesn't have too scroll to the bottom of the form to click "Save" when editing
- Use the grid system to structure the layout
When there's no need for complementary information or help content, the right column can be empty or overriden.
Device protocol detail (full width)
<div class="row"> <div class="col-md-8 col-sm-12"> <!-- Main content --> </div> </div>
Each of these columns may contain several components such as list-group, cards or card-group to name a few.
Global role detail
<!-- default sidebar layout --> <div class="row"> <div class="col-md-8"> <!-- Main content --> </div> <div class="col-md-4"> <!-- controls or related information --> </div> </div> <!-- alternate side bar layout with a larger gutter --> <div class="row"> <div class="col-md-6"> <!-- Main content --> </div> <div class="col-md-5 col-md-offset-1"> <!-- controls or related information --> </div> </div>