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

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

Sticky Header

  • 3 main parts. Orientation elements on the left (breadcrumb trail and headline), action elements on the right (Buttons, searchbar etc.).
  • Fixed height. The sticky header has a hight of 80px.
  • Responsiveness. The action area on the right gets as much space as it needs, while the headline on the left side is truncated.
  • Sticky Header. We call it “sticky header” for a reason ;)
    While scrolling on the page, the header is always visible, so that there is still the possibility for orientation and the primary actions can be triggered.

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.

Two main areas

Orientation area

.wui-scene-header__secondary

The most important elements a user needs for orientation are on the left side. On the one hand there is the breadcrumb trail, which shows in which context a user is or where (s)he came from. In addition, the user always has the possibility to navigate to the previous pages using the breadcrumb trail, insofar there are previous pages. On the other hand there is the headline, which indicates the "current location" of the user.

Note:

There is no headline more important than the headline within the sticky header. So there will never be a heading in the content that is larger than 26px.

Key elements

Action area

.wui-scene-header__primary

Most of the primary actions are located here. In addition, there are other actions, such as the search, filter or action buttons, which enable the processing of the respective page. To ensure that even users with small screens can work as easily as possible, the elements on the right are always given as much space as they need whereas the elements of the "wui-scene-header__secondary" are truncated.

Note:

Elements inside the "wui-scene-header__primary" will always affect the content of the whole page. There is no element which only affects specific parts of the particular page.

Key elements

Sticky header markup

The sticky header is one of the key elements of the platform. The breadcrumb trail and the headline help the user to orientate. Whenever users got to a specific site they should always know where they are (in which context on which page).

Sticky header (on top navigation level)

Level 1

                        
                          
<div class="wui-scene-header wui-scene-header--sticky wui-scene-header--toplevel">
                            <div class="wui-scene-header__container container-fluid">
                              <div class="wui-scene-header__row row">
                                <div class="wui-scene-header__col wui-scene-header__primary">
                                  <h1 class="wui-scene-header__title">
                                    <span>Level 1</span>
                                  </h1>
                                </div>
                              </div>
                            </div>
                          </div>

Default sticky header

As you navigate deeper into a context, the current heading always becomes the last item of the breadcrumb trail on the following page. As soon as the user reaches a page that can be edited, filtered or searched, the respective options appear in .wui-scene-header__primary.

Headline: Truncated if necessary

                        
                          
<div class="wui-scene-header wui-scene-header--sticky">
                            <div class="wui-scene-header__container container-fluid">
                              <div class="wui-scene-header__row row">
                                <div class="wui-scene-header__col col-12">
                                  <ul class="wui-scene-header__breadcrumb wui-breadcrumb">
                                    <li class="wui-breadcrumb__item">
                                      <a href="#">Level 1</a>
                                    </li>
                                    <li class="wui-breadcrumb__item">
                                      <a href="#">Level 2</a>
                                    </li>
                                  </ul>
                                </div>
                              </div>
                              <div class="wui-scene-header__row row">
                                <div class="wui-scene-header__col wui-scene-header__secondary">
                                  <div class="wui-inline-list">
                                    <div class="wui-inline-list__item">
                                      <button class="wui-btn wui-btn--primary">Primary</button>
                                    </div>
                                    <div class="wui-inline-list__item">
                                      <div class="wui-bs-form wui-bs-form--inline display--inline-block">
                                        <div class="input-group">
                                          <div class="form-control-group form-control-group--has-icon"><input
                                              placeholder="Search for xyz" type="text" autocomplete="off"
                                              class="wui-scene-header__search-input form-control">
                                            <a href="javascript:;" class="form-control-icon"><i class="fa fa-search"></i></a>
                                          </div>
                                          <div class="input-group-btn log-entry-list-scene__header-buttons"><button
                                              title="Toggle filter" class="wui-btn wui-btn--default"><i
                                                class="fa fa-filter"></i></button> <button title="Clear filter"
                                              class="wui-btn wui-btn--default"><i class="fa fa-eraser"></i></button></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="wui-scene-header__col wui-scene-header__primary">
                                  <h1 class="wui-scene-header__title">
                                    <span>Headline: Truncated if necessary</span>
                                  </h1>
                                </div>
                              </div>
                            </div>
                          </div>