Highlights

Inhaltelemente
  •  Akkordion
  •  Tabs (horizontal & vertikal)
  •  Clearing Lightbox
  •  Orbit Slider als Bild- und Inhalt-Slider
  •  Buttons & Buttonbars
  •  Dropdowns
  •  Hinweise & PopUps
  •  Joyride
  •  Magellan Onepage Scroll
Layout Module
  •  Top Bar Navigation
  •  Off-Canvas Navigation
Designvorgaben NEU!
  •  Grid-Klassen einfach per Select-Widget auswählen
  •  Vorgaben als Standard definieren, zum Beispiel für alle Artikel
  •  Vorgaben-Anzeige im Backend beschränken auf Inhaltselemente, Artikel, Module und/ oder Formularfelder
  •  Eigene CSS-Klassen ergänzen
SCSS Konfiguration
  •  Einfach Farben bearbeiten
  •  Zusammenstellen der SCSS Schnipsel – nur die Komponenten einbinden die gebraucht werden
  •  Mehrere Einstellungen für verschiedene Themes nutzen
Für Redakteure
  •  Leichte Bedienung der Designvorgaben durch erweitertes Select-Widget
  •  Auswahl von 3 Ansichten des Select-Widgets: Standard Select, Dropdown, Picturebox
  •  Information über Styling in der Inhaltselement-Übersicht
  •  Individuelle Vorschaubilder für eigene Designvorgaben einstellen

 

 

Fortgeschrittene Inhaltselemente

  •  Accordion
  •  Tabs (horizontal & vertical)
  •  Clearing Lightbox
  •  Orbit Slider as image or content Slider
  •  Buttons & Buttonbars
  •  Dropdowns
  •  Callouts & Prompts
  •  Joyride
  •  Magellan Onepage Scroll

Mediale Inhaltselemente

  •  Vimeo Video
  •  YouTube Video
  •  Video von eigener Quelle mit verschiedenen Formaten und Untertiteln (Nutzung von HTML5) 
  •  Platzhalterbild

Neue Inhaltselemente

  •  VCard
  •  Zitat
  •  Fortschrittsbalken mit verschiedenen Farben und Formen
  •  Preistabelle
  •  Definitionslisten
  •  Listen mit einfachen Stilwechsel (Punkt,Kreis, ...)

Grid Inhaltselemente

  •  Spalten
  •  Reihen/ Zeilen

Neue Formular Elemente

  •  Reihe für die Nutzung der ".collapse" - Eigenschaft
  •  Werte-Schieber mit verschiedenen Styles

Ask Me
Contact
 

Hallo, ich bin Monique Hahnefeld und passionierte Frontend-Designerin mit Programmiererfahrung. Über Feedback und Fragen freue ich mich. Berlin 2014
 

Downloads

(GitHub ist meistens aktueller)

  •  Contao 3.5 LTS Demo
  • Inhalt: Datenbank-Dump & Alle Dateien
    Einfach MySQL-Dump einspielen, install.php aufrufen & Serverdaten eingeben, mit k.jones wie gewohnt einloggen - fertig!!!
 

Installation

 Von Github

  1. Lade die Erweiterungen codeowl_design_presets, codeowl_grid_control und codeowl_fw_foundation von GitHub herunter. Lade dann die sich jeweils im Verzeichnis "TL_ROOT/system/modules/" befindenten ,gleichnamigen Ordner in das Verzeichnis deiner Contao-Installation: "modules".
    TL_ROOT/system/modules/
  2. Der 'themes'-Ordner welcher sich in der Erweiterung codeowl_fw_foundation im Verzeichnis "TL_ROOT/files/" befindet muss in die gleiche Ebene deiner Contao-Installation, in den "files"-Ordner geladen werden.
    TL_ROOT/files/

 Via Contao Composer Plugin

  1. Suche im Composer im Backend von Contao nach 'designs2/codeowl_fw_foundation' und installiere das Paket. Die Anhängigkeiten sollten automatisch mit geladen werden.
  2. Versichere dich das der "themes"-Order im "files"-Verzeichnis deiner Contao-Installation ist.
  3. Falls etwas nicht funktioniert installiere die Erweiterungen einfach manuell, wie unter "Von Github" beschrieben.

3. Nun sind alle Dateien da wo sie sein müssen

Nun muss im Dateimanager in Contao ein Ordner erstellt werden oder vorhanden sein, wo die themespezifischen SCSS-Dateien hinein generiert werden können.

Select Theme files in your Layout - file pickWähle die SCSS-Datein unter "Zusätzliche Stylesheets" im Layouter
Wichtig: das Verzeichnis zum Speichern der generierten SCSS-Dateien muss sich im "themes"-Verzeichnis befinden. ×
 

Jetzt beginnen

4. Eine neue FTC-Konfiguration erstellen

Navigiere zum Menüpunkt "FW Einstellungen". Nun lässt sich leicht eine neue Konfiguration erstellen in der schonmal alle Standardwerte vordefiniert sind – Sehr hilfreich zu Beginn. Es muss lediglich der Style-Ordner zugeordnet werden, in welchen die themespezifischen SCSS-Dateien generiert werden sollen. Der Ordner muss auf der selben Ebene liegen wie der 'themes/foundation'-Ordner ( siehe 3.). Das ist wichtig!

Wähle den Theme-Ordner unter den FTC Einstellungen

5. Jetzt die Konfiguration mit dem Layout verknüpfen

Navigiere zu Themes und weiter zu den Einstellungen des Layouts, in welchen du Foundation nutzen möchtest. 
Füge die Dateien, wie auf den Screenshots zu sehen ist, deinem Layout zu. Die fixes.css ist wichtig. Die mediaelementplayer.min.css sollte hinzugefügt werden, wenn Videos aus eigener Quelle als Inhaltselemente eingebunden werden sollen.

Wähle die SCSS-Datein unter "Zusätzliche Stylesheets" im Layout

Dies und Das

Das Projekt muss regelmäßig für neue Versionen von Contao aktualisiert werden. Mein Fokus wird darauf gerichtet sein diese Erweiterung stable zu halten. Die Contao 3.5 LTS - Version wird derzeit unterstützt, die Version 4 noch nicht. Stand 06.07.2015

FTC – Foundation To Contao heißt jetzt Codeowl Framework Foundation (Version: 1.1.0)

Die Erweiterung wurde aus strukturell sinnvollen Gründen umbenannt. Mehr dazu hier >>

Bisher habe ich 568 Stunden in dieses Projekt investiert.

Eine kleine Spende ist immer willkommen. Über einen Like meiner Designs2 Facebook Page werde ich mich auch sehr freuen. Wer Anregungen zur Verbesserung hat kann diese gerne im Contao Forum, auf GitHub oder an mich persönlich per eMail geben.

Diese Erweiterung nutzt das Framework Foundation (Version 5.2.2) von Zurb. Das Framework hat viele tolle Plugins, viele Lösungen für die täglichen Aufgaben eines Frontend-Designers.
Diese Entwicklungen nutzen jQuery und Vanilla.js und sind performant. Die offizielle Projektseite von foundation ist hier » zu finden.