Grid

Summary

• Wrapper. For containers always use the class .container-fluid.
• Nesting. Columns are immediate children of rows and content is always placed within columns.
• Sub grids. Start a sub grid with a .row inside the column.
• Paddings. Columns just have paddings to the left and to the right. To build a grid with equal paddings to all sides use .wui-grid and .wui-grid__item.
• Minimum requirement. We optimize for all screen sizes. However, our focus is on ensuring that all content is displayed properly up to a screen size of at least 1200px.

Content with widgets

The relation between content and widgets is .col-md-8 to .col-md-4. On small devices the widgets go beneath the content.

<div class="row">
<div class="col-md-8">
<div class="wui-bs-panel">
<div class="panel-heading">
<h2 class="panel-title">Content</h2>
</div>
<div class="panel-body">
<code>.col-md-8</code>
</div>
</div>
</div>
<div class="col-md-4">
<div class="wui-bs-panel">
<div class="panel-heading">
<h2 class="panel-title">Widget</h2>
</div>
<div class="panel-body">
<code>.col-md-4</code>
</div>
</div>
<div class="wui-bs-panel">
<div class="panel-heading">
<h2 class="panel-title">Widget</h2>
</div>
<div class="panel-body">
<code>.col-md-4</code>
</div>
</div>
</div>
</div>

Content with filters

The relation between filters and content is .col-lg-3 .col-md-4 to .col-lg-9 .col-md-8.
On small devices the filters are pushed beneath the content. Therefore we use the Bootstrap classes .push and .pull. To make sure that the grid items and the facets are on the same height, there is a .wui-grid .p-0 in each column. We use the .p-0 here to make sure that the only padding within the grid is coming from the .wui-grid-items.

With Bootstrap 5 the .push and .pull classes are deprecated. We use .order- classes (e.g., .order-1.order-md-2) for controlling the visual order of the content.

<div class="row">
<div class="col-lg-9 col-md-8 col-lg-push-3 col-md-push-4 order-1 order-md-2">
<div class="row">
<div class="wui-grid wui-grid--md p-0">
<div class="wui-grid__item col-xlg-3 col-lg-4 col-sm-6">
<div class="wui-card2">
<div class="wui-card2__body">
<h2 class="wui-card2__title">
Card 1
</h2>
</div>
</div>
</div>
<div class="wui-grid__item col-xlg-3 col-lg-4 col-sm-6">
<div class="wui-card2">
<div class="wui-card2__body">
<h2 class="wui-card2__title">
Card 2
</h2>
</div>
</div>
</div>
<div class="wui-grid__item col-xlg-3 col-lg-4 col-sm-6">
<div class="wui-card2">
<div class="wui-card2__body">
<h2 class="wui-card2__title">
Card 3
</h2>
</div>
</div>
</div>
<div class="wui-grid__item col-xlg-3 col-lg-4 col-sm-6">
<div class="wui-card2">
<div class="wui-card2__body">
<h2 class="wui-card2__title">
Card 4
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-lg-pull-9 col-md-pull-8 order-2 order-md-1">
<div class="row">
<div class="wui-grid wui-grid--sm p-0 p-l-5">
<div class="wui-grid__item">
<div class="wui-facet wui-bs-panel m-0">
<div class="panel-heading">
<h2 class="panel-title">Facet 1</h2>
</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="wui-grid__item">
<div class="wui-facet wui-bs-panel m-0">
<div class="panel-heading">
<h2 class="panel-title">Facet 2</h2>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

.wui-grid

The .wui-grid__item has the same padding on all sides, unlike columns which only have padding on the right and left. The width of the .wui-grid__item can be set by classes analogous to the Bootstrap cols.

There are 3 modifiers that can be used to control the padding between elements.

• .wui-grid--md = 30px gap
• .wui-grid--sm = 20px gap
• .wui-grid--xs = 10px gap
• .wui-grid--zero = 0px gap

To ensure an equal padding around an item, the parent element of the .wui-grid must not have any padding. With one exception: If the parent is .wui-scene-body - don't change the padding.

Breakpoints

We are using 5 breakpoints: small, medium, large and extra large. Because the breakpoints are based on minimum width media queries, each of them applies to that specific breakpoint and all those above (e.g., .col-lg-4 applies to large and extra large devices, but not to small or medium ones)