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.
Basic button styles of the higher education package can be used like the examples below:
<button type="button" class="button {class}">This is a button</button>
Basic input styles of the higher education package can be used like the examples below:
<input type="text" id="name" placeholder="input placeholder"/>
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>
Basic textarea style of the higher education package can be used like the examples below:
<textarea type="text" id="name" placeholder="textarea placeholder"></textarea>
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:
A basic two column grid
<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>
A two column grid combined with several breakpoint classes:
Medium breakpoint: 33% - 66%
small breakpoint: 50% - 50%
xsmall breakpoint: 100% - 100%
<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>
A basic three column grid
<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>
A basic four column grid
<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>
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
<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>
<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>
A basic link
<a href="#" class="{class}">This is a beautiful link</a>
List styles of Higher Education Package
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>
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>
A basic ordered list
<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>
A basic unordered list
<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>
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.
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.
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>