Tips & Tricks
Last updated: May 3, 2019The following is a list of tips and tricks to keep in mind while working with Shards Dashboards.
Auto height for all card blocks
Maybe you have noticed that some of the cards match the entire row’s height. While this is good for aesthetics, it’s clearly not something everyone wants. In order to change this behavior and let each card adjust its height based on its inner contents, just remove the .h-100 class from that particular card.
✨Tip: Keep in mind that each card by default adjusts its height based on the largest element in that row. Removing the class of the “tallest” element may seem to not do anything.
Speed up transitions
All templates are styled to use the global $transition-duration (in most cases). In order to globally speed up all transitions across all templates, just recompile the UI kit and override the above variable with your desired value.
Display alerts properly
Every functional admin dashboard must be able to display notifications in a way or another. In Shards Dashboards’ case, the best place to display them would be right above the .main-content-container element inside a separate .container-fluid element. Check out the example below:
<body>
<div class="container-fluid">
<aside class="main-sidebar">
<!-- Main Sidebar Content -->
</aside>
<main class="main-content">
<div class="container-fluid px-0">
<div class="alert alert-warning alert-dismissible fade show m-0" role="alert">
<strong>Oh no!</strong> You should check out this thing, right now!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="main-content-container container-fluid">
<div class="page-header">
<!-- Page Header Content -->
</div>
<!-- Template Specific Content -->
<footer class="main-footer ...">
<!-- Main Footer Content -->
</footer>
</div>
</main>
</div>
</body>