	New Styleguide page for "Loading"
	Introduce CDN links to all images
	Add Section with index-tiles to branding page
	New Styleguide page for "Branding"
	Extend ".wui-bs-alert" with all fruit-color-variantes
	Font-Awesome has been updated to version 5.12.0
	"Utils" has been extended with opacity, heights and colors

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe

Grid

Layout grid system

The layout grid system is based on the 12-column flow layout of Bootstrap 3.3. With this responsive layout we make sure that UI elements are always shown in the best possible way on large, medium und small devices such as desktops, tablets or mobiles.
For more consistency consider the following when working with grids:

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

Stable

Feel free to use this component. It has been tested and is already live in production. Anyways – if you find a problem with this component let me know. You can contact me via slack, email (tjaeger@wescale.com) or personally.

Overview

For each context there is an overview divided in four columns on large desktops. For large and medium sized displays there are three columns. For small devices there are two columns and for xs-screens everything breaks down to one column.
The order of the overview items is the same as the order in the menu on the left (from left to right).

Want to use index tiles? Have a look here.

.col-xlg-3 .col-lg-4 .col-md-4 .col-sm-6 .col-12

                              

                                <div class="wui-grid wui-grid--md">
                                  <div class="wui-grid__item col-xlg-3 col-lg-4 col-md-4 col-sm-6 col-12">
                                    <div class="wsg-example">
                                      <p>.col-xlg-3 .col-lg-4 .col-md-4 .col-sm-6 .col-12</p>
                                    </div>
                                  </div>
                                  <div class="wui-grid__item col-xlg-3 col-lg-4 col-md-4 col-sm-6 col-12">
                                    <div class="wsg-example">
                                      <p>.col-xlg-3 .col-lg-4 .col-md-4 .col-sm-6 .col-12</p>
                                    </div>
                                  </div>
                                  <div class="wui-grid__item col-xlg-3 col-lg-4 col-md-4 col-sm-6 col-12">
                                    <div class="wsg-example">
                                      <p>.col-xlg-3 .col-lg-4 .col-md-4 .col-sm-6 .col-12</p>
                                    </div>
                                  </div>
                                  <div class="wui-grid__item col-xlg-3 col-lg-4 col-md-4 col-sm-6 col-12">
                                    <div class="wsg-example">
                                      <p>.col-xlg-3 .col-lg-4 .col-md-4 .col-sm-6 .col-12</p>
                                    </div>
                                  </div>
                                </div>

Content with widgets

The relation between content and widgets is 2/3 to 1/3. On small devices the widgets go beneath the content.
Within the widget column we use a further grid, which enables us to show widgets next to each other on medium-sized devices while they are below each other on small devices.

.col-md-8

.col-md-4

                          

                            <div class="row">
                              <div class="col-md-8">
                                Content goes here
                              </div>
                              <div class="col-md-4">
                                <div class="col-12 col-sm-6 col-md-12">
                                  Widget 1
                                </div>
                                <div class="col-12 col-sm-6 col-md-12">
                                  Widget 2
                                </div>
                              </div>
                            </div>

Content with filters

The relation between filters and content is 1/3 to 2/3. In contrast to widgets, the filters are on the left. On small devices the filters are pushed beneath the content. Therefore we use the Bootstrap classes .push and .pull.
In both column is a wui-grid to make sure that the grid items and the facets are on the height. Furthermore the wui-grid gets the util-class .p-0 so that the only padding within the grid is coming from the wui-grid-items.

Primary card title

Secondary title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores totam ipsam inventore ad nemo quidem dolorem officia minus quos.

Primary card title will be truncated

Secondary title will also be truncated

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores totam ipsam inventore ad nemo quidem dolorem officia minus quos, laudantium nisi saepe, eius labore dolore facere. Laudantium inventore reiciendis praesentium!

Primary card title

Secondary title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores totam ipsam inventore ad nemo quidem dolorem officia minus quos.

                          

                            <div class="row">
                              <div class="col-xlg-10 col-xlg-push-2 col-md-9 col-md-push-3">
                                <div class="row">
                                  <div class="wui-grid p-0">
                                    <div class="wui-grid__item col-xlg-3 col-lg-4 col-md-6 col-sm-6">
                                      <div class="wui-card2">
                                        Content of wui-card2
                                      </div>
                                    </div>
                                    <div class="wui-grid__item col-xlg-3 col-lg-4 col-md-6 col-sm-6">
                                      <div class="wui-card2">
                                        Content of wui-card2
                                      </div>
                                    </div>
                                    <div class="wui-grid__item col-xlg-3 col-lg-4 col-md-6 col-sm-6">
                                      <div class="wui-card2">
                                        Content of wui-card2
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-xlg-2 col-xlg-pull-10 col-md-3 col-md-pull-9">
                                <div class="row">
                                  <div class="wui-grid p-0">
                                    <div class="wui-grid__item">
                                      <div class="wui-bs-panel m-b-0">
                                        <div class="panel-heading">
                                          &nbsp;
                                        </div>
                                        <div class="panel-body">
                                          <p class="wui-skeleton-text wui-skeleton-text--100"></p>
                                          <p class="wui-skeleton-text wui-skeleton-text--80"></p>
                                          <p class="wui-skeleton-text wui-skeleton-text--60"></p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

wui-grid and wui-grid__item

The .wui-grid__item which is located in a .wui-grid has the same padding on all sides, as opposed to columns, which have only a padding to the right and left. However, the width of the wui-grid__item can be set by classes analogous to the columns.

The wui-grid comes with 3 modifiers with which the padding between the elements can be influenced.

.wui-grid--md = 30px gap;
.wui-grid--sm = 20px gap;
.wui-grid--zero = no 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. (See overview)

.col-xlg-3 .col-lg-4 .col-md-6 .col-sm-6 .col-12

                          

                            <div class="p-0">
                              <div class="wui-grid wui-grid--sm">
                                <div class="wui-grid__item col-12 col-sm-6 col-md-3">
                                  <div class="wsg-example m-0">
                                    <p>.col-xlg-3 .col-lg-4 .col-md-6 .col-sm-6 .col-12</p>
                                  </div>
                                </div>
                                <div class="wui-grid__item col-12 col-sm-6 col-md-3">
                                  <div class="wsg-example m-0">
                                    <p>.col-xlg-3 .col-lg-4 .col-md-6 .col-sm-6 .col-12</p>
                                  </div>
                                </div>
                                <div class="wui-grid__item col-12 col-sm-6 col-md-3">
                                  <div class="wsg-example m-0">
                                    <p>.col-xlg-3 .col-lg-4 .col-md-6 .col-sm-6 .col-12</p>
                                  </div>
                                </div>
                                <div class="wui-grid__item col-12 col-sm-6 col-md-3">
                                  <div class="wsg-example m-0">
                                    <p>.col-xlg-3 .col-lg-4 .col-md-6 .col-sm-6 .col-12</p>
                                  </div>
                                </div>
                              </div>
                            </div>

Breakpoints

We are using 4 grid 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)

Affected area	Screen size	Class prefix
> 0 px	Extra small	.col-*
> 767 px	Small	.col-sm-*
> 991 px	Medium	.col-md-*
> 1199 px	Large	.col-lg-*
> 1823 px	Extra large	.col-xlg-*