Was erwartet Euch

• einige Komponenten eines Contao-Themes entwickeln
• moderne CSS-Eigenschaften
• CSS mit seinen neuen Möglichkeiten
  • Verschachtelung (Nesting)
  • CSS-Variable

Das Seitenlayout

CSS-Grid und Subgrid in Contao verwenden

CSS-Grid fürs Seitenlayout

                    
                       /* Wrapper */
                        #wrapper {
                            display             : grid;
                            min-height          : 100vh;
                            @supports ( min-height: 100dvh) {
                                min-height : 100dvh;
                            }
                            grid-template-rows  : min-content 1fr min-content;
                            grid-template-areas :
                                "header"
                                "container"
                                "footer";
                        }

                        /* Header */
                        header {
                            grid-area: header;
                            background    : var(--bg-header);
                            color         : var(--clr-header);
                            padding-block         : 2rem;
                        }

                        /* Container */
                        #container {
                            grid-area: container;
                        }

                        /* Footer */
                        footer {
                            grid-area: footer;
                            background    : var(--bg-footer);
                            color         : var(--clr-footer);
                            padding-block         : 2rem;
                        }
                    
                

Grid im Header

                    
                        /* Header */
                        header {
                            grid-area: header;
                            background    : var(--bg-header);
                            color         : var(--clr-header);
                            padding-block         : 2rem;
                        }
                        header > .inside {
                            display               : grid;
                            grid-template-columns : minmax(.5rem, 1fr) minmax(0, 1200px) minmax(.5rem, 1fr);
                            column-gap            : 1rem;
                        }
                    
                

Grid im Header und Footer

CSS mit Nesting

                    
                        /* Header */
                        header {
                            grid-area: header;
                            background    : var(--bg-header);
                            color         : var(--clr-header);
                            padding-block         : 2rem;
                            & > .inside {
                                display               : grid;
                                grid-template-columns : minmax(.5rem, 1fr) minmax(0, 1200px) minmax(.5rem, 1fr);
                                column-gap            : 1rem;
                            }
                        }
                        /* Footer */
                        footer {
                            grid-area: footer;
                            background    : var(--bg-footer);
                            color         : var(--clr-footer);
                            padding-block : 2rem;
                            & > .inside {
                                display               : grid;
                                grid-template-columns : minmax(.5rem, 1fr) minmax(0, 1200px) minmax(.5rem, 1fr);
                                column-gap            : 1rem;
                            }
                        }
                    
                

Grid und Subgrid in Main

                    
                        /* Main */
                        main {
                            & > .inside {
                                display               : grid;
                                grid-template-columns : minmax(.5rem, 1fr) minmax(0, 1200px) minmax(.5rem, 1fr);
                                column-gap            : 1rem;
                                & > .mod_article {
                                    grid-column           : 1 / -1;
                                    display               : grid;
                                    grid-template-columns : subgrid;
                                    & > * {
                                        grid-column : 2 / -2;
                                    }
                                }
                            }
                        }
                    
                

Elemente im Header und Footer

                    
                        /* Header */
                        header {
                            grid-area: header;
                            background    : var(--bg-header);
                            color         : var(--clr-header);
                            padding-block : 2rem;
                            & > .inside {
                                display               : grid;
                                grid-template-columns : minmax(.5rem, 1fr) repeat(12, minmax(0, 5rem)) minmax(.5rem, 1fr);
                                column-gap            : 1rem;
                                & .logo {
                                    grid-column : 2 / span 3;
                                }
                                & .nav-wrapper {
                                    grid-column : 5 / span 9;
                                    justify-self: end;
                                }
                            }
                        }
                        /* Footer */
                        footer {
                            grid-area: footer;
                            background    : var(--bg-footer);
                            color         : var(--clr-footer);
                            padding-block : 2rem;
                            & > .inside {
                                display               : grid;
                                grid-template-columns : minmax(.5rem, 1fr) repeat(12, minmax(0, 5rem)) minmax(.5rem, 1fr);
                                column-gap            : 1rem;
                                & .copyright {
                                    grid-column : 2 / -2;
                                }
                            }
                        }
                    
                

12er Grid für main

                    
                        /* Main */
                        @layer main {
                            main {
                                & > .inside {
                                    display               : grid;
                                    grid-template-columns : minmax(.5rem, 1fr) repeat(12, minmax(0, 5rem)) minmax(.5rem, 1fr);
                                    column-gap            : 1rem;
                                    & > .mod_article {
                                        grid-column           : 1 / -1;
                                        display               : grid;
                                        grid-template-columns : subgrid;
                                        & > * {
                                            grid-column : 2 / -2;
                                        }
                                    }
                                }
                            }
                        }
                    
                

Artikel und Inhaltselement

Was ist ohne Templateanpassung machbar?

Artikel mit Hintergrund

                    
                        /* Artikel */
                        .mod_article {
                            &.bg {
                                padding-block: 1rem;
                                color: var(--inverse);
                                background-color: var(--secondary);
                            }
                        }
                    
                

Hilfsklassen festlegen

                    
                         /* Hilfsklasse für volle Breite */
                        .fullwidth {
                            grid-column           : 1 / -1;
                            display               : grid;
                            grid-template-columns : subgrid;
                            & > * {
                                grid-column : 2 / -2;
                            }
                        }
                        /* Hilfsklassen Hintergrundfarbe */
                        .bg {
                            padding-block: 2rem;
                        }
                        .bg--primary {
                            background : var(--primary);
                            color      : var(--inverse);
                        }
                        .bg--secondary {
                            background : var(--secondary);
                            color      : var(--inverse);
                        }
                        .bg--light {
                            background : var(--neutral-light);
                            color      : var(--clr);
                        }
                        .bg--dark {
                            background : var(--neutral-dark);
                            color      : var(--inverse);
                        }
                    
                

Textelement gestalten

                    
                        /* Inhaltselement Text */
                        .media {
                            row-gap : 1rem;
                        }
                        .media--above,
                        .media--below {
                            & figure {
                                /* Medium */
                                @media only screen and (min-width : 48em) {
                                    grid-column : 2 / span 5;
                                }
                            }
                        }
                        .media--left {
                            & figure {
                                /* Medium */
                                @media only screen and (min-width : 48em) {
                                    grid-column : 2 / span 5;
                                }
                            }
                            & .rte {
                                /* Medium */
                                @media only screen and (min-width : 48em) {
                                    grid-column : 7/ -2;
                                }
                            }
                        }
                        .media--right {
                            & figure {
                                /* Medium */
                                @media only screen and (min-width : 48em) {
                                    grid-column : 9 / -2;
                                    order : 3;
                                }
                            }
                            & .rte {
                                /* Medium */
                                @media only screen and (min-width : 48em) {
                                    grid-column : 2/ span 7;
                                }
                            }
                        }
                    
                

Galerien

CSS-Grid für die Galerie

                    
                       /* Inhaltselement Galerie */
                        .content-gallery {
                            & ul {
                                display       : grid;
                                gap           : .25rem;
                                grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));
                            }
                        }
                    
                

Beispielwebsite für eine 5-spaltige Galerie

                    
                        .content-gallery {
                            & ul {
                                display       : grid;
                                gap           : .25rem;
                            }
                        }
                        .content-gallery--cols-5 {
                            & ul {
                                /* Small */
                                @media only screen and (min-width : 37.5em) {
                                    grid-template-columns : repeat(2, 1fr);
                                }
                                /* Medium */
                                @media only screen and (min-width : 48em) {
                                    grid-template-columns : repeat(3, 1fr);
                                }
                                /* Large */
                                @media only screen and (min-width : 64em) {
	                                grid-template-columns : repeat(5, 1fr);
                                }
                            }
                        }
                    
                

Textboxen

Textelement als Box stylen

                    
                       /* Textelemente als Boxen */
                        .content-text--box {
                            container-type : inline-size;
                            display   : flex;
                            flex-flow : column;
                            gap       : 1rem;
                            &.bg {
                                padding-block: 0 1rem;
                            }
                            & h1,
                            & h2,
                            & h3,
                            & h4,
                            & h5,
                            & h6 {
                                padding-inline : 1rem;
                                margin         : 0;
                            }
                            & figure {
                                width  : 100%;
                                margin : 0;
                                order  : -1;
                            }
                            & .rte {
                                padding-inline : 1rem;
                            }
                        }
                    
                

Platzierung der Boxen

Verwendung der Elementgruppe

                    
                        /* Boxen in der Elementgruppe */
                        .content-element-group--box {
                            display: grid;
                            gap: 1rem;
                            /* Medium */
                            @media only screen and (min-width: 48em) {
                                grid-template-columns: repeat(2, 1fr);
                            }
                            /* Large */
                            @media only screen and (min-width: 64em) {
                                grid-template-columns: repeat(4, 1fr);
                            }
                        }
                    
                

Zusammenfassung

• modernes CSS erleichtert die Umsetzung eines Layouts in Contao
• Templateanpassungen sind dafür in vielen Fällen nicht erforderlich
• Verwendung von Klassen fürs Styling
  • manuelles Eintragen der Klassen
  • Einsatz einer Erweiterung um vorgefertigte Klassen wählbar zu machen
    • Stylemanager von Oveleon
    • Theme Toolbox von Erdmann und Freunde
    • CSS Style Selector (Fork von pdir)