In diesem Blog-Eintrag geht es ausschliesslich um Administrations-Applikationen. Für öffentliche Webseiten oder Applikationen, welche ein individuelles Design voraussetzen, gelten andere Regeln. Bei diesen ist eine aufwendige Gestaltung gerechtfertigt.
Was ist ein CSS-Framework?
Ein CSS-Framework ist ein komplettes Design für eine Webseite oder eine Web-Applikation. Es ist vollständig und aufeinander abgestimmt. So sind alle Zeilenabstände, Grössen, Farben, Rahmen, etc… so gewählt, dass sie für dieses Design funktionieren.
Alle wichtigen Html-Elemente sind enthalten. Auch ihr Aussehen und Verhalten sind auf das Framework abgestimmt.
Für die Gliederung einer Seite wird ein Gridsystem angeboten. Diese bieten eine Vielzahl an Designmöglichkeiten. Sie sind jedoch nicht so einfach einzusetzen. Gerade der Einsatz des Grids verlangt vom Entwickler grosse Disziplin. Falsche Verschachtelungen oder eingesetzte Html-Elemente können den Nutzen vom Framework schmälern oder gar zu Nichte machen.
Es ist also nicht nötig, Anpassungen am CSS vorzunehmen. Wenn dir das Standard-Design von Boostrap gefällt, kannst du deine ganze Applikation, ohne eine Anpassung, damit entwickeln.
Es gibt kaum einen Grund, irgend etwas anzupassen!
Warum ein CSS-Framework?
Die CSS-Frameworks wie z.B. Bootstrap sind eine grosse Unterstützung für den Entwickler. Sie bieten viele nützliche und vorgefertigte Elemente, die man out of the box nutzen kann. Weiter ist der Syntax und der Aufbau vereinheitlicht und vereinfacht so das Erlernen und die Zusammenarbeit mit mehreren Entwicklern. Die Vereinheitlichung der Browservielfalt ist weitgehend gelöst und wird durch die Entwickler stetig angepasst. Das Layouten einer Applikation wird durch das Gridsystem erheblich vereinfacht.
Wie entsteht das Chaos?
Je länger an einem Projekt gearbeitet wird, desto grösser ist die Gefahr, dass Anpassungen am Framework zu einem Chaos führen. Dies geht so weit, dass nur noch einzelne Elemente aus dem Framework genutzt werden und stattdessen eigene “Lösungen” implementiert werden. Ist es einmal so weit, ist der Nutzen eines Frameworks nur noch minimal.
Aber wie kommt es so weit?
Der Entwickler weiss nicht, wie das Framework funktioniert.
Kennt der Entwickler den Aufbau des Frameworks nicht, implementiert er eigene Lösungen für ein Problem. Dann findet man im CSS Klassen wie .margin-up-10 oder .seite1-h1.
Das Design einzelner Seiten ist nicht homogen aufgebaut.
Da mehrere Personen verschiedene Seiten einer Applikation entwerfen, kommt es zu unterschieden. Dies kann nur durch Kommunikation zwischen den Ux’ler und den Entwickler gelöst werden. Auch spezielle Wünsche des Kunden können zu diesen Unterschieden führen. Dies ist meist schwieriger zu umgehen. Tipp: Den Kunden so wenig wie möglich ins Design mit einbeziehen. Schliesslich sind wir die Profis und nicht der Kunde.
Zeitdruck während der Entwicklung.
Weil die Zeit fehlt, werden einzelne Elemente so angepasst, dass sie auf dieser Seite “gut” aussehen. Bitte nicht!
UX und Entwicklern halten sich nicht an die Vorgaben vom Framework.
Wenn das Implementieren einer Seite “Handstände” erfordert, läuft etwas falsch. Dann muss unbedingt das Gespräch gesucht werden. Was wurde falsch gemacht? Warum ist diese Seite oder dieses Element so aufgebaut und entspricht nicht dem normalen Aufbau?
Probleme beim Anpassen des Frameworks
Um das Problem besser verstehen zu können, schauen wir uns ein paar Elemente in einer HTML Applikation an. Welche Fehler werden am häufigsten gemacht.
Typographie
Mit Typographie wird das Aussehen und das Verhalten der Textbausteine in einem Dokument oder in unserem Fall in der Applikation bestimmt.
Um das Framwork bestmöglichst und nachhaltig zu verwenden, ist es wichtig, dass wir die HTML-Elemente gemäss ihrem Zweck einsetzten. Vergewaltigungen von Elementen ist fast immer der schlechtere Weg. Auch wenn Elemente nicht gebraucht werden, führt das zu Mehraufwand und Chaos während dem Projektverlauf bzw. bei der Wartung.
Typographie: Titel
Die Titel in einer Applikation sind ein wichtiges Strukturmittel und tragen massgeblich zur Orientierung in der Applikation bei. Wichtig ist ihre Gliederung. Dabei ist zu beachten, dass die Hierarchien stimmen. Stell dir ein Buch mit Kapitel vor. Es gibt nur eine Hauptüberschrift (h1). Unter dieser Überschrift sind alle anderen, in absteigender Ordnung, verschachtelt.
So bitte nicht!
<h1>
Seitenüberschrift
</h1>
<p>
Sit adipisci libero minima quo reprehenderit. Corporis rerum ea praesentium
illum aliquid. Numquam aut reprehenderit cupiditate nihil saepe.
Adipisci quo itaque commodi quidem atque? Dicta odit quia ipsa autem neque
</p>
<div class="seite-x-second-title down-10">
Sit eum.
</div>
<p>
Dolor consectetur quo sunt itaque earum. Odit quisquam dolorem omnis
vel architecto alias. Dolorem ratione voluptas explicabo asperiores facilis.
Non eum quod voluptatibus ducimus non. Placeat repellendus alias dolore
quaerat.
</p>So geht das
<h1>
Seitenüberschrift
</h1>
<p>
Adipisicing tempora repellendus quos eum dicta? Incidunt mollitia vel
voluptatem rem hic Vitae pariatur doloribus omnis quae accusamus fuga?
Nulla vel mollitia quae iure libero Similique dignissimos ratione
impedit itaque.
</p>
<h2>
Überschrift 2
</h2>
<p>
Adipisicing itaque unde dolor eos autem debitis doloremque sed sit Aliquid
eum rerum nulla tenetur quo neque quidem Quaerat atque sed provident commodi
porro. Beatae amet deleniti iure hic vero
</p>Das Problem
Die zweite Überschrift im schlechten Beispiel ist ganz klar ein Titel. Es wird aber ein falsches Element (div) verwendet. Von jetzt an muss ich als Entwickler dieses Konstrukt benutzen, um in meiner Applikation das Design einheitlich zu haben. Daraus ergeben sich folgende Probleme:
- Das Theme kann nicht mehr so einfach angepasst werden.
- Für jede neue Seite muss ich mir das Design von diesem Titel zusammensuchen. Dadurch entstehen Fehler. Ähnlich wie bei der stillen Post.
- Für die Überschrift 2 wird es über kurz oder lang x-verschiedene Varianten geben.
- Die Kommunikation mit den UXler wird schwieriger.
Typografie: Paragraphen
Das Paragraph-Element <p><\p> gliedert einen Text und bestimmt sein Verhalten wie er dargestellt wird. Unter anderem werden die Abstände zwischen den einzelnen Abschnitten bestimmt.
So bitte nicht
<div class="margin-left10">
Sit sit et maxime amet placeat! Praesentium voluptas laboriosam at
perspiciatis temporibus natus! Esse animi nisi quaerat quia animi Iste eum
neque ad sapiente voluptate. Sit error doloribus asperiores quo
</div>
<div class="margin-left10 up-10">
Sit voluptatem omnis autem quidem recusandae possimus Ipsum dolorum eaque
voluptatem alias totam alias iusto Reiciendis ipsa quidem dolores quibusdam
consequatur? Facere vel accusantium blanditiis sapiente dolor
Harum quae voluptatibus
</div>So geht das
<p>
Elit est sint ipsa mollitia illum Rerum molestiae consectetur aliquam itaque
quasi, nesciunt! Sint deserunt culpa nesciunt eligendi sed! Repellat vitae
quidem libero sequi voluptate. Voluptatibus sint eaque distinctio officiis.
</p>
<p>
Sit quod id ipsa quod nesciunt voluptas Aspernatur corrupti dicta illum
odit praesentium Consectetur corporis et accusantium similique neque?
Labore aliquid tempora assumenda officia inventore? Officia pariatur ad
sint aspernatur.
</p>Das Problem
Das Margin bzw. die Abstände zum nächsten Absatz sind global für p definiert. Das gleiche Problem wie bei den Titeln tritt auch hier auf. Ein Entwickler braucht für den Abstand zum nächsten Abschnitt down-10 und der Andere gibt im unteren Abschnitt up-10 an.
- Das Theme kann nicht mehr so einfach angepasst werden.
- Für jede neue Seite muss ich mir das Design von diesem Titel zusammensuchen. Dadurch entstehen Fehler. Ähnlich wie bei der stillen Post.
- Für die Überschrft 2 wird es über kurz oder lang x-verschiedene Varianten geben.
- Die Kommunikation mit den UXler wird schwieriger.
- Responive Design funktioniert nicht mehr.
Komponenten
Eine Komponente sollte als selbständiges Element betrachtet werden. Es besitzt eigene Design-Elemente aber auch Elemente die das Design von der Seite erben. Schauen wir uns das Ganze an einer Newskomponente an. Diese besteht aus einem Titel und einer Liste aus News. Alle News wiederum haben einen Titel und einen Text.
So bitte nicht
<div>
<div class="news-title">Das sind News</div>
<ul class="news" >
<li>
<div class="news-news-title">Wichtige News</div>
<p class="news-text">Amet aut autem iusto adipisci quibusdam cum? Non suscipit est.</p>
</li>
</ul>
</div>
.news-title {
...
}
.news {
...
}
etc...So geht das
<div class="edo-news">
<h1>Das sind News</h1>
<ul>
<li>
<h2>Wichtige News</h2>
<p>Dolor voluptatem commodi tenetur sit iure Ea quod ratione deleniti</p>
</li>
</ul>
</div>
.edo-news {
h1 {
...
}
ul {
...
h2 {
...
}
p {
...
}
}
}Das Problem
Die erste Variante ist viel zu kompliziert und ist nicht logisch aufgebaut. Der Code ist nicht einfach zu lesen und auch nicht einfach zu merken. Wird diese Komponente mehrfach eingesetzt, entstehen unweigerlich Abweichnugen zu einander.
Anmerkung zu den eingesetzten Header-Elementen h1 und h2.
An dieser Stelle macht es Sinn, für die Hauptüberschrift und den News-Überschriften die Header-Elemente einzusetzten. Da diese in einer Komponente gekapselt sind und wahrscheinlich nicht zum Hauptbereich der Seite gehören. Die Seite hat dann mehrere Haupüberschriften, dies macht hier aber Sinn. Wichtig dabei ist, alle Eigenschaften die nicht von der Seite geerbt werden sollen, zu überschreiben (Farben, Grösse, Abstände etc…).
Was muss ich also beachten?
Passe so wenig wie wie möglich an. Jede Anpassung führt einen Schritt weiter zum Chaos! Nutze die bestehenden Elemente. Hinterfrage Sketches und suche das Gespräch mit dem Ux’ler:
- Ist wirklich eine neue Komponente notwendig?
- Diese Farbe gibt es noch nicht. Was bedeutet sie? Betrifft diese Änderung auch andere Elemente.
- Die Vorlage entspricht nicht unseren Designvorgaben.
Mache Änderungen wann immer möglich global. Wenn das nicht möglich ist, versuche eine Komponente zu etablieren und erst dann mache Anpassungen an einem einzelnen Element auf einer Seite (Top Down). Schau dir dazu das bestehende Framework an und mache es wie sie.
Mache KEINE Änderungen am Grid! Du wirst es bereuen. Wenn du Layouts nicht umsetzten kannst, suche das Gespräch mit den Ux’ler.
Bootstrap und SASS
Bootstrap bietet ihr Framework auch in einer SASS Version an. Diese Version macht es dir einfacher Änderungen sauber umzusetzen. So beinhaltet es eine Datei mit Variablen, die du ändern kannst, um dein Design anzupassen. Nutze wann immer möglich diese Variablen.
Wenn du doch Änderungen machen musst, kann dir der Aufbau von SASS helfen. Baue dazu, in deinem Projektordner, die Struktur nach und überschreibe das Element.
