13 - Responsiv-Design

Die Vorlage für dieses Tutorial basiert weitgehend auf den Dateien des Silverstripe-Theme's 'simple' das bei der Installation mitgeliefert wird. Ich habe für die Vorgabe 'tutorial' etwas aufgeräumt. So ist es übersichtlicher, die im Tutorial beschriebenen Einzelschritte zu bauen und zu erklären.

Die im Theme 'simple' eingebauten Funktionen lassen sich mit wenigen Handgriffen in das Theme 'tutorial' oder in jedes selbstgebaute Template einbauen.

Webfonts benutzen

Im Ordner 'webfonts' findet sich die Schrift 'CamboRegular'. Leider verfügt der Webfont über keine Umlaute und französische Auszeichnungen. das führt dazu, dass diese mit dem Font-Substitut Arial angezeigt werden, was ein unschönes Schriftbild erzeugt.

Ich habe zusätzlich die Free Webfonts DroidSans und DroidSans-Bold hinzugefügt. (Die Schrift ähnelt der Adobe-Hausschrift Myriad).

Der Webfont 'websymbols-regular' beinhaltet Symbole. Das Symbol, das erscheint wenn die Website auf einem Smartphone aufgerufen wird, um die Navigation einzublenden, oder das Lupensymbol bei der Suche, wird mit diesem Schriftsatz geliefert.
Du kannst den TrueType auf deinem Rechner installieren um alle Zeichen untersuchen zu können, hier eine kurze Auswahl:

Buchstabe	L	2	@	Q	²
Webfont	L	2	@	Q	²

 

jQuery benutzen

Im Ordner 'javascript' befinden sich zwei Dateien. Sie werden unten in der datei 'Page.ss' verlinkt.

Die eigentliche jQuery-Datei wird aus dem bei der Installation erstellten Ordner: framework/thirdparty/jquery/ verlinkt. Diese Pfadangabe kann dem Projekt entsprechend angepasst werden. Es kann eine minimierte- oder aktuellere-Version genutzt werden.

Die Datei: 'script.js' wird für den Wechsel von der Desktop-Ansicht zur Smartphone-Ansicht verwendet. Dabei wird ein Symbol zum ein/ausblenden der Navigation bei Bedarf eingeblendet und bei aktivierter Suche das Lupensymbol ein/ausgeblendet. 

Die Abfrage mit jQuery ist aus meiner Sicht etwas komplex verschachtelt aufgebaut. Je nach Projekt und eigenen Wünschen lässt sich das schnell anpassen, wenn die Absicht des Theme 'simple' erkannt worden ist.
Abgefragt wird: Wenn das Element 'header_w' kleiner ist als 'elements_w' zudem das Browserfenster weniger Breit ist als 768 Pixel, wird dem body-Element die Klasse 'tablet-nav' angehängt. Andernfalls wird die Klasse 'tablet-nav' entfernt. Code-Snipsel:

if ((header_w < elements_w) || ($(window).width() <= 768)) {
                    $('body').addClass('tablet-nav');
                }
                else {
                    $('body').removeClass('tablet-nav');                
                }

Daraus resultiert die Struktur der CSS-Selektoren in der Datei: layout.css.

• .nav.primary > Die Stile der Top-Navigation (Desktop)
• .nav.secondary > Die Stile der SideBar-Navigation (Desktop)
• .tablet-nav >Position der Smartphone-Navigation
• .tablet-nav .header .primary >Die Stile der Top-Navigation (Smartphone)
• .tablet-nav .secondary > Die Stile der Unternavigation (Smartphone)

 

Zwingend ist nun das Verwenden dieser Verschachtelung und Benennung der in SS-Dateien, jQuery-Datei und CSS-Dateien verwendeten Elemente und Klassen. Wenn nicht ein grösserer Umbau geplant ist*.

* Bei einem eigenen grösseren oder sauber programmierten Projekt, lohnt sich der Umbau der .ss-, .css- und der .js-Dateien auf jeden Fall. Der vielleicht lange Weg, ein ähnlich funktionierendes Template wie 'simple' mit eigenen Erfahrungen und Kenntnissen, mit selbst gewählten Bezeichnungen der CSS-Selektoren und der eigenen Wahl der HTML-Elemente, ist der einzige Weg keine Altlasten im Code mitzuschleppen.

Responsiv-Design (Der Sprung von 'tutorial' zu 'simple')

Mit einer einzigen Zeile Code, lässt sich unser Template 'tutorial' mit den Responsiv-Funktionen von 'simple' aufpeppen. Wir müssen anstelle unseres Headers, die vorbereitete Datei 'header.ss' includieren.

<header class="header"><h1>Tutorial - $Title</h1>
    <nav class="primary">
        <ul>
            <% loop $Menu(1) %>
                <li class="$LinkingMode">
                    <a href="$Link">$MenuTitle</a>
                </li>
            <% end_loop %>
        </ul>
    </nav>
</header>

Unser (zu Lernzwecken) selbstgebautes Menu im Header existiert im Theme 'simple' bereits. Zudem ist der HTML-Code in der Datei 'header.ss', abgestimmt auf die CSS-Datei 'layout.css' und die jQuery-Datei 'script.js'. Der bereitgestellte Header beinhaltet bereits alles was wir brauchen um unsere Seite reaktionsfähig zu gestalten, eben 'Responsiv-Design' modular aufzuwerten.

<body class=" ... >
<% include header %>
<section> ...

1. Füge anstelle des <header>-Elements den 'include' in die Datei 'Page.ss ein
2. Speichere die Datei Page.ss
3. Teste das Ergebnis im Browser
4. Verringere die Browser-Breite unter 768 Pixel
5. Öffne die 'Smartphone-Navigation'

Vielleicht sagst du dir jetzt: Da kann ich das Theme 'simple' doch gleich installieren. Das Ergebnis ist ja das gleiche. Was soll denn dieses Tutorial?
Mit dem unveränderten Code von Simple, wäre es mir nicht möglich gewesen, die einzelnen Schritte zu erläutern und dich durch die verschiedenen Pfade eines komplexen Templates zu führen.

Weiter mit der Zusammenfassung von Tutorial 1