Note: The planet UI design system is an extension of the bootstrap framework.
Please also referer to the bootstrap documentation for best pratices while using the framework.
Grid system
Overview
The frameworks grid system follows the conventions used by the stanard 12 point bootstrap grid.
Please referer to the bootstrap documentation for full details of how to implement the grid system.
Grid usage
Most of the layout from the UX prototypes are done using a standard grid of reponsive cards where we see a full width card for pages that list data and a 3 column grid on details pages with multiple tabs.
This can be implemented using the design system using the grid system as below.
card content
card content
card content
card content
card content
card content
card content
<div class="row">
<div class="col-12 col-md-4 d-flex flex-column align-items-stretch">
<div class="card w-100 h-100 mb-3">
<div class="card-body">
<span>card content</span>
</div>
<div class="card-footer">
<a class="btn btn-link px-0"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 d-flex flex-column">
<div class="card w-100 h-100 mb-3">
<div class="card-body">
<span>card content</span>
</div>
<div class="card-footer">
<a class="btn btn-link px-0"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 d-flex flex-column">
<div class="card w-100 h-100 mb-3">
<div class="card-body">
<span>card content</span>
</div>
<div class="card-footer">
<a class="btn btn-link px-0"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 d-flex flex-column align-items-stretch">
<div class="card w-100 h-100 mb-3">
<div class="card-body">
<span>card content</span>
</div>
<div class="card-footer">
<a class="btn btn-link px-0"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 d-flex flex-column">
<div class="card w-100 h-100 mb-3">
<div class="card-body">
<span>card content</span>
</div>
<div class="card-footer">
<a class="btn btn-link px-0"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 d-flex flex-column">
<div class="card w-100 h-100 mb-3">
<div class="card-body">
<span>card content</span>
</div>
<div class="card-footer">
<a class="btn btn-link px-0"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 d-flex flex-column align-items-stretch">
<div class="card w-100 h-100 mb-3">
<div class="card-body">
<span>card content</span>
</div>
<div class="card-footer">
<a class="btn btn-link px-0"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
</div>