Contao und CSS

Contao und CSS
Möglichkeiten der Einbindung und der effizienten BearbeitungContao und CSS – März 2011Peter Müllerhttp://pmueller.de/

Diese Folien bildeten die Grundlage für einen Vortrag, den ich am 15. Mai 2010 auf dem Usertreffen in Essen gehalten habe. Direkt danach hat Leo Feyer die Umbenennung von TYPOlight in Contao bekannt gegeben.
Die Folien sind nicht alle selbsterklärend und es fehlen sowohl der Ton als auch die Live-Demos im Backend von Contao. Es fehlt auch der Unterhaltungswert eines lebendigen Vortrages.
Wer den Vortrag erlebt hat, dem mögen die Folien zur Erinnerung dienen. Allen anderen geben Sie vielleicht einen kleinen Einblick in die Arbeit mit „Contaound CSS“.

Peter Müller
IT-Dozent
Fachbuchautor
Little Boxes 1
Little Boxes 2
Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing

1. First Contact: Contao und CSS
2. Das Contao CSS-Framework
3. Interne Stylesheets
4. Externe Stylesheets
5. Teamwork: Intern und extern kombinieren
6. Contao und externe CSS-Frameworks
7. Die Matrix: Vier Entscheidungen
Inhalt

… bietet Ihnen Contao für die Verwaltung Ihrer Stylesheets ein komfortables Backend-Modul …
Leo im Handbuch, S. 82

Stylesheets – Der erste Eindruck
Interner CSS-Editor
Der sich den Wolf klickt
Stylesheets importieren
xBrowser_style_schiet
CSS-Dateien im Rootordner
Entfernt die Zähne samt Belag

Something that really bothers me about the internal CSS editor is:
I don't use it at all. What a pity.
Thyon im Forum2007-11-29

Die Lösung

Das Ergebnis

... bin ich auf das Contao-Framework umgestiegen, da es damit dann doch noch mal eine Ecke schneller geht, eine neue Site aufzusetzen.
hschottm im Forum2008-09-01

Inhalt

Was ist ein Framework?
Ein Framework ist eine Sammlung von Werkzeugen, Bibliotheken, Konventionen und bewährten Praktiken, die regelmäßig anfallende Aufgaben in allgemeine, wiederverwendbare Module zu abstrahieren versucht.
Jeff Croft im Juni 2007http://alistapart.com/articles/frameworksfordesigners
CSS-Frameworks sind Waschmaschinen für Browserbugs.

Das Contao CSS-Framework: Technik
Der Kern
Seitentemplate fe_page.tpl
$this->framework
$this->stylesheets
$this->head
if($this->header|left|right|footer) : endif
Stylesheet system/contao.css
Stylesheet system/iefixes.css
Die Erweiterung
basic.css
gridpx.css oder gridpc.css

Das Contao Framework: Benutzersicht
$this->framework
$this->framework
1
2

$this->framework
$this->stylesheets
4
3

Inhalt

Das Backend-Modul Stylesheets
Verwaltet interne Stylesheets
speichert Stylesheets in der Datenbank
ohne Datei-Endung *.css
Generiert CSS-Dateien automatisch
im Hauptordner („Root“)
komprimiert, ohne Kommentare
Einbahnstraße
Backend-ModulStylesheets
Datenbank
CSS-Datei im Root

Der interne CSS-Editor
CSS per HTML-Formular
Gut geeignet für ungeübte CSS-Schreiber
Maus und Tastatur kombinieren
Praktisch
Wiederherstellen vorheriger Versionen
Textarea „Eigener Code“
Styles ausblenden per „Augen-Klick“
Einige Einschränkungen
padding und margin: nur eine Einheit für alle Seiten
border: nur eine Farbe für alle Seiten
background-position: keine Werte möglich

Backend-Modul Stylesheets • CSS-Import
CSS-Dateien importieren
Externe CSS-Dateien => interne Stylesheets
Müssen unterhalb von tl_files liegen
Dateien werden zu Datensätzen
basic.css wird zu basic
Farbnamenwhite => #white
Keywords font-size: small geht nicht => 81.25% oder 13px
Kurzschreibweisen border: 1px solid #f00 geht, alles andere nicht

Interne Stylesheets bearbeiten: Suchen und Filtern
Selektoren suchen
Feld Suchen • Selektor
zeigt nur Styles mit diesem Selektor
Anzeige der Anzahl rechts oben beachten
Kommentare
Damit ich auch morgen noch weiß, was ich mir heute dabei gedacht habe.
Kategorien erstellen
Feld Filtern
Bezeichnungen selbst ausdenken
Beispiel: „Layout“, „Navigation“, „Formulare“ etc.
zeigt nur Styles mit dieser Kategorie
zuweisen mit Mehrere bearbeiten nützlich

Die Erweiterung [csseditor]
Interne Stylesheets bearbeiten
im Quelltext, speichert in die Datenbank
kompatibel mit internem CSS-Editor
Nach der Installation
System • Einstellungen • CSS Editor settings
Backend-Modul Stylesheets • Neues Symbol
Reihenfolge der Deklarationen im Style wird geändert
padding und margin: gemischte Einheiten problematisch
doppelte Deklarationen werden manchmal entfernt
ausgeblendete Styles werden nach Speichern entfernt

Integration mit Backend-Modul Seitenlayout
Interne Stylesheets
a
a
a
a
1. Kopf- und Fußzeile
2. Spaltenkonfiguration
3. Stylesheets einbinden
4. Statisches Layout

Ich kann mich einfach nicht an den internen CSS-Editor gewöhnen, auch nicht mit der Extension [csseditor].
Juke im Forum2009-12-14

Inhalt

Externe Stylesheets: CSS außerhalb der Datenbank
Definition
CSS-Dateien mit der Endung *.css
unterhalb von tl_files gespeichert
Backend-Modul Stylesheets ist arbeitslos
Bearbeitung
Nicht mit dem internen Editor oder [csseditor]
Beliebiger externer Editor
lokal bearbeiten und per FTP hochladen
im Editor per FTP direkt auf dem Webspace
Backend-Modul System • Dateiverwaltung

Externe Stylesheets verwalten und einbinden
Verwaltung vereinfachen
Zentrales Stylesheet erstellen: tl_fileslayoutzentrale.css
CSS-Dateien per @import in zentrale.css einbinden
Medientyp in CSS-Dateien per @media
Im Seitenlayout einbinden
Backend-Modul Seitenlayout • Zusätzliche Head-Tags via $this->head
direkt im Seitentemplate fe_page.tpl
CSS-Framework kann genutzt werden

Externe Stylesheets
a
a
a
a
3. Stylesheets einbinden 1
x
1 Die Erweiterung [stylesheets_external] ermöglicht das Einbinden von Stylesheets im Backend-Modul Seitenlayouts. Womit auch Punkt 3 im grünen Bereich wäre.

Inhalt

Interne und externe Stylesheets
Nacheinander
Mit externen Stylesheets entwickeln
Vor dem Launch importieren
Nach dem Launch intern pflegen
Als Ergänzung
Externe Stylesheets als Basis
Zusätzliche interne Stylesheets
Kunden können so einfache Änderungen machen
Stylesheet tinymce.css für den TinyMCE
Reihenfolge bei der Einbindung
interne Stylesheets nach externen

Interne Stylesheets extern bearbeiten: Mischmasch
Bearbeitung der CSS-Dateien im Root
mit externem Editor
mit Firebug oder Edit CSS von der Web Developer Toolbar
Problem Einbahnstraße
CSS-Dateien von Root in tl_files kopieren und importieren
Styles via Zwischenablage in [csseditor] kopieren
Nachteil
Keine Kommentare im CSS
Keine Kategorien in internen Stylesheets

Inhalt

Externe CSS-Frameworks
Beispiele
YAML CSS-Framework
960 Grid System
Blueprint
Gründe
Gewohnte Umgebung
Implementierungen auch für andere CMSysteme
Mehr Features bei z. B. flexiblen Layouts und Formularen
Voraussetzungen
Angepasstes Seitentemplate statt fe_page.tpl
Externe Stylesheets unterhalb von tl_files
Einbindung der Stylesheets manuell (ohne $this->framework)
Nachteile
Backend-Modul Seitenlayout liegt teilweise brach

Externe CSS-Frameworks
3. Stylesheets einbinden
x
x
x
x

Inhalt

Die Matrix: Vier Entscheidungen
Seitentemplate
Editor
Speicherort
CSS-Framework
fe_page
fe_*
intern
extern
DB/root
tl_files
Contao
anderes
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
─
─
─
─
Interne Stylesheets
─
─
─
Interne Stylesheets,
extern bearbeiten
Externe Stylesheets
─
─
─
─
Externes CSS-Framework
─
─
─
─

Vielen Dank für Ihre Aufmerksamkeit.
pmueller.dewebsites-erstellen-mit-contao.de
Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing

http://www.little-boxes.de	270
http://www.slideshare.net	250
http://little-boxes.de	130
http://www.littleboxes.info	10
http://static.slidesharecdn.com	1

Contao und CSS

by Peter Müller on May 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 661

Statistics

Contao und CSS — Presentation Transcript