EUI 2.0
Das Eberspächer User Interface 2.0, kurz EUI 2.0, ist ein HTML und CSS Framework zur Entwicklung von Web-Applikationen für die Eberspächer Gruppe.
Es basiert auf Twitter Bootstrap (Version 3.3.5, SASS). Aktuelle Version 2.0
Typographic Definition
Überschriften
Es stehen Überschriften von der 1. bis zur 6. Ordnung zur Verfügung.
Überschrift der ersten Ordnung h1
Überschrift der zweiten Ordnung h2
Überschrift der dritten Ordnung h3
Überschrift der vierten Ordnung h4
Überschrift der fünften Ordnung h5
Überschrift der sechsten Ordnung h6
Hervorgehobene Überschrift zweiter Ordnung
Überschriften, die einen eignen Abschnitt markieren, können mittels eines Wrappers noch etwas mehr hervorgehoben werden:
<div class="page-header">
 <h2>Hervorgehobene Überschrift zweiter Ordnung</h2>
</div>
Überschrift Mit Zusatz
Einer Überschrift kann noch ein Zusatz mitgegeben werden.
<h2>Überschrift <small>Mit Zusatz</small></h2>
Panels zur Kommunikation
<div class="panel panel-primary">
 <div class="panel-heading">
 <h3 class="panel-title">Titel des Panels</h3>
 </div>
 <p class="panel-body"> … </p>
</div>
Primary
Dieses Panel benutzt die Klasse panel-primary
. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Success
Dieses Panel benutzt die Klasse panel-success
.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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Info
Dieses Panel benutzt die Klasse panel-info
. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Warning
Dieses Panel benutzt die Klasse panel-warning
. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Danger
Dieses Panel benutzt die Klasse panel-danger
. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Panel
Dieses Panel benutzt die Klasse panel-default
. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Abschnitte für Fließtext
Eine Zusammenfassung des Textes kann durch die Klasse lead
hervorgehoben werden. Die weiteren Abschnitte bekommen dann ein einfaches p-Tag.
Standard: 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Bold: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, italic: sed diam nonumy eirmod tempor invidunt ut labore et dolore bold & italic: magna aliquyam erat, sed diam voluptua. At vero eos et Textlink: accusam et justo duo\ dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Listen
Unordered List
<ul>
 <li> … </li>
</ul>
- Lorem ipsum dolor
- sit amet,
- consetetur
- sadips
- cing elitr,
- sed
- sadips
- diam nonumy
- eirmod
- tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Ordered List
<ol>
 <li> … </li>
</ol>
- At vero
- eos et accusam
- et justo duo dolores
- eos et accusam
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
List without list-style
<ul class="list-unstyled">
 <li> … </li>
</ul>
- Lorem ipsum dolor
- sit amet,
- consetetur
- sadips
- cing elitr,
- sed
- sadips
- diam nonumy
- eirmod
- tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Inline List without list-style
<ul class="list-inline">
 <li> … </li>
</ul>
- Lorem ipsum dolor
- sit amet,
- consetetur
- cing elitr.
Tabellen
Einfache Tabelle mit der Klasse table
Achtung
Die Klasse table
ist grundlegend für die Darstellung von Tabellen, sie muss also immer im Code mitgeführt werden.
<table class="table">
 ...
</table>
Lorem ipsum |
dolor sit amet |
---|---|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Gestreifte Tabelle, zusätzlich mit der Klasse table-striped
<table class="table table-striped">
 ...
</table>
Lorem ipsum |
dolor sit amet |
---|---|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Tabelle mit Rand, zusätzlich mit der Klasse table-bordered
<table class="table table-bordered">
 ...
</table>
Lorem ipsum |
dolor sit amet |
---|---|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
Stet clita kasd gubergren, no s |
Zitate
<blockquote>
<p>»Zitierter Text«</p>
<footer>Name des Autors, <cite title="Title der Quelle">Titel der Quelle</cite>, Seite.</footer>
</blockquote>
»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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.«