Joomla!^® User Group Fulda

Auf dem letzten Treffen im November 2013 regte Kai an, ob ich nicht Lust hätte, für die JUG Fulda Website ein neues Joomla! 3 template zu gestalten. Gerne griff ich die Idee auf und schlug vor, eine Version auf der Basis des jflex templates zu erstellen, mit dem ich kürzlich meinen eigenen Webauftritt ausstattete. Mit diesem template hatte ich meine Ideen und Vorstellungen zur Typografie im responsive web design umgesetzt, über die ich auf dem Treffen berichtete. Nun ein kleiner Blick unter die Motorhaube von jflex:

1. Technik

Wo beginne ich am besten? - mit der index.php. Ich habe versucht, so weit als möglich den mobile first Ansatz umzusetzen, durch den Einsatz von media-queries in der css und die Unterscheidung von mobile, tablet und desktop devices mit Hilfe der Mobile_Detect.php, nach der Anleitung von Rene Kreijveld. Siehe auch: http://www.youtube.com/watch?v=jlovxmQOlcg

Mittels der Variablen der Mobile_Detect.php kann man sehr schön zwischen den unterschiedlichen Ausgabegeräten bzw. -größen unterscheiden und entsprechende Modulpositionen, Skripte und Dateien laden bzw. nicht laden und unterschiedlich plazieren.

Ein weiterer wesentlicher Aspekt ist die off-canvas Navigation von David Bushell. Siehe auch: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

Der Einbau war zwar nicht ganz leicht, aber diese Technik bietet viele Vorteile und Gestaltungsmöglichkeiten. So muss das Joomla! Menü Modul nur einmal geladen werden und es ist möglich, weitere Modulpositionen zu integrieren (z.B. die Suche).

Neben modernizr und respond.js verwende ich ein Script zur Bildreduzierung via mobify.com für mobile devices. In den Ladevorgang der Joomla! eigenen Scripte (von mootools über jquery bis hin zu bootstrap) greife ich vom template aus nicht ein. Ich lade auch keine eigene jquery Version. Die Versionen von Bootstrap 2.32 und Font Awesome 3.1.0. werden wiederum vom template geladen.

Zur Zusammenfassung und Komprimierung der css und übrigen js Dateien kommt die php Kompressor Technik zum Einsatz, die Alexander Schmidt in einer früheren blank template Version verwendete. Siehe auch: http://blank.vc/de/

Damit lassen sich alle benötigten Dateien sortieren und ordnen und man verliert beim Experimentieren nicht so leicht den Überblick.

Viele Einstellungen der Optionen werden als Variablen gleich in der index.php abgefragt. Einstellungen, die sich auf das css beziehen, werden über eine css.php geladen. Womit wir bei den Optionen angelangt sind.

2. Optionen

2.1. Text- und Hintergrundfarben

Hier können die Farben für Textelemente, links und Hintergründe ausgewählt werden.

2.2. Header, Logo und Hintergrundbild

Hier kann grundsätzlich zwischen Textlogo oder Bildlogo gewählt werden. Ebenso können eigene Header-, body- und Logobilder geladen werden. Das seitliche Headerlogo steht ebenfalls als zusätzlicher Akzent zur Verfügung. Die Option JUG Fulda / My Text bezieht sich auf den Text der JUG Fulda.

2.3. Text- und Headline-Schriften

Als default fonts sind für body-copy die PT-Sans und für h1-6 die PT-Sans-Narrow via @font-face eingebunden. Die zusätzliche Schriften der Auswahl werden via Adobe Edge Web Fonts geladen.

2.4. Erweiterte Font Optionen

Hier kann man den Text-Vergrößerer oben rechts einschalten und entscheiden, ob man zusätzlich die Modulor Proportionen für desktop bzw. die kleineren Headline Proportionen für phone Größen einsetzen möchte. Die body-copy Schriftgröße kann ebenfalls variiert werden. Mindestgröße für mobile ist grundsätzlich 100%. Der Erstzeileneinzug für Absätze ist ebenfalls schaltbar.

2.5. Erweitert

Die Google Analytics ID kann mit anonymisierter IP Adresse eingegeben werden. Das ist in Deutschland Vorschrift. Die Hauptrahmenbreite und dessen Einheit px / em sowie die Reihenfolge von Haupt- und Seitenspalte sind einstellbar. (Die right-to-left Schriftenoption habe ich nur ansatzweise umgesetzt. In JoomSkeleton ist sie komplett und fehlerfrei eingebaut.)

3. Module und Klassen

3.1. Die Modulpositionen

Die meisten Modulpositionen erklären sich von selbst; einige Positionen sind besonders für das responsive web design interessant:

• nav: horizontale Hauptnavigation; off-canvas für mobile device
• nav_module: Modulposition z.B. für search, in off-canvas integriert
• nav_mobile: sidebar Modul, in off-canvas integriert
• slideshow: nicht für mobile devices
• breadcrumbs
• head_row, head_tabs: in mobile devices unterhalb des contents
• sidebar, sidebar_tabs
• bottom_row, bottom_tabs
• footer
• debug

3.2. Modulklassen Suffixe:

Folgende Modulklassen Suffixe stehen zur Verfügung:

1. Farbklassen

• white
• clouds = hellblaugrau
• concrete = zementgrau
• midnightblue
• jugfuldablue
• turquoise
• blue, info
• my-red, alert
• green, success
• yellow, question,
• orange
• transparent

2. Klassen für menüs in der sidebar:

• style
• menu-style

3. Klasse für das Modul Suche:

• search-style

4. Klassen für die Modul-Breiten in %:

• grid-5 bis grid-100; in 5er Schritten
• grid-33, grid-66 = 1/3 und 2/3
• grid 62, grid 38 = goldener Schnitt

5. Helfer-Klassen:

• hide-on-mobile, hide-on-desktop
• equal-1, equal-2: Module in den Reihen head_row und bottom_row können mit equal-1 bzw. equal-2 auf gleiche Höhe gebracht werden. 
• stickem: Das Modul bleibt beim "scrollen" unterhalb der Suche "kleben" (nicht im mobile Modus).

Darüber hinaus bietet die css eine Fülle an Klassen, mit denen Texte und Bilder und Video Container gestaltet werden können. Siehe auch: Klassen und Stile von JFlex

4. Todo

Es gibt immer irgend etwas, was optimiert werden kann. So bin ich gerade dabei, einige Veränderungen vorzunehmen. Hier ein kleiner Ausschnitt meiner todo list für 2014:

• Less mit css Komprimierung via php in das template integrieren
• Js Aufrufe nach der Vorgabe des html5 boilerplate neu sortieren
• Update auf Bootstrap 3 und Font Awesome 4

Die Dateien befinden sich auf github: https://github.com/adhocgraFX/jflex_j3. Viel Spaß beim Experimentieren.

• Weiter