|
|
# 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
|
|
|
|
|
|
```html
|
|
|
{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
|
|
|
|
|
|
```html
|
|
|
<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:
|
|
|
|
|
|
* [Smarty Template Events](https://dev.quiqqer.com/quiqqer/package-smarty/wikis/function_template_event)
|
|
|
* [QUIQQER Events.xml](https://dev.quiqqer.com/quiqqer/quiqqer/wikis/Events-Xml)
|
|
|
|
|
|
## Responsive
|
|
|
|
|
|
Die Templates sollten responsive sein. Hierzu verwenden wir das CSS Framework [unsemantic] (http://unsemantic.com/).
|
|
|
|
|
|
|
|
|
## Guter Anfang
|
|
|
|
|
|
Templates sind für das gute Aussehen von Internetauftritt verantwortlich. Durch`requires` 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 und und...
|
|
|
- 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üght einen Progressbalken beim Seiteladen hinzu.
|
|
|
- quiqqer/unsemantic : das CSS Framework Unsemantic spart viel Arbeit bei Templateerstellung.
|
|
|
- quiqqer/menu: mit der Erweiterung können Sie ein vorgefertigtes Menü in Ihr Template einbauen. Es stehen viele verschiedene Layouts zur Auswahl.
|
|
|
- quiqqer/utils: nutzliche Code Snippets.
|
|
|
- quiqqer/cookieconsent: Implementierung des Cookie Hinweises für die EU-Richtlinie 2009/136/EG (E-Privacy-Richtlinie). |
|
|
\ No newline at end of file |