Einleitung

Der task-o-mat Styleguide garantiert ein einheitliches Aussehen und ermöglicht ein schnelles Erstellen der Basis-Elemente des User Interfaces. Außerdem definiert er Regeln für den Code-Stil, der Projektstruktur und sonstige Konventionen, welche für einen sauberen Source-Code und ein übersichtliches Projekt notwendig sind.

Grundsätzlich werden die Regeln durch eine visuelle Darstellung unterstützt und enthalten, falls notwendig, ein aussagekräftiges Code-Beispiel.

Farben

#08ACF2
$blue-light
#0091EA
$blue
#2384BF
$blue-dark
#EAEAEA
$grey
#909090
$grey-dark
#55B387
$green
#FC5D60
$red
Die primäre Farbe des Projekts ist das frische $blue. Einerseits vermittelt die Farbe Blau eine beruhigende Wirkung und hilft Stress abzubauen. Diese Eigenschaft ist sehr wichtig, da dieses Projekt Aufgaben verwaltet, welche mit Stress und Zeitdruck in Verbindung gebracht werden. Andererseits wird die Farbe mit Pünktlichkeit und Genauigkeit in Verbindung gebracht. Es sollte immer die Farbe $blue verwendet werden, ist jedoch eine Abstufung notwendig, kann auf $blue-light oder $blue-dark zurückgegriffen werden.

Als zweite Farbe kann das zurückhaltende $grey verwendet werden. Diese Farbe wurde gewählt, da dieses Projekt auf einer starken Farbe aufbaut. Eine Abstufung bietet $grey-dark.

Um dem Nutzer positive Rückmeldungen zu vermitteln, kann die Farbe $green eingesetzt werden. $red wird hingegen für Benachrichtigungen oder Fehlermeldungen genutzt.

Schriften

Nunito light
ABCD
Nunito regular
ABCD
Nunito bold
ABCD
Nunito black
ABCD
Open Sans light
ABCD
Open Sans regular
ABCD
Open Sans bold
ABCD
Open Sans Black
ABCD

Schreibweise

task-o-mat

task o mat

Task-o-mat

Task-O-Mat

TaskoMat

Um einen konsistenten Auftritt auf unterschiedlichen Plattformen zu erreichen bitten wir dich darum task-o-mat immer klein zu schreiben und auf die richtigen Wortteilungen zu achten.

Konventionen

Namenskonventionen

BEM - Block:Element:Modifier
Block

Ein Bereich mit aussagekräftiger Bezeichnung.

Element

Ein Element, das nur in einem Block existieren kann.

Modifier

Eine Eigenschaft, die das Element modifiziert.

Beispiel:
<nav class="nav">
    <ul>
        <li class="nav__item nav__item--active">A</li>
        <li class="nav__item">B</li>
        <li class="nav__item">C</li>
    </ul>
</nav>

Helper Klassen dürfen auch ohne einen Block existieren. Es gilt pro Klasse eine Eigenschaft.

Beispiel: 

<span class="text--italic">Hello there</span>
<span class="display--none">I'm a ninja.</span>

Code style

  • Zwei Leerzeichen, soft-tab Indentation
  • Vor der öffnenden, geschwungenen Klammer der Deklaration steht immer ein Leerzeichen
  • Inline Regeln im HTML Dokument vermeiden.
  • Alle Dateinamen in kebab-case (z. B. nav-item.js)
  • Sass Ressourcen, die importiert werden, beginnnen mit einem _ (z. B. _button.scss).
  • Bevorzugte Maßeinheit ist EM.

Hierarchie

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alle Überschriften, Buttons, Inputs und Labels verwenden die Schrift Nunito mit Strichstärke 700.

Die Größe der Überschriften wird durch normalize.css bestimmt.

Der Fließtext verwendet Open Sans mit Strichstärke 300.

Elemente

Navigation

<header class="header">
    <div class="header__logo text--regular">
        <div class="tom-logo tom-logo--grey tom-logo--s"></div>
        task-o-mat
    </div>
    <nav class="header__nav">
        <ul>
            <li>
                <a href="javascript:void(0)">Tasks</a>
            </li>
            <li>
                <a href="javascript:void(0)">Gruppen</a>
            </li>
            <li>
                <a href="javascript:void(0)">Einstellungen</a>
            </li>
        </ul>
    </nav>
</header>

Form Elemente

Inputs und Buttons in Formularen sollten sich an diese Vorgaben halten.

Input mit Label

Input mit Button

Input mit Button vertauscht

Button mit Spinner Animation

Checkbox

Radio Buttons

Was möchtest du trinken?
Input mit Label 
<div class="input__container">
    <input id="ID" class="input" type="text" />
    <label class="input__label" for="ID">
        LABEL TEXT
    </label>
</div>
Input mit Button vertauscht 
<div class="input__container input__container--has-button">
    <input class="input" type="text" />
    <button class="btn btn--default">mehr</button>
</div>
Input mit Button 
<div class="input__container input__container--has-button input__container--reverse">
    <input class="input" type="text" />
    <button class="btn btn--default">mehr</button>
</div>
Button mit Spinner Animation (*js) 
<button class="btn btn--spinner btn--spinner--rotate" data-icon="spinner">
    Senden
</button>

Checkbox (*js) 
<input class="input__checkbox" type="checkbox" data-label="LABEL"/>

Radio Button (*js) 
<input class="input__radio" type="radio" data-label="LABEL"/>

Buttons

Für die meisten Buttons in unserem Projekt wird der blaue Button benutzt. Als zweite farbliche etwas zürckhaltende Alternative kann ein grauer Button genutzt werden. Der rote Button sollte ausschlieslich an Stellen genutzt werden wo der Benutzer eine riskante Aktion, wie etwa das Löschen von Dingen, ausführt.
Default button
<button class="btn--default"></button>
Secondary button
<button class="btn--secondary"></button>
Red button
<button class="btn--red"></button>

Links

Inline links

Lorem ipsum I'm an inline link! Lorem ipsum.

<a href="#" class="link--inline">I'm an inline link!</a>
Read more links

Lorem ipsum dolet virtu ispum lorem.

I'm a read more link! <a href="#" class="link--more">I'm a read more link!</a>

Zitate

Once you eliminate the impossible, whatever remains, no matter how improbable, must be the truth.
Sherlock Holmes 
<blockquote class="blockquote">
    QUOTE
    <div class="blockquote__author">
        AUTHOR
    </div>
</blockquote>

Listen

unordered list

  • A
  • B
  • C
    • C.1
    • C.2
  • D

ordered list

  1. A
  2. B
  3. C
  4. D

Listen sollen für Aufzählungen verwendet werden. Verwende keine anderen Tags. 
<ul>
    <li>
    ...
    <li/>
</ul>
 
<ol>
    <li>
    ...
    <li/>
</ol>

Media Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ein Bild mit Bildunterschrift.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Bilder in Mediablöcken haben einen Abstand von 1em. Mit den Flags --right wird ein Bild links von Text umflossen. Standardmäßig fließt der Text rechts vorbei. 
<div class="mediablock">
    <img src="..." class="mediablock__image" />
    .....
    <img src="..." class="mediablock__image mediablock__image--right" />
    .....
    <div class="mediablock__image">
        <img src="..." />
        <p class="mediablock__image__caption">
            CAPTION
        </p>
    </div>
</div>

Helper

Text Eigenschaften

I am centered.
I am left.
I am right.
I am very bold.
I am bold.
I am thin.
I am italic.
I am underlined.
I am overlined.
I am canceld.
.text--center
.text--left
.text--right
.text--black
.text--bold
.text--thin
.text--italic
.text--underline
.text--overline
.text--cancel

Grid

Ein Grid kann aus einer .row mit mehreren .row__col erzeugt werden. Die Breite kann mittels zwölf Teiler variiert werden.
Die Breite wird nach dem Schema .row__col--TEILER festgelegt. Eine Column mit der Klasse .row__col--6 nimmt daher 50% und ein .row__col--3 25% der Breite ein.