Allgemeine Informationen

Einführung

Ansicht Desktop und Mobil

Online ersteigern Das virtuelle Auktionshaus der öffentlichen Verwaltung - Von der Münzsammlung bis zum Feuerwehrauto: Auf zoll-auktion.de gibt es fast nichts, was es nicht gibt – und für jeden etwas. Im Internet versteigern Bund, Länder und Gemeinden gepfändete, ausrangierte oder gefundene Stücke.

Dieses Styleguide dient der Veranschaulichung des Design Systems von zoll-auktion.de. Im Rahmen des Fellowships Tech4Germany 2018 wurde die Website Zoll Auktion einem Redesign unterzogen. Nach ausführlicher UX-Research und schnellen, iterativen Designprozessen, wurde dieser Styleguide anhand des neuen Designs erstellt.

Die Dokumentation

Diese Dokumentation wurde mit VuePress 0.14 implementiert. VuePress ist ein Generator für statische Websiten. VuePress basiert auf vue.js, Single Page Application Technologie und der Markdown-Sprache. Zur Erweiterung der Dokumentation sind folgende Seiten hilfreich:

SASS

Dieser Styleguide ist mit SASS gebaut. SASS ist ein CSS Preprocesser, wodurch man vor allem Variablen festlegen und CSS dynamisch erzeugen kann. Unter _variables.scss sind alle Variablen zu finden und sind dort verwaltbar.

Bootstrap 4.1

Bootstrap ist ein Open-Source Frontend-CSS-Framework. Mit 125,000+ Stars auf Github, ist Bootstrap das meist verwendete CSS-Framework.

Bootstrap bietet viele nutzvolle Tools zur schnellen agilen Entwicklung. Dazu bietet Bootstrap auch eine Bibliothek von Interaktions- und Darstellungskomponenten, womit schnell Nutzeroberflächen gebaut werden können.

Was von Bootstrap verwendet

Da wir unsere eigenen Komponenten erstellt haben, wurden nur Teile (bootstrap-grid.scss, bootstrap-reboot.scss, und einzelen utilities, mixins) der Bootstrap Bibliothek verwendet.

Wir haben uns in der Entwicklung an der Namensgebung von CSS Selektoren an Bootstrap orientiert. Das heißt, Vorkenntnisse in Bootstrap könnten für die Entwicklung mit diesem Styleguide hilfreich sein.

Bootstrap Reboot

Bootstrap Reboot enthält eine Menge von CSS-Änderungen, die eine einheitliche Basis für eine flüssige Entwicklung bietet.

Bootstrap Gridsystem

Basierend auf Flexbox, bietet Bootstrap Gridsystem ein Layout, das auf verschiedene Schirmgrößen und Geräte skaliert, um eine responsive Seite zu erzeugen. Der Gridsystem enthält 12 Spalten und CSS-Klassen zur Kontrolle auf verschiedenen Bildschirmgrößen.

Die Breakpoints von Bootstrap (die auch in diesem Styleguide Verwendung finden) sind:

  • Extra small devices (portrait phones, less than 576px)
  • sm Small Devices (landscape phones, 576px and up)
  • md Medium devices (tablets, 768px and up)
  • lg Large devices (desktops, 992px and up)
  • xl Extra large devices (large desktops, 1200px and up)

Ein typisches Beispiel:

// .container setzt die maximale Breite der Behälter 
//  auf 1200px auf xl Schirme. Im Vergleich zu
// .container-fluid, setzt die Breite auf 100%
<div class="container">

    // Eine Zeile mit Flexbox
    <div class="row">

        <div class="col-12 col-xs-6 col-md-4 col-lg-3 col-xl-2">
            // Der Inhalt hier nimmt 12 Spalten auf sehr kleine Schirme,
            // 6 Spalten auf sm / kleine Schirme
            // 4 Spalten auf md / mittelgroße Schirme
            // 3 auf großen Schirmen
            // und 2 auf sehr großen Schirmen 
        </div>

        <div class="col-12 col-lg-6">
            // 12 Spalten auf sehr kleinen, kleinen, und mittelgroßen Schirmen
            // 6 auf großen und she großen Schirmen.
        </div>
    </div>
</div>

Bootstrap Utilities

Neben dem Gridsystem und Reboot, wurden auch ein paar Utility Tools von Bootstrap verwendet, wie die CSS-Klassen von Spacing, clearfix, alignment, floats, flex ..usw.

Eine vollständige Liste der verwendeten Utilities sind in der Datei bootstrap-custom.scss zu finden. Weitere können nach Wunsch ein- bzw. auskommentiert werden.

Bootstrap Spacing

In bootstrap-custom.scss wurden auch die Spacings erweitert. Die $spacers Variable ist erweiterbar, damit neue Padding- und Marginklassen erzeugt werden können. Für die Templates von Zoll-Auktion wurden 3 neue Größen hinzugefügt: custom01, custom34, und custom45.

Nachdem die SASS Datei kompiliert wird, können die Spacingklassen wie folgt verwendet werden:

<div class="mt-1 pl-3">
    //margin-top: .25rem 
    //padding-left: 1rem
</div>
<div class="mx-5 py-3">
    //margin-left: 3rem 
    //margin-right: 3rem 
    //padding-top: 1rem
    //padding-bottom: 1rem
</div>
<div class="m-2 p-custom34">
    //margin: .5rem 
    //padding: 1.25rem, der Wert zwischen p-3 (1rem) und p-4 (1.5rem)
</div>

Andere Dependencies

Slick & jQuery

Slick 1.8.0 ist ein responsive Bildercarousel. Dafür ist jQuery 3.3.1 notwendig.

WARNING

In der slick.js-Datei (Zeile 2996ff.) befindet sich am Ende eigener Code, welcher ermöglicht, dass ein Slide-Counter implementiert wird (siehe Produktseite).

noUiSlider

noUiSlider 12.0.0 findet Verwendung für Slider und Range-Slider (zum Beispiel auf der Listenansicht).

Vergleich von neuem Design zu altem Design

Desktop (neu - alt)

Mobil (neu - alt)