SS2019: Technologierecherche – Frontend 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.
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
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:
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.
- UX Monotonie
- schwer anpassbar
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
Nachteile
- relativ kleinere Community
- schwer integrierbar in die Projekten mit BEM oder SMACSS Conventionen
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 - 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.
``
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.
Code-Beispiel
.card
&--label
…
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
html, body, form {
margin: 0; padding: 0;
}
input[type=text] {
border: 1px solid #999;
}
a {
color: #039;
}
a:hover {
color: #03C;
}
Layout-Styles/Rules Layoutregeln unterteilen die Seite in Abschnitte. Layouts halten ein oder mehrere Module zusammen. Divs, margin und floats betreffend - Element-Selektoren vermeiden
Code-Beispiel
#article {
float: left;
}
#sidebar {
float: right;
}
.l-flipped #article {
float: right;
}
.l-flipped #sidebar {
float: left;
}
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
Modul-Styles Module sind die wiederverwendbaren, modularen Teile unseres Designs. Sie sind konkrete Komponenten einer Seite, wie Navigationsleisten, Widgets etc. Module befinden sich innerhalb von Layoutkomponenten. Module können manchmal auch in anderen Modulen eingesetzt werden. Jedes Modul sollte so konzipiert sein, dass es als eigenständige Komponente existiert. Dadurch wird die Seite flexibler.
Code-Beispiel
<div class="fld">
<span>Folder Name</span>
</div>
/* The Folder Module */
.fld > span {
padding-left: 20px;
background: url(icon.png);
}
Zustandsregeln (State Rules) Zustandsregeln sind Möglichkeiten, zu beschreiben, wie unsere Module oder Layouts in einem bestimmten Zustand aussehen werden. Ist es versteckt oder erweitert? Ist es aktiv oder inaktiv? Es geht darum, zu beschreiben, wie ein Modul oder Layout auf kleineren oder größeren Bildschirmen aussieht. Es geht auch darum, zu beschreiben, wie ein Modul in verschiedenen Ansichten wie der Homepage oder der Innenseite aussehen könnte.
Code-Beispiel
.tab {
background-color: purple;
color: white;
}
.is-tab-active {
background-color: white;
color: black;
}
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.