Design Standard

Damit Designs / Templates schnell angepasst sind, wird hier ein kleiner Leitfaden beschrieben.

CSS Klassen

Wenn Ihr Paket ein Template mitliefert, sollten folgende CSS Klassen verwendet werden.

.content-header
.content-short
.content-body
.content-template
.control-background
.control-color
.control-header
.control-body
.control-template
.button
.button__small
.button__big

.content-header beinhaltet Header-Elemente. Dies sind der Seitentitel und die Seitenkurzbeschreibung. Der Seitentitel sollte immer als <h1> gekennzeichnet sein.

.content-short beinhaltet nur die Seitenkurzbeschreibung

.content-body beinhaltet den Seiteninhalt

.content-template beinhaltet extra Seitenfunktionalität wie zum Beispiel eine Liste der Unterseiten.

.control-header, .control-body und .control-template spielen die gleiche Rolle aber für die Controls.

Im Standardfall beinhaltet der .content-header <h1> und .content-short.

Beispiel

{if $Template->getAttribute('content-header')}
<section class="content-header grid-100 mobile-grid-100">
    <header>
        <h1>{$Site->getAttribute('title')}</h1>
    </header>

    {if $Site->getAttribute('short')}
    <div class="content-short">
        {$Site->getAttribute('short')}
    </div>
    {/if}
</section>
{/if}

{if $Template->getAttribute('content-body') && $Site->getAttribute('content')}
<section class="content-body grid-100 mobile-grid-100">
    {$Site->getAttribute('content')}
</section>
{/if}

<section class="content-template grid-100 mobile-grid-100">
    {control control="\Meiin\Control\"}
</section>

Template Events

Folgende Template-Events sollten im Template enthalten sein

<head>
    {template_event name="quiqqer::template::header::begin"}

    <!-- head content -->

    {template_event name="quiqqer::template::header::end"}
</head>
<body>
    {template_event name="quiqqer::template::body::begin"}

    <!-- content -->

    {template_event name="quiqqer::template::body::end"}
</body>

Hilfreiche Links:

Responsive

Die Templates sollten responsive sein. Hierzu verwenden wir das CSS Framework unsemantic.

Guter Anfang

Templates sind für das gute Aussehen von Internetauftritt verantwortlich. Durchrequires kann man die Funktionalität einer Webseite schnell und einfach erweitern. Nachfolgend werden einige Plugins kurz beschrieben:

quiqqer/quiqqer: das Grundsystem. Ohne QUIQQER läuft nichts.
quiqqer/bricks: möchte man eine Internetseite schnell bauen, ist die Brick Erweiterung genau das richtige. Bricks liefern viele vorgefertigte Module, wie Slider, Listing (mit vielen Layouts), simple Google Maps, und viele mehr
quiqqer/fontawesome: FontAwesome Icons sind in QUIQQER verfügbar. Platzieren Sie den Tag {fontawesome} in Headbereich der index.html und verwenden Sie überall die bekannte, skalierbare Icons.
quiqqer/pace: fügt eine Progressbar beim Laden der Seite hinzu.
quiqqer/unsemantic : das CSS Framework unsemantic spart viel Arbeit bei der Template-Erstellung.
quiqqer/menu: mit der Erweiterung können Sie ein vorgefertigtes Menü in Ihr Template einbauen. Es stehen viele verschiedene Layouts zur Auswahl.
quiqqer/utils: nützliche Code Snippets.
quiqqer/cookieconsent: Implementierung des Cookiehinweises für die EU-Richtlinie 2009/136/EG (E-Privacy-Richtlinie).

design_standard