Moin!

WKE 2018 - 13. September 2018 - Erlangen

Contao & Bootstrap

Ein gutes Team

About

Carolina Koehn

Kiel, Germany, Europe, Earth ...

Soz.Wiss, Dipl-Soz-Päd, Mediengestalterin

Contao seit 2006

kikmedia.de | @carolinakoehn

Contao

  • Basisdaten
  • Technik
  • Funktionen
  • Verbreitung

Bootstrap

  • Basisdaten
  • Technik
  • Funktionen
  • Verbreitung

Contao & Bootstrap

  • Integration
  • Templates
  • erweiterte Techniken
  • Praxisbeispiee

Basisdaten Contao

  • Barrierefreies Open Source Content Management System
  • veröffentlicht 2006 als 'TYPOight'
  • PHP ab Version 7.1 sowie MySQL / MariaDB
  • seitenbasiert mit Layouts und Inhaltselementen
  • Templatesystem und Twig
  • Paketverwaltung via Composer
  • Verbreitung

  • ca. 115'000 Installationen (Contao 4)
  • C3.5 LTS unbekannt
  • Hauptverbreitungsgebiet: DACH
  • Releases

    halbjährlich neue Version im Upstream

    LTS-Versionen

    2.5 Jahre Long-Term-Support

    Basisfeatures

    Layoutbuilder

    Formgenerator

    News, Events, FAQ, Newsletter

    granulare Userverwaltung

    datenbankgestütztes Dateisystem

    Erweiterbar

    ca. 1'200 Extensions

    Installation über packagist.org

    Tool: Contao-Manager

    Backend

    Selbstverständlich responsiv und barrierearm

    Layoutbuilder

  • bestimmt den grundständigen Seitenaufbau
  • integriert Artikel, Module, CSS, JS, Fonts ...
  • legt Metadaten fest
  • ... und schaut so aus:

    Module

  • stellen spezielle Inhalte zur Verfügung
  • News, Events, Formulare, etc.
  • auch von Extensions
  • können konfiguriert werden
  • Bootstrap - ein paar Eckdaten

  • ursprünglich von Twitter entwickelt
  • Ziel: schnelles entwickeln responsiver Layouts
  • HTML, CSS und JS
  • Kern: Gridsystem
  • Komponenten
  • aktuelle Version 4.1
  • CSS

  • entweder vorkompiliert
  • oder Less
  • oder Sass
  • Layouts

  • out of the Box responsiv
  • anpassbare Breakpoints
  • .container und .row
  • verschachtelbar
  • steuerbar über Klassen
  • @media

    /* Extra-kleine Geräte (Smartphones, weniger als 768px) */
    /* Kein Media-Query, weil dies der Standard in Bootstrap ist */

    /* Kleine Geräte (Tablets, 768px und breiter) */
    @media (min-width: @screen-sm-min) { ... }

    /* Mittlere Geräte (Desktop-PCs, 992px und breiter) */
    @media (min-width: @screen-md-min) { ... }

    /* Große Geräte (Desktop-PCs, 1200px und breiter) */
    @media (min-width: @screen-lg-min) { ... }

    ... auch anpassbar

    Spaltenbreiten

  • .col
  • .col-[breakpoint]-[grösse}]
  • alles kombinierbar
  • z.B. .col-sm-6 => Element hat auf kleinen (sm) Bildschirme eine Breite von 6 Spalten
  • z.B. .col-md-6 .col-lg-4 => Element hat auf kleinen (md) Bildschirmen eine Breite von 6 Spalten, auf grossen von 4 Spalten
    • diverse Hilfsklassen für
      • Abstände
      • push und pull
      • Reihenfolge
      • sichtbar / unsichtbar
    • alle auch auf Bildschirmbreiten anwendbar

    Basiskomponenten

  • Icons
  • Buttons
  • Dropdowns
  • Navigationen und Breadcrumbs
  • Formularklassen
  • Pagina
  • Labels und Badges ...
  • ...
  • (teilweise) optionale JS-Komponenten

    • Übergangseffekte
    • Scrolling
    • Tabs
    • Carousel
    • Slider
    • ...

    Vorteil

    relativ schnell ein responsiver Layoutdummy

    Nachteil

    1a echtes Plastiklayout

    Vorteil

    sehr genau konfigurier und anpassbar

    Nachteil

    man sollte SASS und variablenbasiertes CSS beherrschen

    Vorteil

    modular anwendbar

    Nachteil

    wenn schlecht konfiguriert / angepasst ein Moloch an überflüssigem Code

    Vorteil

    schnelles, präzises Layout

    Nachteil

    möglicherweise starr und unflexibel

    http://getbootstrap.com

    Was man braucht

    Contao ;-)

    Bootstrap 4 ;-)

    Contao-Download & Installation

     

     

    Contao-Manager starten

     

     

    Contao-Bootstrap installieren

     

     

    Aaaber ...

    ... Contao-Bootstrap bieten den Rahmen

    • Module
    • Seitentemlplate fe_page.html5
    • Helper
    • Templates für Komponenten

    Bootstrap?

    Dafür muss man selber sorgen.

    Und das ist auch gut so.

    Warum ist das gut?

  • einfach mal spielen -> kompilierte Dateien oder CDN
  • anpassen & eigenes Design -> Sourcefiles, Node.js
  • ... denn ansonsten muss man das kompilierte CSS überschreiben.

    Empfehlung?

    Source Files, dann anpassen

    • Contao kann SCSS
    • Wer Node nicht installieren / bedienen möchte, kann das nutzen

    Bootstrap-Download & Installation

  • entweder kompilierte CSS und JS-Dateien
  • oder Source Files
  • oder CDN
  • oder Node,js via npm install bootstrap
  • Es kommt drauf an was man machen möchte.

    Wie kommt Bootstrap zu Contao?

    Fall 1

    • kompilierte Files
    • nach /files/themeordner hochladen
    • im Seitenlayout als externes CSS und externes JS aktivieren

    Wie kommt Bootstrap zu Contao?

    Fall 2

    • Source Files
    • nach /files/themeordner hochladen
    • im Seitenlayout als externes SCSS und externes JS aktivieren
    • Variablen ggf. anpassen
    • _variables.scss
    • _includes.scss

    Wie kommt Bootstrap zu Contao?

    Fall 3

    • CDN
    • im Seitenlayout als <head>-Tags und eigenes JS <script src="..."> aktivieren

    Wie kommt Bootstrap zu Contao?

    Fall 4

    • Node.js
    • lokal arbeiten
    • Kompilat ins System (/files/...) hochladen
    • im Layout als externes CSS / JS einbinden

    Erweiterungen

    Contao-Bootstrap

    Unterstützung von Grids, Forms, Navigationen, Layouts, Cards

    Gridbuilder

    Layoutbuilder

    https://contao-bootstrap.de

    Und konkret jetzt?

  • Module anlegen
  • Layout konfigurieren
  • Seitenstruktur anlegen
  • Artikel einpflegen
  • Module

  • Navigationsmodul
  • Navigationscontainer
  • ggf. Hilfsmodule
  • Layout

  • Seitenlayout anlegen
  • Typ: "Bootstrap"
  • ggf. Inhaltsbereiche konfigurieren
  • Module in die Layoutpositionen einbinden
  • CSS und JS einbinden
  • Metadaten anpassen
  • Seitenstrukur

    Startpunkt

    --- / Startseite

    --- / Seite 2

    --- / --- Subseite 2.1

    --- / --- Subseite 2.2

    --- / Seite 3

    --- / --- Subseiten ...

    Besonderheiten, Bootstrap

  • Seiten mit Subseiten haben keinen Inhalt
  • Extension: Contao-Folderpage
  • Multilevel-Navigationen sind etwas komplexer
  •  

    Contao-Ressourcen

    Projektseite: https://contao.org

    Supportforum: https://community.contao.org/de/

    Code: https://github.com/contao

    Bugtracker: https://github.com/contao/contao/issues

    Bootstrap-Ressourcen

    Projektseite: https://getbootstrap.com/

    Build / Download: https://getbootstrap.com/docs/4.1/getting-started/download/

    Code: https://github.com/twbs/bootstrap

    Themstr: https://themestr.app/

    Danke für die Aufmerksamkeit.

    @carolinakoehn

    kikmedia.de