SS2019: Technologierecherche – Frontend Frameworks

CSS Frameworks

CSS-Frameworks sind Sammlungen von Gestaltungsmitteln und -Elementen, die bei einem einheitlichen und standardisierten Webdesign helfen. Um Websiten und Web-Applikationen responsive* zu gestalten, basieren CSS-Frameworks auf Grid-Gestaltungsrastern und grundlegenen Gestaltungselementen, grafischen Elementen und CSS-Anpassungen, wie Hilfsklassen und Stylesheets. Eine Übersicht der bekanntesten Frameworks bietet die Website usablica. Einige weitverbreitete Frameworks werden im Folgenden näher vorgestellt.

• erleichtern das Erstellen von optisch und funktional modernen Websites
• sparen Zeit

Foundation

Das Open Source Framework Foundation wurde 2011 von ZURB* unter der MIT-Lizenz veröffentlicht. Dieses wurde in HTML, CSS, SASS und Javascript geschrieben und bietet neben einem Grid-System, HTML und CSS UI Elemente für ein responsives Webdesign. Das Foundation-Framework wurde auf Basis von Sass/SCSS entwickelt und kann mit Mixins einfach erweitert werden. Als Grundlage verwendetet das Foundation Framework jQuery, HTML5 Boilerplate und Normalizr.

Grundaspekte Foundation wird standardmäßig mit einem 940 Pixel breiten, flexiblen Rasterlayout geliefert. Das Toolkit reagiert vollständig auf die Verwendung verschiedener Auflösungen und Gerätetypen: Mobiltelefone, Hoch- und Querformat, Tablets und PCs mit niedriger und hoher Auflösung (Breitbild). Dadurch wird die Breite der Spalten automatisch angepasst.

Foundation bietet eine Reihe von Stylesheets, die grundlegende Stylesheets für alle wichtigen HTML-Komponenten bereitstellen. Diese sorgen für ein browser- und systemweit einheitliches, modernes Erscheinungsbild bei der Formatierung von Texten, Tabellen und Formularelementen.

Zusätzlich zu den regulären HTML-Elementen enthält Foundation weitere häufig verwendete Oberflächenelemente. Dazu gehören Schaltflächen mit erweiterten Funktionen (z.B. Gruppierung von Schaltflächen oder Schaltflächen mit Dropdown-Option, Marken- und Navigationslisten, horizontale und vertikale Registerkarten, Navigation, Breadcrumb-Navigation, Seitenumbruch usw.), Beschriftungen, erweiterte typografische Funktionen und Formatierung für Meldungen wie Warnungen.

Foundation jQuery-Komponenten bieten allgemeine Elemente der Benutzeroberfläche und markengebundene Erweiterungen. Die Liste enthält: Dialog, Tooltips, Karussells, Warnungen, Löschen, Cookies, Dropdown, Formulare, Joyride, Magellan, Umlaufbahn, Platzhalter, Enthüllung, Abschnitt, Topleiste, Flex-Video und viele andere.

Installation über GitHub, Download

Vorteile

• Keine Inkompatibilitäten mit Back-end oder Server
• Flexbox-based Grid, Float Grid und XY Grid
• Große Community (Kleiner als Bootstrap)
• Ready to Use HTML-Templates

Nachteile

Beispiel-Syntax für Basic Flex Grid

<div class="row">
  <div class="columns small-6">6 columns</div>
  <div class="columns small-6">6 columns</div>
</div>
<div class="row">
  <div class="columns medium-6 large-4">12/6/4 columns</div>
  <div class="columns medium-6 large-8">12/6/8 columns</div>
</div>

Showcase

Materialize

Das Materialize Framework basiert auf Google's Material Design Konzept und wurde auf HTML, CSS und Javascript entwickelt. Es bietet Layouts, Animationen und andere UI Elemente im Material Design.

Grundaspekte

• Materialize stellt vordefinierte Klassen zur Verfügung, um Container zu erstellen, die die verschiedenen UI-Komponenten aufnehmen.
• Grids Materialize hat 12 Spalten eingebautes Gridsystem.
• Materialize Framework hat verschiedene Klassen, um Tabellen zu erstellen.

Installation über Github, Download, cdn, npm

Vorteile

• Hohe Benutzerfreundlichkeit
• Konsistentes Design

Nachteile

• Untrennbar mit Google verbunden
• (Animationen verbrauchen Akku)
• (Rendering-Richtlinien einhalten)

Beispiel-Syntax für Responsive Grid

<div class="row">
    <div class="col s12"><p>s12</p></div>
    <div class="col s12 m4 l2"><p>s12 m4</p></div>
    <div class="col s12 m4 l8"><p>s12 m4</p></div>
    <div class="col s12 m4 l2"><p>s12 m4</p></div>
  </div>
  <div class="row">
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
  </div>

Responsive Layouts

Showcase:

Bootstrap

Bootstrap ist ein bekannteste und beliebteste CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen. Zudem bietet Bootstrap alle Voraussetzungen um responsive Webdesigns zu gestalten, die dann auch auf Smartphones oder Tablets optimal dargestellt werden.

Kerninformationen:

• Entwickelt von Twitter (Marc Otto & Jacob Thornton).
• Erscheinungsjahr - 2011.
• Aktuelle Version: 4.3.1.
• 132,879 Stars in Github.

Bootstrap erzielte ein responsives Design durch Einführung der Idee eines 12-Spalten-Grids. Das Framework legt ein Grid über die gesamte Page. Das bedeutet, die gesamte Breite wird in Spalten und die Höhe in Zeilen aufgeteilt. Standardmäßig verwendet Bootstrap ein 12-spaltiges Raster-Layout mit einer Breite von 1140 Pixel (.container). Dabei wird die Rasterbreite entsprechend der Displaygröße via CSS-Breakpoints angepasst.

Beispiel Syntax für drei Column Grid.

<div class="container">
  <div class="row">
    <div class="col-md">
       One of three columns
    </div>
   
    <div class="col-md">
      One of three columns
    </div>

    <div class="col-md">
      One of three columns
    </div>
  </div>
</div>

Beispiel Syntax für Buttons:

<button type="button" class="btn btn-outline-primary">Primary</button>

<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Vorteile

• Große Sammlung von Komponenten
• LESS & SASS Unterstützung
• riesige Community
• rapid prototyping

Nachteile

• große Datei, in den kleineren Projekten fraglich, ob wirklich alle Bootstrap-Komponenten benötigt werden.
• UI/UX Monotonie
• schwer anpassbar

Showcase:

Bulma

Bulma ist ein freies und Open-Source Frontend-CSS-Framework basierend auf Flexbox. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente.

Kerninformationen:

• Entwickelt von Jeremy Thomas.
• Erscheinungsjahr - 2016.
• Aktuelle Version: 0.7.4.
• 34,422 Stars in Github.
• Framework size: 129 KB.

Grundaspekte:

• flexbox basiert
• modular (Besteht aus 39 .sass-Dateien, die Sie einzeln importiert sein können. Man die Komponenten verwenden, die gebraucht sind)
• Installation über npm oder Integration über CDN.
• responsive & mobile-first

Da Bulma Flexbox basiert ist, um einen flexiblen Layouts mit Spalten gleicher Größe zu erstellen wird nur eine .column - Klasse benötigt. Im responsiven Ansicht die Columns werden vertikal gestapelt.

Die Bulma-Syntax verwendet die Schlüsselwörte is- und has-, um Modifikatoren in der Basisklasse zu identifizieren. Bei den Buttons ist Button die Basisklasse, und es gibt Modifikator wie is-primary, is-small und usw.

<a class="button is-primary">
  Button
</a>

<a class="button is-primary is-outlined">
  Button
</a>

<a class="button is-primary is-small" disabled>
  Button
</a>

Vorteile

• leicht, schneller Laden von Webseite
• leicht integrierbar in die andere Front-end Frameworks
• sehr anpassbar (415 sass Variablen)
• responsive
• schnell erlenbare Syntax, intuitiv verständliche Klassennamen
• Verfügbare Erweiterungen (Extentions): z.B Pricing Tables, Timeline, Calendar usw.
• gute Dokumentation
• modern

Nachteile

• relativ kleinere Community
• schwer integrierbar in die Projekten mit BEM oder SMACSS Conventionen

Showcase:

---

Naming Conventions

Neben Code-Conventions wie DRY, Seperation of Concerns oder dem Einrückungsstil gibt es auch im CSS-Raum Festlegungen oder Empfehlungen für Programmierer, wie Bezeichner für Objekte im Quelltext benannt werden sollen. Diese Regelungen oder Naming-Conventions sollen dabei helfen, den Code lesbarer und somit wartbarer zu machen. Dabei werden Namen für Konstrukte, wie Objekte, Funktionen, Klassen und Module im Rahmen der Syntaxbestimmungen nach einheitlichen Regeln gebildet. So ist der Code einfacher wartbar und bringt mehr Konsistenz in der Benutzererfahrung. Im Folgenden werden die drei bekannten Naming-Convention-Style Guides vorgestellt.

BEM

BEM - Block-Element-Modifier ist eine Methodologie um gut strukturierte und wiederverwendbare Komponenten zu schaffen. Es dient dazu, eine skaliebare CSS-Architektur aufbauen zu können und ist vergleichbar mit SMACSS oder OOCSS. Dabei werden einzelne Strukturen im DOM nur mit Klassennamen nach einem bestimmten Muster benannt, um den Code leichter lesbar und skalierbarer zu machen.

Prinzipien:

• Alle CSS-Selektoren bestehen aus lediglich je einer Klasse
• Es gibt keine id-Selektoren (#header {}) und auch keine Baustein-Selektoren (h2 {})
• Verschachtelungen jeglicher Art sind nicht erlaubt

Somit besitzt jeder Selektor die gleiche Spezifität und es entscheidet ausschließlich die Reihenfolge im Quelltext, welche Regel greift.

Beispiel Code ohne BEM

HTML

<ul class="navbar">
    <li><a href="muster1.html">Über uns</a></li>
    <li><a href="vision.html">Vision</a></li>
    <li class="active"><a href="kontakt.html">Kontakt</a></li>
</ul>

CSS

ul.navi a {
    color: #090;
    text-decoration: none;
}

ul.navi .active > a {
    color: #000;
}

Beispiel Code mit BEM

HTML

<ul class="navbar">
    <li class="navbar__item">
        <a class="navbar__link" href="ueberuns.html">Über uns</a>
    </li>
    <li class="navbar__item">
        <a class="navbar__link"  href="vision.html">Vision</a>
    </li>
    <li class="navbar__item navi__item--active">
        <a class="navbar__link navbar__link--active" href="kontakt.html">Kontakt</a>
    </li>
</ul>

CSS

.navbar__link {
    color: #090;
    text-decoration: none;
}

.navbar__link--active {
    color: #000;
}

Basisregeln:

• Namen setzen sich aus drei Komponenten zusammen: Block, Element und Modifier.
• Blöcke bezeichnen eine alleinstehende Einheit von Elementen und hängen somit nicht von anderen Blöcken oder Elementen ab. (class="navbar")
• Ein Element ist ein Teil eines Blocks. Jedes Element ist semantisch an seinen Block gebunden. (class="navbar__item", class="navbar__link")
• Ein Modifier ist eine Modifizierung eines Blocks oder Elements. ( class="navbar__link navbar__link--active")

Vorteile:

• flache Struktur der Klassen (keine Verschachtelungen / Vererbungen, keine IDs oder Tags, kein !important) schnelle Übersicht über Kind-Elemente und Modifier
• Abhängigkeit bzw. Zugehörigkeit von CSS-Klassen bereits im Code erkennbar .navbar__item hängt von .navbar ab
• einfachere Kommunikation innerhalb eines Teams durch Festlegung einer Syntax
• Wartung und Ergänzung von CSS viel schneller und einfacher
• gut für Component-basierte WebApps
• funktioniert mit SASS

Nachteile:

• HTML ist schwer zu lesen
• alle Klassen sind Block-verbunden und können nicht wiederverwendet werden

SMACSS - Smacks

SMACSS - Scalable and Modular Architecture for CSS - ist eine Sammlung von Empfehlung, um CSS organisierter und strukturierter zu schreiben und ist online frei zugänglich. Der Author von SMACSS Jonathan Snook kategorisiert CSS-Regeln um Muster im Code zu kodifizieren und daraufbezogen Regeln für die einzelnen Kategorien zu erstellen. Dadurch wird der CSS-Code und seine Datenstruktur nach Basisregeln, Layoutregeln, Modulregeln und Stateregeln strukturiert.

Vorteile

• Gute, freie Dokumentation
• Weit verbreitet

Nachteile

• Eigentlich nicht für Sass entwickelt (funktioniert aber)
• Man kann einfach von abweichen

Datenstruktur-Beispiel IDE

Benennungsregeln Durch die Aufteilung der Regeln in die fünf Kategorien ist die Namenskonvention von Vorteil, um sofort zu verstehen, zu welcher Kategorie ein bestimmter Stil gehört und welche Rolle er innerhalb des gesamten Umfangs der Seite spielt. Bei großen Projekten ist es wahrscheinlicher, dass die Stile in mehreren Dateien aufgeteilt sind. In diesen Fällen erleichtert die Namenskonvention auch das Auffinden, zu welcher Datei ein Style gehört.

Basisregeln (Base-Rules) Eine Basisregel wird auf ein Element unter Verwendung eines Elementselektors, eines Nachfolgeselektors oder eines Unterselektors sowie beliebiger Pseudoklassen angewendet. Es enthält keine Klassen- oder ID-Selektoren. Es definiert das Standard-Styling, wie dieses Element in allen Vorkommnissen auf der Seite aussehen soll.

Zu den Basis-Stilen gehören die Einstellung von Überschriftengrößen, Standardlinkstilen, Standardschriftarten und Körperhintergründen. Es sollte nicht nötig sein, !important in einem Base Style zu verwenden.

Codebeispiel für Base-Styles _base.sass

body
    font-family: ..

*
    box-sizing: ..

a
    color: ..
    &:hover:
        color: ...

Layout-Styles/Rules Layoutregeln unterteilen die Seite in Abschnitte. Layouts halten ein oder mehrere Module zusammen. Dabei legen Sie nur fest, wie Übergeordnete Elemente, wie Header, Footer, SideBars angeordnet werden, nicht wie die einzelnen Elemente in diesen gestaltet werden.

Code-Beispiel

#sidebar {
    float: right;
}

.l-flipped #sidebar {
    float: left;
}

Modul-Styles Module sind die wiederverwendbaren, modularen Teile einer Website. Sie sind die konkreten Komponenten einer Seite, wie Navigationsleisten, Widgets etc. Module befinden sich innerhalb von Layoutkomponenten und können manchmal innerhalb anderen Modulen sein. Jedes Modul sollte so konzipiert sein, dass es als eigenständige Komponente existiert. Dadurch wird die Seite flexibler. Zu jedem er unten

Code-Beispiel (HTML/Jade)

header#header                   //Layout-Komponente
    ul.nav                      //Modul-Element
        li.nav--item test

main#main
.card
    .card--label test1
    .card--text Lorem ipsum..
    ul.card--tags.tag Lorem
        li.tags--tag ipsum

CSS

.card

    max-width: 400px

    &--label.                      //Nesting-Feature SASS
        padding: 2px 3px
        margin-bottom: 10px
        background-color: black
        color: white

Zustandsregeln (State Rules) Zustandsregeln sind Möglichkeiten, zu beschreiben, wie die Module oder Layouts in einem bestimmten Zustand aussehen werden. Dieser kann versteckt oder erweitert, aktiv oder inaktiv sein. Dabei wird beschrieben, wie ein Modul oder Layout auf kleineren oder größeren Bildschirmen und verschiedenen Ansichten aussieht.

Code-Beispiel _state.sass Beispiel: in HTML wird nav-Element um .is-selected erweitern

.nav
    
    &--item
        &.is-selected
            color:blue

Themenregeln (Theme Rules) Die optionalen Themenregeln sind ähnlich wie die Zustandsregeln, da sie beschreiben, wie Module oder Layouts aussehen könnten. Die meisten Websites erfordern jedoch keine Thematisierungsebene. Hierbei werden durch Variablen das Layout und die Darstellung einer Seite je nach Theme gestaltet.

OOCSS (Object-Oriented CSS)

Das OOCSS wurde 2008 von Nicole Sullivan entwickelt. Es nutzt Prinzipien der Object Orientierten Programmierung

• Decoupling
• Single Responsibility Prinzip & Seperation of Concerns
• Encapsulation (für Wiederverwendbarkeit)

Sepeartion of Structure and Skin Dieses Prinzip besagt, dass Struktur-Regelungen, die für den Nutzer “unsichtbar” sind, von den sichtbaren Elementen getrennt beschrieben werden sollen. Zu den unsichtbaren Elementen zählen Height, Width, Margins, Padding und zu den visuellen Elementen gehören Farbe, Font-Family, Shadows und Gradients.

Code-Beispiel Vorher

.button {
    width: 150px;
    height: 50px;
    background: #FFF;
    border-radius: 5px;
}

.button-2 {
    width: 150px;
    height: 50px;
    background: #000;
    border-radius: 5px;
}

Code-Beispiel mit OOCSS

.button {
    background: #FFF;

}

.button-2 {
    background: #000;
}

.skin {
    width: 150px;
    height: 50px;
    border-radius: 5px;
}

Seperation of Container and Content Dieses Prinzip besagt, dass Container vom Inhalt der Seite separiert werden sollen. Inhalt bezeichnet hier Elemente, wie Bilder, Paragraphen und Div-Tags, welche innerhalb anderen Elementen (Containern) eingenistet sind.

Code-Beispiel ohne OOCSS

#sidebar {
    padding: 2px;
    left: 0;
    margin: 3px;
    position: absolute;
    width: 140px;
}


#sidebar .list {
    margin: 3px;
}


#sidebar .list .list-header {
    font-size: 16px;
    color: red;
}


#sidebar .list .list-body {
    font-size: 12px;
    color: #FFF;
    background-color: red;
}

Code-Beispiel mit OOCSS

.sidebar {
    padding: 2px;
    left: 0;
    margin: 3px;
    position: absolute;
    width: 140px;
}

.list {
    margin: 3px;
}

.list-header {
    font-size: 16px;
    color: red
}

.list-body {
    font-size: 12px;
    color: #FFF;
    background-color: red;
}

Vorteile

• Applikationsgeschwindigkeit
• Skalierbarkeit
• Effizient
• Wartbarkeit
• Lesbarkeit

Nachteile

• Anzahl der Klassen, die einem Element hinzugefügt werden
• Zu viel für kleine Projekte
• Lernzeit hoch

Quelle: keycdn

CSS-Präprozessoren

Präprozessoren: Die Verwendung von Stylesheet-Sprachen, wie Sass oder LESS oder Stylus ermöglichen die Verwendung von Variablen, Funktionen und Operatoren, verschachtelten Selektoren sowie sogenannten Mixins und erweitern die CSS-Sprache.

Vorteile von Präprozessoren:

• CSS wird um die Funktionen ergänzt, die vermisst sind (Variablen, Mixins, Funktionen)
• Stylesheets werden mehr DRY
• Zeitersparnis
• einfachere Wartung & Pflege
• Bessere Organisation des Codes

Begriffe

Responsive Webdesign: Responsives Webdesign appelliert daran Webseiten nicht mehr statisch auszuliefern, sonder danach auszurichten, auf welchem Gerät diese geöffnet wird. Der Client - Browser erkennt somit auf welchen Gerät die Seite geöffnet wird und rendert die CSS-Regeln auf verschiedene Elemente anders.

Mobile First: Beim Mobile First Ansatz besitzt die Darstellung von Webseiten auf mobilen Geräten höchste Priorität. Da mobile Endgeräte immer häufiger für den Verkehr im Netz genutzt werden, sollen Webseiten zuerst für diese Auflösungen optimiert und

DRY: Don't repeat yourself. Das Gestaltungsprinzip "Don't repeat yourself' von Andy Hunts und Dave Thomas besagt, Redundanz zu vermeiden, um die Pflege des Codes zu vereinfachen.

Seperation of Concerns: SoC ist ein Gestaltungsprinzip zur Trennung eines Computerprogramms in verschiedene Abschnitte, so dass jeder Abschnitt ein eigenes Anliegen behandelt.