Contao und CSS<br />Möglichkeiten der Einbindung und der effizienten BearbeitungContao und CSS – März 2011Peter Müllerhttp...
Diese Folien bildeten die Grundlage für einen Vortrag, den ich am 15. Mai 2010 auf dem Usertreffen in Essen gehalten habe....
Peter Müller<br />IT-Dozent<br />Fachbuchautor<br />Little Boxes 1<br />Little Boxes 2<br />Peter Müller Websites erstelle...
1. First Contact: Contao und CSS<br />2. Das Contao CSS-Framework<br />3. Interne Stylesheets<br />4. Externe Stylesheets<...
… bietet Ihnen Contao für die Verwaltung Ihrer Stylesheets ein komfortables Backend-Modul …<br />Leo im Handbuch, S. 82<br />
Stylesheets – Der erste Eindruck<br />Interner CSS-Editor<br />Der sich den Wolf klickt<br />Stylesheets importieren<br />...
Something that really bothers me about the internal CSS editor is: <br />I don't use it at all. What a pity.<br />Thyon im...
Die Lösung<br />
Das Ergebnis<br />
... bin ich auf das Contao-Framework umgestiegen, da es damit dann doch noch mal eine Ecke schneller geht, eine neue Site ...
Inhalt<br />
Was ist ein Framework?<br />Ein Framework ist eine Sammlung von Werkzeugen, Bibliotheken, Konventionen und bewährten Prakt...
Das Contao CSS-Framework: Technik<br />Der Kern<br />Seitentemplate fe_page.tpl <br />$this->framework<br />$this->stylesh...
Das Contao Framework: Benutzersicht<br />$this->framework<br />$this->framework<br />1<br />2<br />
$this->framework<br />$this->stylesheets<br />4<br />3<br />
Inhalt<br />
Das Backend-Modul Stylesheets<br />Verwaltet interne Stylesheets <br />speichert Stylesheets in der Datenbank<br />ohne Da...
Der interne CSS-Editor<br />CSS per HTML-Formular <br />Gut geeignet für ungeübte CSS-Schreiber<br />Maus und Tastatur kom...
Backend-Modul Stylesheets • CSS-Import <br />CSS-Dateien importieren<br />Externe CSS-Dateien => interne Stylesheets <br /...
Interne Stylesheets bearbeiten: Suchen und Filtern<br />Selektoren suchen<br />Feld Suchen • Selektor <br />zeigt nur Styl...
Die Erweiterung [csseditor]<br />Interne Stylesheets bearbeiten <br />im Quelltext, speichert in die Datenbank <br />kompa...
Integration mit Backend-Modul Seitenlayout<br />Interne Stylesheets<br />a<br />a<br />a<br />a<br />1. Kopf- und Fußzeile...
Ich kann mich einfach nicht an den internen CSS-Editor gewöhnen, auch nicht mit der Extension [csseditor]. <br />Juke  im ...
Inhalt<br />
Externe Stylesheets: CSS außerhalb der Datenbank<br />Definition<br />CSS-Dateien mit der Endung *.css <br />unterhalb von...
Externe Stylesheets verwalten und einbinden<br />Verwaltung vereinfachen<br />Zentrales Stylesheet erstellen: tl_fileslayo...
Integration mit Backend-Modul Seitenlayout<br />Externe Stylesheets<br />a<br />a<br />a<br />a<br />1. Kopf- und Fußzeile...
Inhalt<br />
Interne und externe Stylesheets <br />Nacheinander<br />Mit externen Stylesheets entwickeln <br />Vor dem Launch importier...
Interne Stylesheets extern bearbeiten: Mischmasch<br />Bearbeitung der CSS-Dateien im Root <br />mit externem Editor <br /...
Inhalt<br />
Externe CSS-Frameworks<br />Beispiele <br />YAML CSS-Framework <br />960 Grid System<br />Blueprint<br />Gründe<br />Gewoh...
Integration mit Backend-Modul Seitenlayout<br />Externe CSS-Frameworks<br />1. Kopf- und Fußzeile<br />2. Spaltenkonfigura...
Inhalt<br />
Die Matrix: Vier Entscheidungen <br />Seitentemplate<br />Editor<br />Speicherort<br />CSS-Framework<br />fe_page<br />fe_...
Vielen Dank für Ihre Aufmerksamkeit.<br />pmueller.dewebsites-erstellen-mit-contao.de<br />Peter Müller Websites erstellen...
Upcoming SlideShare
Loading in...5
×

Contao und CSS

11,994

Published on

Vortrag auf dem Usertreffen 2010 in Essen. Contao hieß damals noch TYPOlight.

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,994
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Contao und CSS

  1. 1. Contao und CSS<br />Möglichkeiten der Einbindung und der effizienten BearbeitungContao und CSS – März 2011Peter Müllerhttp://pmueller.de/<br />
  2. 2. 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. <br />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. <br />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“. <br />
  3. 3. Peter Müller<br />IT-Dozent<br />Fachbuchautor<br />Little Boxes 1<br />Little Boxes 2<br />Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing <br />
  4. 4. 1. First Contact: Contao und CSS<br />2. Das Contao CSS-Framework<br />3. Interne Stylesheets<br />4. Externe Stylesheets<br />5. Teamwork: Intern und extern kombinieren<br />6. Contao und externe CSS-Frameworks<br />7. Die Matrix: Vier Entscheidungen<br />Inhalt<br />
  5. 5. … bietet Ihnen Contao für die Verwaltung Ihrer Stylesheets ein komfortables Backend-Modul …<br />Leo im Handbuch, S. 82<br />
  6. 6. Stylesheets – Der erste Eindruck<br />Interner CSS-Editor<br />Der sich den Wolf klickt<br />Stylesheets importieren<br />xBrowser_style_schiet<br />CSS-Dateien im Rootordner<br />Entfernt die Zähne samt Belag<br />
  7. 7. Something that really bothers me about the internal CSS editor is: <br />I don't use it at all. What a pity.<br />Thyon im Forum2007-11-29 <br />
  8. 8. Die Lösung<br />
  9. 9. Das Ergebnis<br />
  10. 10. ... bin ich auf das Contao-Framework umgestiegen, da es damit dann doch noch mal eine Ecke schneller geht, eine neue Site aufzusetzen.<br />hschottm im Forum2008-09-01 <br />
  11. 11. Inhalt<br />
  12. 12. Was ist ein Framework?<br />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.<br />Jeff Croft im Juni 2007http://alistapart.com/articles/frameworksfordesigners<br />CSS-Frameworks sind Waschmaschinen für Browserbugs.<br />
  13. 13. Das Contao CSS-Framework: Technik<br />Der Kern<br />Seitentemplate fe_page.tpl <br />$this->framework<br />$this->stylesheets<br />$this->head <br />if($this->header|left|right|footer) : endif <br />Stylesheet system/contao.css <br />Stylesheet system/iefixes.css <br />Die Erweiterung<br />basic.css<br />gridpx.css oder gridpc.css <br />
  14. 14. Das Contao Framework: Benutzersicht<br />$this->framework<br />$this->framework<br />1<br />2<br />
  15. 15. $this->framework<br />$this->stylesheets<br />4<br />3<br />
  16. 16. Inhalt<br />
  17. 17. Das Backend-Modul Stylesheets<br />Verwaltet interne Stylesheets <br />speichert Stylesheets in der Datenbank<br />ohne Datei-Endung *.css <br />Generiert CSS-Dateien automatisch<br />im Hauptordner („Root“) <br />komprimiert, ohne Kommentare <br />Einbahnstraße<br />Backend-ModulStylesheets<br />Datenbank<br />CSS-Datei im Root<br />
  18. 18. Der interne CSS-Editor<br />CSS per HTML-Formular <br />Gut geeignet für ungeübte CSS-Schreiber<br />Maus und Tastatur kombinieren<br />Praktisch <br />Wiederherstellen vorheriger Versionen<br />Textarea „Eigener Code“<br />Styles ausblenden per „Augen-Klick“<br />Einige Einschränkungen <br />padding und margin: nur eine Einheit für alle Seiten<br />border: nur eine Farbe für alle Seiten <br />background-position: keine Werte möglich<br />
  19. 19. Backend-Modul Stylesheets • CSS-Import <br />CSS-Dateien importieren<br />Externe CSS-Dateien => interne Stylesheets <br />Müssen unterhalb von tl_files liegen <br />Dateien werden zu Datensätzen <br />basic.css wird zu basic <br />Einige Einschränkungen<br />Farbnamenwhite => #white<br />Keywords font-size: small geht nicht => 81.25% oder 13px <br />Kurzschreibweisen border: 1px solid #f00 geht, alles andere nicht<br />
  20. 20. Interne Stylesheets bearbeiten: Suchen und Filtern<br />Selektoren suchen<br />Feld Suchen • Selektor <br />zeigt nur Styles mit diesem Selektor<br />Anzeige der Anzahl rechts oben beachten <br />Kommentare <br />Damit ich auch morgen noch weiß, was ich mir heute dabei gedacht habe. <br />Kategorien erstellen <br />Feld Filtern<br />Bezeichnungen selbst ausdenken<br />Beispiel: „Layout“, „Navigation“, „Formulare“ etc. <br />zeigt nur Styles mit dieser Kategorie <br />zuweisen mit Mehrere bearbeiten nützlich<br />
  21. 21. Die Erweiterung [csseditor]<br />Interne Stylesheets bearbeiten <br />im Quelltext, speichert in die Datenbank <br />kompatibel mit internem CSS-Editor <br />Nach der Installation<br />System • Einstellungen • CSS Editor settings<br />Backend-Modul Stylesheets • Neues Symbol <br />Einige Einschränkungen<br />Reihenfolge der Deklarationen im Style wird geändert<br /> padding und margin: gemischte Einheiten problematisch<br />doppelte Deklarationen werden manchmal entfernt <br />ausgeblendete Styles werden nach Speichern entfernt <br />
  22. 22. Integration mit Backend-Modul Seitenlayout<br />Interne Stylesheets<br />a<br />a<br />a<br />a<br />1. Kopf- und Fußzeile<br />2. Spaltenkonfiguration<br />3. Stylesheets einbinden<br />4. Statisches Layout<br />
  23. 23. Ich kann mich einfach nicht an den internen CSS-Editor gewöhnen, auch nicht mit der Extension [csseditor]. <br />Juke im Forum2009-12-14 <br />
  24. 24. Inhalt<br />
  25. 25. Externe Stylesheets: CSS außerhalb der Datenbank<br />Definition<br />CSS-Dateien mit der Endung *.css <br />unterhalb von tl_files gespeichert <br />Backend-Modul Stylesheets ist arbeitslos <br />Bearbeitung <br />Nicht mit dem internen Editor oder [csseditor]<br />Beliebiger externer Editor <br />lokal bearbeiten und per FTP hochladen <br />im Editor per FTP direkt auf dem Webspace <br />Backend-Modul System • Dateiverwaltung<br />
  26. 26. Externe Stylesheets verwalten und einbinden<br />Verwaltung vereinfachen<br />Zentrales Stylesheet erstellen: tl_fileslayoutzentrale.css<br />CSS-Dateien per @import in zentrale.css einbinden<br />Medientyp in CSS-Dateien per @media<br />Im Seitenlayout einbinden<br />Backend-Modul Seitenlayout • Zusätzliche Head-Tags via $this->head<br />direkt im Seitentemplate fe_page.tpl<br />CSS-Framework kann genutzt werden<br />
  27. 27. Integration mit Backend-Modul Seitenlayout<br />Externe Stylesheets<br />a<br />a<br />a<br />a<br />1. Kopf- und Fußzeile<br />2. Spaltenkonfiguration<br />3. Stylesheets einbinden 1<br />x<br />4. Statisches Layout<br />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. <br />
  28. 28. Inhalt<br />
  29. 29. Interne und externe Stylesheets <br />Nacheinander<br />Mit externen Stylesheets entwickeln <br />Vor dem Launch importieren<br />Nach dem Launch intern pflegen <br />Als Ergänzung <br />Externe Stylesheets als Basis <br />Zusätzliche interne Stylesheets <br />Kunden können so einfache Änderungen machen<br />Stylesheet tinymce.css für den TinyMCE <br />Reihenfolge bei der Einbindung<br />interne Stylesheets nach externen <br />
  30. 30. Interne Stylesheets extern bearbeiten: Mischmasch<br />Bearbeitung der CSS-Dateien im Root <br />mit externem Editor <br />mit Firebug oder Edit CSS von der Web Developer Toolbar<br />Problem Einbahnstraße<br />CSS-Dateien von Root in tl_files kopieren und importieren<br />Styles via Zwischenablage in [csseditor] kopieren<br />Nachteil<br />Keine Kommentare im CSS <br />Keine Kategorien in internen Stylesheets<br />
  31. 31. Inhalt<br />
  32. 32. Externe CSS-Frameworks<br />Beispiele <br />YAML CSS-Framework <br />960 Grid System<br />Blueprint<br />Gründe<br />Gewohnte Umgebung<br />Implementierungen auch für andere CMSysteme <br />Mehr Features bei z. B. flexiblen Layouts und Formularen <br />Voraussetzungen <br />Angepasstes Seitentemplate statt fe_page.tpl <br />Externe Stylesheets unterhalb von tl_files <br />Einbindung der Stylesheets manuell (ohne $this->framework) <br />Nachteile<br />Backend-Modul Seitenlayout liegt teilweise brach <br />
  33. 33. Integration mit Backend-Modul Seitenlayout<br />Externe CSS-Frameworks<br />1. Kopf- und Fußzeile<br />2. Spaltenkonfiguration<br />3. Stylesheets einbinden<br />x<br />x<br />x<br />x<br />4. Statisches Layout<br />
  34. 34. Inhalt<br />
  35. 35. Die Matrix: Vier Entscheidungen <br />Seitentemplate<br />Editor<br />Speicherort<br />CSS-Framework<br />fe_page<br />fe_*<br />intern<br />extern<br />DB/root<br />tl_files<br />Contao<br />anderes<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />─<br />─<br />─<br />─<br />Interne Stylesheets<br />─<br />─<br />─<br />Interne Stylesheets,<br />extern bearbeiten<br />Externe Stylesheets<br />─<br />─<br />─<br />─<br />Externes CSS-Framework<br />─<br />─<br />─<br />─<br />
  36. 36. Vielen Dank für Ihre Aufmerksamkeit.<br />pmueller.dewebsites-erstellen-mit-contao.de<br />Peter Müller Websites erstellen mit Contao536 Seiten • 34,90 EuroISBN 978-3-8362-1651-7Galileo Computing <br />

×