Komponenten

Buttons

Ein weiteres wichtiges Gestaltungselement sind Buttons. Das Framework bietet ein Standarddesign für Buttons das über den Klassennamen .bttn aufgerufen werden. Der Button ist standardgemäß mittelgroß und hat die Hintergrundfarbe Blau sowie leicht abgerundete Ecken. Die Buttonschrift hat eine Größe von 1rem und der Button hat überall einen kleinen Innnenabstand.

<button class="bttn">Button</button>
<button class="bttn olive">Button</button>
<button class="bttn yellow">Button</button>
<button class="bttn maroon">Button</button>
<button class="bttn purple">Button</button>
<button class="bttn gray">Button</button>

Größe

Um die Schriftgröße sowie die Buttongröße anzupassen können zusätzlich die Klassen .ex-sl, .sl, .md, .lg und .ex-lg verwendet werden. Die Klasse .ex-sl beinhaltet die kleinstmögliche Größe und die Klasse .ex-lg die größtmögliche Größe.

<button class="bttn">Button</button>
<button class="bttn ex-lg">Button</button>
<button class="bttn lg">Button</button>
<button class="bttn md">Button</button>
<button class="bttn sl">Button</button>
<button class="bttn ex-sl">Button</button>

Stil

Weiteres gibt es Klassen die den Buttons zusätzliche Styles geben wie .square, .round und .ex-round. Die Klasse .square macht den Button komplett eckig und die Klasse ex-round komplett rund. Durch .round werden die Ecken nur leicht abgerundet.

<button class="bttn square">Button</button>
<button class="bttn round">Button</button>
<button class="bttn ex-round">Button</button>

Karten

Die Karte ist ein praktisches Element des Frameworks das es möglich macht verschiedene Inhalte auf eine Komponente zusammenzufassen. Es gibt verschiedene Typen von Karten die dem Benutzer eine Auswahl bieten seinen gewünschten Inhalt passend und einfach darzustellen. Weiteres eigenen sich Karten perfekt mehrere Elemente mit ähnlichen Inhalt als Sammlung darzustellen oder Zusatzinformationen anzuzeigen. Jede Karte besteht aus einer .header, .content und .footer Klasse. Im Header sollte sich die Überschrift befinden. Die .content Klasse beinhaltet den Inhalt der Karte und die .footer Klasse enthält zusätzliche Informationen oder Links.

Einfache Karte

Die einfache Karte kann über den Klassenname .simple-card aufgerufen werden und besteht nur aus Text gegliedert in den Titel der Karte welcher sich im .header befinden sollte. In Textinhalt der Karte welcher sich in der .content Klasse und dem p Tag befinden sollte und in zusätzliche Informationen 7 oder Links welche sich in der .footer Klasse befinden sollten.

<div class="simple-card">
    <div class="card-header">
        <span class="card-title">Titel der Karte</span>
    </div>
    <p class="card-content normal_p">
        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.
        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.
        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.
    </p>
    <div class="card-footer">
        <a class="card-link" href="#">Link</a>
    </div>
</div>

Fußzeile

Die Fußzeile der Karte besteht aus der .footer Klasse. Sie ist durch eine horizontale Linie vom Rest der Karte getrennt. Die Fußzeile einer Karte eignet sich perfekt um kurze Zusatzinformationen sowie Verlinkungen zu platzieren. Um Links ein spezielles Aussehen zu verleihen könne die Klassen für Links verwendet werden welche auf der Typografie Seite erklärt werden.

<div class="simple-card">
    <div class="card-footer spacearound">
        <a class="card-link" href="#">Link</a>
        <a class="card-link" href="#">Link</a>
        <a class="card-link" href="#">Link</a>
        <a class="card-link" href="#">Link</a>
    </div>
</div>

Kontakt Karte

Das Framework bieten zusätzlich auch noch eine Kontaktkarte an welche dazu verwendet werden kann um Personenbeschreibungen oder ähnliche Informationen darzustellen. Sie besteht aus einem kleinen Bild in der rechten oberen Ecke einem Titel, Inhalt und einem Footer. Die Karte kann durch die Klasse .contact-card aufgerufen werden und ist ebenfalls in einen .header, .content und .footer unterteilt.

Titel der Karte

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. 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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

Link

<div class="contact-card">
    <div class="card-header">
        <span class="card-title">Titel der Karte</span>
        <img  style="float: right" class="card-img" src="../lib/img/hagn.jpg" alt="Hagn Portait">
    </div>
    <p class="card-content text_demo">
        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.
        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.
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
    </p>
    <div class="card-footer">
        <a class="card-link" href="#">Link</a>
    </div>
</div>

Media Karte

Die Besonderheit der Media Karte ist, dass sie in den .header ein Bild eingefügt werden kann. Sie besteht ebenfalls aus dem .header, .content und .footer und kan über die Klasse .media-card aufgerufen werden. Das Bild sollte durch den <img> Tag in der .header Klasse eingefügt werden und der Titel der Karte sollte die Klasse .title übergeben werden.

Titel der Karte

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.

Link

<div class="media-card">
    <div class="card-header">
        <span class="card-title">Titel der Karte</span>
        <img src="../lib/img/expimage/MykonosIV_KUT.JPG" alt="MykonosIV Kutis">
    </div>
    <p class="card-content text-left">
        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.
    </p>
    <div class="card-footer">
       <a class="card-link" href="#">Link</a>
    </div>
</div>

Kopfzeile

Da jede größere Website eine Navigation benötigt stellt das Framework verschiedene Klassen bereit um das zu realisieren. Die Kopfzeile besteht aus einem Container und verschiedenen Elementen die frei wählbar sind und im Container latziert werden können. Der Container kann über die Klasse .nav-container aufgerufen werden und sollte im nav Tag platziert werden damit die Semantik nicht außer Acht gelassen wird.

<nav class="nav-container expand-m">
    <a class="toggle" href="#"></a>
    <img class="logo" src="../lib/img/creative_puzzle_v1.5.1_.png" />
    <a class="brand-name" href="#">CompanyName</a>
    <div class="nav">
        <ul>
            <li class="nav-item">
                <a class="nav-link2" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link2" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link2" href="#">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link2" href="#">Impressum</a>
            </li>
        </ul>
    </div>
    <div class="icon-container">
        <img src="../lib/img/twitter.png" alt="twitter icon">
        <img src="../lib/img/facebook.png" alt="facebook icon">
        <img src="../lib/img/instagram.png" alt="instagram icon">
    </div>
</nav>

Brand Name

Der Brand Name ist eine Klasse die nur innerhalb der .nav-container Klasse verwendet werden kann. Er kann über die Klasse .brand-name aufgerufen werden und ist dazu da den Markennamen bzw. Firmenname in der Navigation hervorzuheben.

<a class="brand-name" href="#">CompanyName</a>

Logo

Um ein Logo in die Kopfzeile einzubinden kann die Klasse .logo übergeben werden sie kann ebenfalls nur in einem .nav-container verwendet werden und ist dazu dar, das Logo in der Navigation zu platzieren.

<img class="logo" src="../lib/img/creative_puzzle_v1.5.1_.png" alt="Creative Puzzle Logo">

Stil

Die Klasse .icon-container ermöglicht es einfach Social Media Icons in die Kopfzeile einzufügen. Weiteres gibt es noch eine Option um Dropdown Menus zu realisieren. Die Klasse .drop-menu sollte nur an ein .nav-item übergeben werden. Damit das Dropdown Menu auch ausklappt muss dem jeweiligen .nav-item auch die Klasse .drop-toggle übergeben werden. Alle Elemente die innerhalb eines .drop-menu liegen benötigen die Klasse .drop-item um auch richtig dargestellt zu werden.

<nav class="nav-container nav-center expand-m">
    <a class="toggle" href="#"></a>
    <img class="logo" src="../lib/img/creative_puzzle_v1.5.1_.png" alt="Creative Puzzle Logo">
    <a class="brand-name" href="#">CompanyName</a>
    <div class="nav">
        <ul>
            <li class="nav-item">
                <a class="link-underline-white">Home</a>
            </li>
            <li class="nav-item">
                <a class="link-underline-white">About</a>
            </li>
            <li class="nav-item">
                <a class="link-underline-white drop-toggle" href="javascript:void(0);">Dropdown 1</a>
                <div class="drop-menu">
                    <a class="drop-item">Dropdown Item</a>
                    <a class="drop-item">Dropdown Item</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="link-underline-white drop-toggle" href="javascript:void(0);">Dropdown 2</a>
                <div class="drop-menu">
                    <a class="drop-item">Dropdown Item</a>
                    <a class="drop-item">Dropdown Item</a>
                    <a class="drop-item">Dropdown Item</a>
                </div>
            </li>
        </ul>
    </div>
    <div class="icon-container">
        <img src="../lib/img/twitter.png" alt="twitter icon">
        <img src="../lib/img/facebook.png" alt="facebook icon">
        <img src="../lib/img/instagram.png" alt="instagram icon">
    </div>
</nav>

Positionierung

m die Kopfleiste nach belieben zu positionieren stellt das Framework einige Klassen bereit die im .nav-container verwendet werden können. Die Klasse .nav-strech kann dazu verwendet werden um die Elemente so zu strecken, das der ganze Container ausgefüllt wird. Die Klasse .nav-center richtet alle Elemente innerhalb des .nav-container zentriert aus. Ebenso positionieren die Klassen .nav-start und .nav-end alle Elemente an den Anfang oder an das Ende eines Containers. Die Klassen .nav-around und .nav-evenly sind für die Abstände zwischen den einzelnen Elementen zuständig. Durch .nav-around wird der Abstand um jedes Element gleich aufgeteilt. Die Klasse .nav-evenly teilt den Abstand zwischen den Elementen gerecht auf.

Nav Center

Nav Start

Nav End

<nav class="nav-container nav-center expand-m"></nav>
<nav class="nav-container nav-start expand-m"></nav>
<nav class="nav-container nav-end expand-m"></nav>

Navigation

Die Hauptnavigation ist neben dem Content das wichtigste Element einer Website. Sie sollte klar strukturiert und leicht zugänglich sein. Die einzelnen Menüpunkte sollten klar und deutlich erkennbar sein und nur aus den wichtigsten Bereichen der Website bestehen. Der Besucher der Seite darf nicht verwirrt werden. Ziel einer guten Navigation ist es, mit möglichst wenig Verweisen möglichst viele Seiten zu erreichen.

Seiten Navigation

Die Seiten Navigation kann mit der Klasse .side-nav-container aufgerufen werden. Sie besteht aus einem Container und ist in .side-nav-header, .side-nav-content und .side-nav-footer unterteilt.

<nav class="side-nav-container">
    <div class="side-nav-header">
        <img src="../lib/img/creative_puzzle_v1.5.1_.png" alt="Creative Puzzle Logo">
        <input class="searchbar" type="search" placeholder="Search . . .">
    </div>
    <div class="side-nav-content">
        <a class="link-underline-green " href="#">Home</a>
        <a class="link-underline-green" href="#">About</a>
        <a class="link-underline-green" href="#">Contact</a>
        <a class="link-underline-green" href="#">Team</a>
        <a class="link-underline-green" href="#">Sponsors</a>
        <a class="link-underline-green" href="#">More</a>
    </div>
    <div class="side-nav-footer">
        <a href="#" class="side-nav-link">Impressum</a>
    </div>
</nav>

Kopfzeile

In den .side-nav-header kann ein Logo über mit dem <img> Tag platziert werden sowie eine Suchleiste die über die Klasse .searchbar gestylt werden kann

<nav class="side-nav-container side-nav-container_header_demo">
    <div class="side-nav-header side-nav-header_demo">
        <img src="../lib/img/creative_puzzle_v1.5.1_.png" alt="Creative Puzzle Logo">
        <input class="searchbar" type="search" placeholder="Search . . .">
    </div>
</nav>

Inhalt

In den .side-nav-content können alle gewünschten Verweise über <a> Tags eingefügt werden sie sind der wichtigste Bestandteil der Seiten Navigation.

<nav class="side-nav-container side-nav-container_content_demo">
    <div class="side-nav-content side-nav-content_demo">
        <a class="link-underline-green " href="#">Home</a>
        <a class="link-underline-green" href="#">About</a>
        <a class="link-underline-green" href="#">Contact</a>
        <a class="link-underline-green" href="#">Team</a>
        <a class="link-underline-green" href="#">Sponsors</a>
        <a class="link-underline-green" href="#">More</a>
    </div>
</nav>

Fußzeile

In den .side-nav-footer können Links sowie das Impressum platziert werden. Er ist zentriert und wird ist durch eine Linie vom Inhalt der Seitennavigation getrennt.

<nav class="side-nav-container side-nav-container_footer_demo">
    <div class="side-nav-footer side-nav-footer_demo">
        <a href="#" class="side-nav-link">Impressum</a>
    </div>
</nav>

Tabs

Tabs sind eine gute Alternative zu Navigationsleisten. In ihrer Funktion sind Sie ident. Je nach Anzahl werden Listeneinträge hinzugefügt, diese können mit anderen Seiten verknüpft werden. Die Klasse .active wird jeweils auf der aktiven Seite eingefügt und verdeutlicht den Aufenthaltsort des Users.

<header class="tab-nav">
    <ul class="tab-list">
        <li class="tab active">Home</li>
        <li class="tab">About</li>
        <li class="tab">Shop</li>
        <li class="tab">Other</li>
        <li class="tab">Address</li>
        <li class="tab">Out</li>
        <li class="tab">Input</li>
        <li class="tab">Whateva</li>
    </ul>
</header>

Dropdown

Ebenso wie Tabs bieten sich auch Dropdowns als Navigation einer Seite an. Jedes Dropdown Element besteht aus mehrern Listen Elementen welche beim Überfahren mit der Maus ausgeklappt werden. Jedes Dropdown Element kann beliebig viele Listen Elemente beinhalten.

<div class="dropdown-main">
    <ul class="dropdown">
        <li>First
        <ul class="dropdown-index">
            <li>First</li>
            <li>Secound</li>
            <li>Third</li>
            <li>Forth</li>
            <li>Fifth</li>
        </ul>
        </li>
        <li>Secound
        <ul class="dropdown-index">
            <li>First</li>
            <li>Secound</li>
            <li>Third</li>
            <li>Forth</li>
            <li>Fifth</li>
        </ul>
        </li>
        <li>Third
        <ul class="dropdown-index">
            <li>First</li>
            <li>Secound</li>
            <li>Third</li>
            <li>Forth</li>
            <li>Fifth</li>
        </ul>
        </li>
        <li>Forth
        <ul class="dropdown-index">
            <li>First</li>
            <li>Secound</li>
            <li>Third</li>
            <li>Forth</li>
            <li>Fifth</li>
        </ul>
        </li>
        <li>Fifth
        <ul class="dropdown-index">
            <li>First</li>
            <li>Secound</li>
            <li>Third</li>
            <li>Forth</li>
            <li>Fifth</li>
        </ul>
        </li>
    </ul>
</div>

Suchleiste

Zusätzlich beinhaltet das Framework eine Klasse .search-bar oder .side-nav-search die in einem <input> Tag verwendet werden sollte um das Standarddesign einer Suchleiste aufzurufen.

<input type="search" class="searchbar" placeholder="search . . .">

Formulare

Formulare bieten dem Benutzer eine Möglichkeit Eingabedaten zu erfassen. Da Formularelemente default in jeden Browser ein unterschiedliches Aussehen haben, bietet unser Framework auch einige Klasse um diese Elemente zu stylen.

Textfelder

Das Textfeld ist eines der wichtigsten Formularelemente und kann über den Klassennamen .textfield aufgerufen werden. Zusätzlich gibt es die Klasse .flatfield welche das Textfeld nur mit einem Unterstrich darstellt.

<input type="text" class="textfield" placeholder="Textfield">
<input type="text" class="flatfield" placeholder="Flatfield">

Regler

Der Regler hat defaultmäßig in jedem Browser ein anderes Design. Dafür beinhaltet unser Framework die Klasse .slider die dem Regler ein Standarddesign übergibt das in jedem Browser gleich aussieht. Zusätzlich gibt es noch die Klassen .slider-flat und .slider-material die dem Regler ein anderes Aussehen geben.

<input type="range" class="slider">
<input type="range" class="slider-flat">
<input type="range" class="slider-material">

Checkboxen

Da Checkboxen defaultmäßig kein anschauliches Design aufweisen bietet das Framework ebenfalls ein Standarddesign das über die Klassen .checkbox und .checkbox-cancle aufgerufen werden kann. Die .checkbox Klasse wird bei aktivieren durch ein grünes Hackerl makiert. Die .checkbox-cnacle Klasse wird bei aktivieren durch ein rotes Kreuz makiert. Zusätzlich kann bei den Klassen die Option -dark und -light ausgewählt werden und sollte der gewünschten .checkbox Klasse zugeordnet werden.

<input type="checkbox" class="checkbox-dark">
<input type="checkbox" class="checkbox-light">
<input type="checkbox" class="checkbox-cancle-dark">
<input type="checkbox" class="checkbox-cancle-light">

Radio Buttons

Radio Button Styles können über den Klassenname .radio-bttn-light und .radio-bttn-dark aufgerufen werden.

<input type="radio" class="radio-bttn-light" />
<input type="radio" class="radio-bttn-dark" />

Icons

Um Aktionen oder Einträge zu vereinfachen und zu symbolisieren wurden simplifizierte Icons verwendet. Sie beinhalten weder aufwändige Grafiken noch Farbschemen. Es wurde simple Vektoren verwendet um sowohl die Responsiveness als auch das Verständnis zu bewahren. Um eine Vielzahl an Icons bereitzustellen wurde die Bibliothek Fontello verwendet. Darunter sind verschiedene Icon Fonts (FontAwesome, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons und Web Symbols) vertreten, die der SIL, BSD, MIT oder CC Lizenzen unterliegen und somit in eigene Projekte eingebunden werden dürfen, allerdings ist eine namentliche Nennung im Quellcode zwingend anzuführen. Weitere Informationen entnehmen Sie bitte den angeführten Links.

Include

Die jeweiligen Klassen, bzg. Schriftcodes werden unter Kollektionen aufgeführt. Die Icons können über den <span> Tag mit dem jeweiligen Icon Klassennamen aufgerufen werden. Zusätzlich muss der dazu gehörige Code im <span> Tag durch ein #& und die gewünschte Nummer angegeben werden.

<span class="icon-glass">&#xe800;</span>Icon Glass
<span class="icon-music">&#xe801;</span>Icons Music

Collection