CSS

Grid System

Gestalte komplexe Layouts mithilfe eines 12 Spalten Grid Systems. Eine Webseite kann gedanklich in eine Art Tabelle mit mehreren Spalten und Zeilen unterteilt werden. Ist die Tabelle zum Beispiel 12 Spalten breit und 1 Zeile hoch so sind über 450.000.000 Möglichkeiten der Positionierung möglich. Durch das Implementieren weiterer Klassen sind noch einmal mehr Optionen offen.

Container

Container umschließen mehrere DOM Elemente und definieren deren maximale Breite. Im Optimalfall sollten die Containerklassen in semantische Elemente eingebunden werden, also zum Beispiel im <main> </main> oder <section> </section> Tag.

<div class="container-xs">.container-xs</div>
<div class="container-s">.container-s</div>
<div class="container-m">.container-m</div>
<div class="container-l">.container-l</div>
<div class="container-xl">.container-xl</div>

Gleiche Spaltengröße

Nachdem die Größen der Container bestimmt wurden, wird eine .row Klasse eingerichtet. Jeder <div> Tag mit der Klasse .row repräsentiert eine Zeile in unserer gedanklichen Tabelle. Innerhalb der Row können bis zu 12 .col Klassen eingebunden werden. Diese teilen sich den freien Platz untereinander auf.

<div class="row">
    <div class="col">Erste von zwei Spalten</div>
    <div class="col">Zweite von zwei Spalten</div>
</div>
<div class="row center">
    <div class="col">Erste von drei Spalten</div>
    <div class="col">Zweite von drei Spalten</div>
    <div class="col">Dritte von drei Spalten</div>
</div>

Verschachtelung

Ebenfalls möglich ist es, mehrere Tabellen ineinander zu verschachteln - so entstehen noch mehr Möglichkeiten ein Layout zu gestalten. Alle zuvor erwähnten Attribute sind weiterhin anwendbar.

<div class="row">
    <div class="col">Level 1 .col</div>
    <div class="col">Level 1 .col
        <div class="row">
            <div class="col">Level 2 .col
                <div class="row">
                    <div class="col">Level 3 .col</div>
                    <div class="col">Level 3 .col</div>
                </div>
            </div>
            <div class="col">Level 2 .col</div>
        </div>
    </div>
    <div class="col">Level 1 .col</div>
</div>

Horizontale Zentrierung

Füllen die angegebenen Spalten in einer Tabelle nicht die maximale Breite des Bildschirms aus, so können diese nach belieben positioniert werden. Standardmäßig werden Elemente und Texte Rechtsbündig zentriert.

<div class="row start">
    <div class="col"> .row in .container-m | .start</div>
</div>
<div class="row center">
    <div class="col xs3"> .row in .container-m | .center</div>
</div>
<div class="row end">
    <div class="col"> .row in .container-m | .end</div>
</div>

Vertikale Zentrierung

Im Falle, dass ein Container höher als die eingeschlossenen Elemente, können die Kindelemente entweder Oben, Unten oder in der Mitte positioniert werden.

<div class="row top">
	<div class="col blue-medium"> .row in .container-m | .top</div>
</div>
<div class="row row-cust-height middle">
	<div class="col blue-medium"> .row in .container-m | .middle</div>
</div>
<div class="row row-cust-height bottom">
	<div class="col blue-medium"> .row in .container-m | .bottom</div>
</div>

Erweiterte Positionierung

Auch im Nachhinein ist es noch möglich die Position einiger Elemente zu ändern. Zum Beispiel können die Spalten geordnet oder eingerückt werden.

Spalten einrücken

Um keine leeren Spalten definieren zu müssen, können einzelne Elemente weiter nach rechts gedrückt werden. Die Logik ist deckend zu der des Grid Systems und somit einfach verknüpfbar.

<div class="row">
    <div class="col push-xs2"> .col .push-xs2</div>
</div>
<div class="row">
    <div class="col push-xs4"> .col .push-xs4</div>
</div>
<div class="row">
    <div class="col push-xs6"> .col .push-xs6</div>
</div>
<div class="row">
    <div class="col push-xs8"> .col .push-xs8</div>
</div>
<div class="row">
    <div class="col push-xs10"> .col .push-xs10</div>
</div>
<div class="row">
    <div class="col push-xs11"> .col .push-xs11</div>
</div>

Ordnen der Spalten

Sind nun zum Beispiel 6 Column Elemente definiert und das letzte Element im Sourcecode soll ganz nach vorne gebracht werden, so kann die Klasse first verwendet werden. Um das Gegenteil dazu zu erreichen wird die Klasse last verwendet. Weiteres kann über die Klassen .order1 - .order12 die komplette Ordnung verändert werden.

<div class="row center">
    <div class="col"> DOM Element 1 </div>
    <div class="col"> DOM Element 2 </div>
    <div class="col first"> DOM Element 3 | .first</div>
</div>

Mit Sass personalisieren

Falls Vorkenntnisse über Precompiler und im Speziellen über die Sprachen SASS und SCSS vorhanden ist, können die Werte vordefinierte Variablen geändert und das Stylesheet personalisiert werden. Zum Beispiel kann die Anzahl der Spalten von 12 auf 24 geändert werden.

Variablen

Des Weiteren könnten die Breakpoints oder der Seitenrand verändert werden.

Farb System

Das Framework bietet eine kleine Selektion an vordefinierten Farbräumen. Neben den Grundfarben bieten wir einen Erweiterten Farbraum und vordefinierte Themen, wie zum Beispiel eines für Farben des Herbstes.

<div class="orange-medium"></div>
<p class="text-orange-medium"></p>

Farbrad

Hier werden alle Farbrad Farben mit 12 verschiedenen Tans als Klassennamen aufbereitet.

Erweitertes Spektrum

Der erweiterte Farbraum fügt weitere wichtige Farben zur Farbauswahl hinzu.

Farbkreationen

Wollen Sie einen Webshop für Herbstmode eröffnen, jedoch kein Vorwissen im Bereich Farblehre? Auch das sollte mit den vordefinierten Schemata keine Problem für sie werden.

Media

Da Medien Elemente häufig in Webseiten eingebaut werden haben wir einige Klassen bereit gestellt die das Einbinden erleichtern. Wir haben die Medien in die Bereiche Bilder, Videos und Audio geteilt.

Bilder

Um Bilder durch das Framework responsive zu machen gibt es die Klasse .img-wrapper welche es ermöglicht Bilder das sie sich automatisch prozentuell an die Größe des Browserfensters anpassen. Um Bildern ein spezielles Ausehen zu geben können die Klassen .round-img und .circle-img zusätzlich verwendet werden um Bilder abzurunden oder ganz rund zu gestalten.

<div class="image-wrapper">
    <img class="round-img" src="../lib/img/expimage/CommachioI_HAG.jpg" alt="CommachioI Hagn">
</div>
<div class="image-wrapper">
    <img class="circle-img" src="../lib/img/expimage/CommachioII_HAG.jpg" alt="CommachioII Hagn">
</div>
<div class="image-wrapper">
    <img src="../lib/img/expimage/CommachioIII_HAG.jpg" alt="CommachioIII Hagn">
</div>

Video

Die Klasse .video-wrapper-16 und .video-wrapper-4 ermöglichen das Videos sich prozentuell zum Browserfenster ändern wobei die eine Klasse für 16:9 Videos geeigent ist und die andere für Videos im 4:3 Format.

<div class="video-wrapper-4">
    <video controls class="col xs12">
        <source src="../lib/img/expimage/Attersee%20I%20HAG.m4v" type="video/mp4">
    </video>
</div>
<div class="video-wrapper-16">
   <video controls class="col xs12">
       <source src="../lib/img/expimage/Attersee%20I%20HAG.m4v" type="video/mp4">
   </video>
</div>

Audio

Der <audio> Tag in HTML bietet eine standart Möglichkeit Audiodateien in Webseiten einzubinden. Das default Design des Tags wird in jedem Browser unterschiedlichen dargestellt. Das Framework beinhaltet die Klasse .audio-wrapper welche dem Audio Tag eine individuelles Aussehen, das in allen Browsern gleich ist, gibt.

<h3 class="test">Gleiche Spaltengröße</h3>

Tabellen

Tabellen sind ein weiteres wichtiges Layout Element und können vielseitig eingesetzt werden. Das Framework bietet ein Standartdesign für den <table> Tag. Zusätzlich gibt es 3 unterschiedliche Klassen die dem <table> Tag zugewiesen werden können um der Tabelle ein spezielles Aussehen zu geben. Mit der Klasse .table-light wird beim Überfahren einer Zeile die Hintergrundfarbe dieser Tabelle grau. Durch die Klasse .table-responsive bekommt die Tabelle die Eigenschaft sich prozentual dem Browserfenster anzupassen. Um eine gestreifte Tabelle zu verwenden kann dem <table> Tag die Klasse .table-stripped hinzugefügt werden.

<table>
    <tr>
        <th>Farben</th>
        <th>Schriftarten</th>
        <th>Elemente</th>
    </tr>
    <tr>
        <td>Rot</td>
        <td>Roboto</td>
        <td>Header</td>
    </tr>
    <tr>
        <td>Grün</td>
        <td>Raleway</td>
        <td>Cards</td>
    </tr>
    <tr>
        <td>Blau</td>
        <td>Open-Sans</td>
        <td>Footer</td>
    </tr>
</table>
<table class="table-light">
    <tr>
        <th>Farben</th>
        <th>Schriftarten</th>
        <th>Elemente</th>
    </tr>
    <tr>
        <td>Rot</td>
        <td>Roboto</td>
        <td>Header</td>
    </tr>
    <tr>
        <td>Grün</td>
        <td>Raleway</td>
        <td>Cards</td>
    </tr>
    <tr>
        <td>Blau</td>
        <td>Open-Sans</td>
        <td>Footer</td>
    </tr>
</table>
<table class="table-stripped">
    <tr>
        <th>Farben</th>
        <th>Schriftarten</th>
        <th>Elemente</th>
    </tr>
    <tr>
        <td>Rot</td>
        <td>Roboto</td>
        <td>Header</td>
    </tr>
    <tr>
        <td>Grün</td>
        <td>Raleway</td>
        <td>Cards</td>
    </tr>
    <tr>
        <td>Blau</td>
        <td>Open-Sans</td>
        <td>Footer</td>
    </tr>
</table>

Werkzeuge

Dieser Abschnitt beschäftigt sich mit kleinen Werkzeugen die verwendet werden können um das Layout einer Webseite zu verfeinern. Um den Fluss eines Elements zu verändern gibt es die Klassen .float-right und .float-left. Eine weitere wichtige Klasse ist .block mit ihr können Elemente als Block Elemente definiert werden das heißt das nach diesem Element ein Zeilenumbruch stattfindet. Um Inhalte ersichtlich zu trennen gibt es die Klasse .line mit der eine Trennline hinzugefügt werden kann sie sollte nur innerhalb eines <hr> Tags verwendet werden.

Dieser Text ist links fließend

Dieser Text ist rechts fließend

Das ist ein Block Element

<span>Dieser Text ist links fließend</span>
<img src="../lib/img/expimage/MykonosII_KUT.JPG" class="float-right" alt="MykonosII Kutis">
<span>Dieser Text ist rechts fließend</span>
<img src="../lib/img/expimage/MykonosII_KUT.JPG" class="float-left" alt="MykonosII Kutis">
<span class="block">Das ist ein Block Element</span>

Box Schatten

Da unser Framework Elemente wie Header, Footer und Karten enthält bietet es auch verschiedene Box Schatten für die jeweiligen Elemente an. Der Box Schatten hat den Effekt das er Elemente für den Betrachter so aussehen lässt als würde die entsprechende Komponente nicht Bestandteil der Website sein, sondern oben drauf liegen. Es gibt 5 verschiedene Klassen die einen unterschiedlich starken Schatten werfen. Die Klassen können über den Namen .shadow-ex-light,.shadow-light,.shadow-medium, .shadow-hard und .shadow-ex-hard wobei der Schatten aufsteigend stärker wird.

<div class="shadow-ex-light"></div>
<div class="shadow-light"></div>
<div class="shadow-medium"></div>
<div class="shadow-hard"></div>
<div class="shadow-ex-hard"></div>

Elemente ausblenden

In diesem Abschnitt werden die Klassen .show und .hide erklärt. Das Framework enthält einige Klassen die bestimmen ab welcher Bildschirmgröße welches Element angezeigt werden soll und welches versteckt werden soll. Dafür gibt es die Klassen show-größe und hide-größe. An der Stelle der Größe ist die gewünschte Bildschirmgröße einzusetzen. Es gibt .sl, .md, .md-up.md-down,.lg und nur .show ohne Größe. Dieselben Regeln gelten auch für die .hide Klasse.

Hide

Show

<div class="hide">Box hide</div>
<div class="hide-sl">Box hide-sl</div>
<div class="hide-md">Box hide-md</div>
<div class="hide-md-down">Box hide-md-down</div>
<div class="hide-md-up">Box hide-md-up</div>
<div class="hide-lg">Box hide-lg</div>
<div class="show">Box show</div>
<div class="show-sl">Box show-sl</div>
<div class="show-md">Box show-md</div>
<div class="show-md-down">Box show-md-down</div>
<div class="show-md-up">Box show-md-up</div>
<div class="show-lg">Box show-lg</div>

Css Animationen

Animationen verdeutlichen dem User, dass eine Aktion stattgefunden hat. Nicht immer ist es sinnvoll sie zu verwenden und auch hier gilt "keep it simple". Eine Animation kann dem User auch eine Art Feedback geben, so können zum Beispiel Erklärungstexte bei falscher Eingabe erscheinen. Ein Weiteres Beispiel wären Informationsboxen oder Ankündigungen bei erstmaligem Anmelden. Für einige dieser Fälle werden Klassen bereitgestellt, die entweder mit dem "transition" oder dem "animation" Attribut ausgestattet sind. Weiteres wurden verschiedenste Schlüsselbildanimationen, oder in Fachspache auch Keyframes gennant, ausprogrammiert. Diese bestimmen die Art der Animation, so kann zum Beispiel ein Element in alle Richtungen hinausbewegt werden.

/* Dauer | Timingfunktion | Verzögerung | #Iterationen | Richtung | Füllmodus | Abspielstatus | Name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* Variables Attribut | Dauer | Timingfunktion | Verzögerung */
transition: margin-right 4s ease-in-out 1s;

Schlüsselbildanimationen

Wie oben bereits angesprochen verwenden Animationen Schlüsselbilder. In diesen kann die Position eines Elements, in einer bestimmten Zeitspanne der Animation, bestimmt werden. Im Beispiel unterhalb wird ein Keyframe mittels CSS definiert - Laden Sie jedoch unser Framework herunter müssen sie diese nicht beachten. Verwenden Sie einfach die bereitgestellten Klassennamen im nachfolgenden Bereich.

@keyframes moveOut {
    from {top: 500px;}
    to {top: .200px;}
}

Möglichkeiten

Die unten aufgeführten Klassen rufen beim Erstellen des DOM's Animationen auf. Mit fortgeschrittenem Wissen können die Klassen auch zu anderen Zeitpunkten über JavaScript aufgerufen werden.

<div class="moveIn"></div>
<div class="moveOut"></div>
<div class="slideIn"></div>
<div class="slideOut"></div>
<div class="slideLeft"></div>
<div class="slideRight"></div>
<div class="Wiggle"></div>