Living styleguide

The living styleguide is implemented as a backend module in the help section. It shows the styled elements and their markup and how to use them. It is "living" because it's generated directly from the SCSS-Code. On this demo website you can see the living styleguide in the frontend. Like it's brother in the backend it has been generated directly from the SCSS-Code.

Forms _forms.scss

Buttons _forms.scss

Basic button styles of the higher education package can be used like the examples below:

the default hover effect of the button :hover
variant of the button in the spot color .button--spot-color
the default hover effect of the button with spot-color .button--spot-color:hover
the default effect of the button with inverted spot-color .button--spot-color-inverted
the default hover effect of the button with inverted spot-color .button--spot-color-inverted:hover
variant of the button in small size .button--small 
<button type="button" class="button {class}">This is a button</button>

Inputs _forms.scss

Basic input styles of the higher education package can be used like the examples below:

<input type="text" id="name" placeholder="input placeholder"/>

Select _forms.scss

Basic select styles of the higher education package can be used like the examples below:

<div class="select-wrapper">
    <select>
        <option value="">Degree</option>
        <option value="degree_bachelor">Bachelor</option>
        <option value="degree_master">Master</option>
        <option value="degree_doctor">Doctor</option>
    </select>
</div>

Textarea _forms.scss

Basic textarea style of the higher education package can be used like the examples below:

<textarea type="text" id="name" placeholder="textarea placeholder"></textarea>

Gridsystem _grid.scss

Grid examples _grid.scss

The gridsystem of higher education package is inspired by the 12 column bootstrap-gridsystem.
It's written in the css BEM syntax and it can be used like the examples below:

2 column grid _grid.scss

A basic two column grid

Column 50%
Column 50%
<div class="grid">
    <div class="grid__column grid__column--xs-6">Column 50%</div>
    <div class="grid__column grid__column--xs-6">Column 50%</div>
</div>

2 column grid extended _grid.scss

A two column grid combined with several breakpoint classes:

Medium breakpoint: 33% - 66%
small breakpoint: 50% - 50%
xsmall breakpoint: 100% - 100%

Column 1
Column 2
<div class="grid">
    <div class="grid__column grid__column--xs-12 grid__column--sm-6 grid__column--md-4">Column 1</div>
    <div class="grid__column grid__column--xs-12 grid__column--sm-6 grid__column--md-8">Column 2</div>
</div>

3 column grid _grid.scss

A basic three column grid

Column 33%
Column 33%
Column 33%
<div class="grid">
    <div class="grid__column grid__column--xs-4">Column 33%</div>
    <div class="grid__column grid__column--xs-4">Column 33%</div>
    <div class="grid__column grid__column--xs-4">Column 33%</div>
</div>

4 column grid _grid.scss

A basic four column grid

Column 25%
Column 25%
Column 25%
Column 25%
<div class="grid">
    <div class="grid__column grid__column--xs-3">Column 25%</div>
    <div class="grid__column grid__column--xs-3">Column 25%</div>
    <div class="grid__column grid__column--xs-3">Column 25%</div>
    <div class="grid__column grid__column--xs-3">Column 25%</div>
</div>

4 column grid reordered _grid.scss

A four column grid with reordered columns
You can use the modifiers from xs to lg breakpoint an from order 1 through 12

Example:
.grid__column--sm-order-first => this column within sm breakpoint is ordered first
.grid__column--md-order-first => this column within md breakpoint is ordered last
.grid__column--lg-order-5 => this column within lg breakpoint has the order value of 5

Column 1 - 25%
Column 2 - 25%
Column 3 - 25%
Column 4 - 25%
<div class="grid">
    <div class="grid__column grid__column--xs-3">Column 1 - 25%</div>
    <div class="grid__column grid__column--xs-3 grid__column--xs-order-first">Column 2 - 25%</div>
    <div class="grid__column grid__column--xs-3 grid__column--sm-order-last">Column 3 - 25%</div>
    <div class="grid__column grid__column--xs-3 grid__column--lg-order-5">Column 4 - 25%</div>
</div>

Typography _typography.scss

Headlines _typography.scss

This is a H1 headline

This is a H2 headline

This is a H3 headline

This is a H4 headline

<h1>This is a H1 headline</h1>
<h2>This is a H2 headline</h2>
<h3>This is a H3 headline</h3>
<h4>This is a H4 headline</h4>

Link _typography.scss

A basic link

This is a beautiful link
hover state for basic link :hover This is a beautiful link 
<a href="#" class="{class}">This is a beautiful link</a>

Lists _typography.scss

List styles of Higher Education Package

Fileicon list _icon-list.scss

A basic icon list with file links

<ul class="icon-list icon-list--files">
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">
            <span class="icon-list__file-name">
                this is a icon list item
            </span>
            <span class="icon-list__file-infos">
                <span class="icon-list__file-type">[jpg]</span>
                <span class="icon-list__file-size">3 MB</span>
            </span>
        </a>
    </li>
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">
            <span class="icon-list__file-name">
                this is a icon list item
            </span>
            <span class="icon-list__file-infos">
                <span class="icon-list__file-type">[jpg]</span>
                <span class="icon-list__file-size">3 MB</span>
            </span>
        </a>
    </li>
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">
            <span class="icon-list__file-name">
                this is a icon list item
            </span>
            <span class="icon-list__file-infos">
                <span class="icon-list__file-type">[jpg]</span>
                <span class="icon-list__file-size">3 MB</span>
            </span>
        </a>
    </li>
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">
            <span class="icon-list__file-name">
                this is a icon list item
            </span>
            <span class="icon-list__file-infos">
                <span class="icon-list__file-type">[jpg]</span>
                <span class="icon-list__file-size">3 MB</span>
            </span>
        </a>
    </li>
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">
            <span class="icon-list__file-name">
                this is a icon list item
            </span>
            <span class="icon-list__file-infos">
                <span class="icon-list__file-type">[jpg]</span>
                <span class="icon-list__file-size">3 MB</span>
            </span>
        </a>
    </li>
</ul>

Icon list _icon-list.scss

A basic icon list with links

<ul class="icon-list">
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">this is a icon list item</a>
    </li>
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">this is a icon list item</a>
    </li>
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">this is a icon list item</a>
    </li>
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">this is a icon list item</a>
    </li>
    <li class="icon-list__item">
        <a href="#" alt="this is a icon list item">this is a icon list item</a>
    </li>
</ul>

Ordered _typography.scss

A basic ordered list

  1. this is an ordered list item
  2. this is an ordered list item
  3. this is an ordered list item
  4. this is an ordered list item
  5. this is an ordered list item
<ol>
    <li>this is an ordered list item</li>
    <li>this is an ordered list item</li>
    <li>this is an ordered list item</li>
    <li>this is an ordered list item</li>
    <li>this is an ordered list item</li>
</ol>

Unordered _typography.scss

A basic unordered list

  • this is an unordered list item
  • this is an unordered list item
  • this is an unordered list item
  • this is an unordered list item
  • this is an unordered list item
<ul>
    <li>this is an unordered list item</li>
    <li>this is an unordered list item</li>
    <li>this is an unordered list item</li>
    <li>this is an unordered list item</li>
    <li>this is an unordered list item</li>
</ul>

Paragraph _typography.scss

A basic paragraph

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

centered aligned .text-center

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

right aligned .text-right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

<p class="{class}">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  At vero eos et accusam et justo duo dolores et ea rebum.</p>