Contao 3 Grundkurs

Die Komponenten des CSS-Frameworks

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier bekommen Sie einen Überblick über das Contao-CSS-Framework und welche Dateien dazu gehören. Wer lieber YAML oder ein anderes CSS-Framework einsetzen will, kann dies problemlos umsetzen.
04:58

Transkript

Webseiten werden mit CSS gestaltet. Natürlich macht uns Contao da keine Vorgaben, aber es unterstützt uns mit einem CSS-Framework. Und dieses Framework wollen wir uns mal genauer angucken. Ein Blick auf die Seite hier zeigt uns, das noch nicht viel in Sachen CSS passiert ist, ... das kann schöner werden ... aber wir sehen bereits, dass es einen Kopfbereich gibt, und das dieser Abstand auch größer ist, weil wir im Seitenlayout einen linken Seitenbereich eingestellt haben. Wir gehen ins Backend, und hier auf Themes, Layouts, und wir wählen unser Seitenlayout aus. Das CSS-Framework arbeitet im Hintergrund, stellt uns bestimmte Ressourcen zur Verfügung, oder macht Einstellungen auf der Seite, und wir schauen uns das jetzt mal hier genauer an. Zum einen haben wir im Seitenlayout Höhe der Kopfzeile, Höhe der Fußzeile, die Breiten der Seitenbereiche und ganz unten die Gesamtbreite. Den Effekt können wir uns im Frontend anschauen, wenn wir hier mal in den Seitenquelltext gehen. Da wird diese Zeile hier 'wrapper usw. also ein eingebundener Style im head-Bereich eingefügt, wo die Größenangaben, die Sie im Seitenlayout eingetragen haben, eingebunden sind. Gehen hier mal wieder raus, zurück ins Seitenlayout. Sie können also auf diese Weise, ganz auf die Schnelle hier mal ein Wert ändern, und der wird sich sofort auf der Seite bemerkbar machen. Allerdings nur, wenn Sie das wollen, weil Sie können hier durch Deaktivieren des Layout-Builders, ... ich speichere das mal ab ... das verhindern. Wenn wir jetzt ins Frontend gehen, und die Seite neu laden, dann sind diese Informationen nicht mehr vorhanden und im Seitenquelltext fehlt diese Zeile jetzt auch. Der Layout-Builder lädt aber auch noch eine Ressource ... ich aktiviere den jetzt nochmal ... und zwar eine CSS-Datei namens layout. Das gleiche gilt hier für die anderen Einträge, eine CSS-Datei namens grid, reset, forms und die zeige ich Ihnen mal auf Dateiebene. Die finden sich in unserer Installation, Im Ordner assets/contao/css/ und hier jeweils in einer komprimierten und in einer unkomprimierten Form. Die form.css stellt Styles für Formulare und Formularelemente bereit, die grid.css stellt uns ein Zwölf-Spalten-Grid zur Verfügung, auch mit zwei Media Queries drinnen, sodass wir auf Tablets und auf Smartphones reagieren können, oder genauer gesagt, je nach Breite des Viewports wird das Grid etwas schmaler dargestellt, bzw. gar nicht mehrt als Grid dargestellt, sondern alle Elemente werden untereinander aufgelistet. Das layout.css sorgt dafür, dass auf schmaleren Endgeräten erst der Hauptcontent kommt und dann darunter, dass was in der linkenund in der rechten Spalte platziert ist, Stichwort Holy Grail. Das reset.css ist dafür zuständig, dass ganz allgemein für bestimmte Elemente Abstände zurückgesetzt werden, Ränder auf Null gesetzt werden et cetera. Ich will das jetzt an der Stelle auch nicht vertiefen, weil es mir erstmal um das CSS-Framework geht und deshalb gehen wir nochmal zurück ins Backend. Hier haben wir die Möglichkeit entweder alles anzuwählen oder alles abzuwählen. Wir machen mal eine Kombination, wir nehmen mal diese. D. h. wir integrieren den Layout-Builder, wir wollen ein CSS-Reset mit einbinden, und Styles für Formulare. Ich speichere das mal so ab. Und wir schauen uns das Ganze im Frontend an, schauen ob es da eine Veränderung gibt. Oh ja, einiges hat sich verändert, die Zeilenabstände haben sich verkleinert, die Innenabstände der unsortierten Listen sind entfernt usw. Fazit: Das CSS-Framework lässt sich imSeitenlayout konfigurieren, das bedeutet, wir können bestimmte Komponenten, die das Framework bereitstellt nutzen, wir müssen es aber nicht. Gleiches gilt für die Stylesheets, die wir anlegen. Wir können entweder den internen Editor benutzen, der übrigens nicht zum Framework gehört, das ist nur ein Werkzeug. Die Styles finden wir in dieser Rubrik. Oder wir können auch eigene Stylesheets, die wir manuell editieren, hier an dieser Stelle einbinden.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!