Bootstrap-Al­ter­na­ti­ven: Die besten Frontend-Frame­works im Überblick

Wer ein Web-Frontend erstellen möchte, hat diverse Her­aus­for­de­run­gen zu meistern: Es gilt, der Ober­flä­che die passende Optik zu verleihen, dabei aber zu keinem Zeitpunkt die Usability aus den Augen zu verlieren. Aufgrund der ver­schie­de­nen Geräte und Browser, mit denen User heut­zu­ta­ge auf Inhalte im Web zugreifen, müssen die gewählten visuellen und tech­ni­schen Elemente darüber hinaus auch platt­form­über­grei­fend funk­tio­nie­ren. Und auch Bar­rie­re­frei­heit und eine gute SEO-Basis sind Auf­ga­ben­be­rei­che, die bei der Frontend-Pro­gram­mie­rung nicht außer Acht gelassen werden dürfen.

Um bei der Ent­wick­lung einer Web­ober­flä­che nicht auch noch komplett bei null beginnen zu müssen, machen viele Pro­gram­mie­rer von UI-Frame­works (User Interface) Gebrauch. Dabei fällt die Wahl häufig auf das von Twitter ent­wor­fe­ne Bootstrap, dessen Be­stand­tei­le für mobile Endgeräte und alle gängigen Browser optimiert sind und pro­blem­los an die eigenen Vor­stel­lun­gen angepasst werden können. Der große Ver­brei­tungs­grad sorgt jedoch auch dafür, dass im Netz viele Websites exis­tie­ren, die mithilfe der Standard-Bootstrap-Codes gebaut sind und sich aus diesem Grund stark ähneln. Ein kleinerer Kri­tik­punkt ist zudem die Kom­ple­xi­tät des Frontend-Frame­works, das auf sehr viel CSS und Ja­va­Script zu­rück­greift und zudem das HTML-Mark-up um­fäng­li­cher macht – was sich u. a. auf die Ladezeit des Web­pro­jekts auswirken kann. Es ist zwar möglich, re­du­zier­te Skript- und CSS-Dateien her­un­ter­zu­la­den, die nur die be­nö­tig­ten Bootstrap-Kom­po­nen­ten enthalten, al­ler­dings muss man sich zu diesem Zweck zunächst in­ten­si­ver mit dem Thema aus­ein­an­der­set­zen. Sim­pli­zi­tät und Zeit­er­spar­nis, die mit der Ver­wen­dung eines Frame­works verknüpft sein sollten, gehen auf diese Weise ein Stück weit verloren. Manchem Ent­wick­ler mag auch einfach allgemein die Nutzung des UI-Frame­works nicht zusagen, weshalb es durchaus sinnvoll ist, den Einsatz von Al­ter­na­ti­ven zu Bootstrap in Betracht zu ziehen – ein Un­ter­fan­gen, das aufgrund der riesigen Auswahl beinahe ebenso schwer ist.

Im Folgenden prä­sen­tie­ren wir Ihnen fünf Frontend-Frame­works, die Sie anstelle von Twitter Bootstrap nutzen können, um ein voll­stän­di­ges und funk­ti­ons­fä­hi­ges Web-Frontend zu ent­wi­ckeln. Wir zeigen Ihnen die je­wei­li­gen Vor- und Nachteile sowie die Un­ter­schie­de zu Bootstrap auf. Darüber hinaus erfahren Sie, welchen Umfang die Code-Samm­lun­gen haben und für welchen Ent­wick­ler­typ sie sich besonders gut eignen. Außerdem be­ant­wor­ten wir die Frage, wie gut das Ent­wi­ckeln mit der je­wei­li­gen Bootstrap-Al­ter­na­ti­ve funk­tio­niert.

Das modular auf­ge­bau­te Foun­da­ti­on-Framework hat seinen Ursprung in einem Style-Guide, den die Webdesign-Agentur ZURB zunächst aus­schließ­lich für Projekte ihrer Kunden ver­wen­de­te. Später kom­bi­nier­te und ver­öf­fent­lich­te ZURB die zahl­rei­chen HTML-, CSS- und Ja­va­Script-Kom­po­nen­ten in dem Open-Source-Framework. Das Herzstück, ein zwölf­spal­ti­ges, flexibles Grid-Layout, er­mög­licht die Ge­stal­tung eines re­spon­si­ven Layouts, das sich au­to­ma­tisch den ver­schie­de­nen Dis­play­grö­ßen und Auf­lö­sun­gen der ver­schie­de­nen Endgeräte anpasst. Neben dem Grid-System bietet Foun­da­ti­on u. a. die folgenden Vorlagen:

• Slider

• Buttons

• Ty­po­gra­fie

• Me­nü­leis­ten und Menüs

• Medien-Container

• in­te­grier­te Float- und Vi­si­bi­li­ty-Klassen

Foun­da­ti­on basiert, wie Bootstrap ab Version 4 auch, auf Sass, einer Style­sheet-Sprache, die das Erstellen und Be­ar­bei­ten der CSS-Dateien erheblich ver­ein­facht – al­ler­dings fehlt dem ZURB-Framework die Un­ter­stüt­zung von Less (ebenfalls eine Style­sheet-Sprache), die Bootstrap bietet. Während sich hin­sicht­lich des Umfangs an Ja­va­Script-Plug-ins und CSS-Snippets kaum Un­ter­schie­de fest­ma­chen lassen, exis­tie­ren für Foun­da­ti­on we­sent­lich weniger Templates, und auch die Un­ter­stüt­zung durch andere Platt­for­men ist deutlich geringer.

Das Framework von ZURB sticht die Twitter-Lösung jedoch deutlich aus, wenn es um die In­di­vi­dua­li­tät ent­wi­ckel­ter Frontends geht: Der zu­grun­de­lie­gen­de CSS-Code gewährt Zugriff auf ein kompaktes Design, das un­kom­pli­ziert nach den eigenen Wünschen angepasst werden kann. Einige Klassen sind – anders als in Bootstrap – direkt ein­ge­bun­den, ohne dass Sie diese zunächst hin­zu­fü­gen müssen. Ein weiterer Vorteil: ZURB bietet ver­schie­de­ne Kurse und per­sön­li­chen Support für Ihr Frontend-Projekt sowie eine spezielle Version des Frame­works zur Ge­stal­tung von E-Mail-News­let­tern an.

Wollen Sie Foun­da­ti­on zur Ent­wick­lung Ihrer Web­ober­flä­che nutzen, können Sie entweder das Komplett-Set oder ein in­di­vi­du­ell zu­sam­men­ge­stell­tes Paket aus den ge­wünsch­ten Kom­po­nen­ten kos­ten­frei auf der of­fi­zi­el­len Website her­un­ter­la­den. Eine de­tail­lier­te­re Be­schrei­bung des ZURB-Frame­works finden Sie in folgendem Ratgeber.

Mitte 2013 ver­öf­fent­lich­te Yahoo mit Pure.CSS eine Ba­sis­struk­tur für die Ent­wick­lung von Web-Frontends, die zu Recht als gute Bootstrap-Al­ter­na­ti­ve gilt, aber auch in Kom­bi­na­ti­on mit dem Twitter-Framework genutzt werden kann. Pure basiert auf der Scalable and Modular Ar­chi­tec­tu­re for CSS, kurz SMACSS, die dafür sorgt, dass wie­der­keh­ren­de Elemente wie Tabellen, Buttons oder Formulare vom Basis-Design (Schrift­art, Layout etc.) getrennt sind und eigene Kon­ven­tio­nen besitzen können. In dem Yahoo-Framework hat daher jedes Modul einen Standard-Klas­sen­na­men mit dem Präfix „pure-“ für die reguläre Ge­stal­tung sowie zu­sätz­li­che Klas­sen­na­men für spe­zi­fi­sche Regeln, die für Sub-Module gelten. Ein Formular, bei dem alles un­ter­ein­an­der steht, binden Sie in Pure.CSS z. B. ein, indem Sie den Standard-Klas­sen­na­men „pure-form“ sowie den Sub-Klas­sen­na­men „pure-form-stacked“ angeben.

Das Frontend-Framework, das in einer re­spon­si­ven und einer nicht­re­spon­si­ven Variante her­un­ter­ge­la­den werden kann, be­inhal­tet folgende sechs Module, die in kom­pri­mier­ter, gezippter Form zusammen gerade einmal eine Größe von rund 4 KB (entpackt 16 KB) besitzen:

• Base (base-min.css): Framework-Basis inklusive Regelwerk

• Grids (grids-re­spon­si­ve-min.css): flexibles, re­spon­si­ves Grid-System

• Forms (forms-min.css/forms-nr-min.css): Formulare

• Buttons (buttons-min.css): ver­schie­de­ne Schalt­flä­chen

• Tables (tables-min.css): Tabellen

• Menus (menus-min.css/menus-nr-min.css): Menüs

Alle Module bauen – wie die Kom­po­nen­ten von Bootstrap und vieler anderer CSS-Frame­works – auf dem Open-Source-Style­sheet Normalize.css auf, das die stan­dard­mä­ßi­gen Stile von HTML-Elementen durch op­ti­mier­te, brow­se­r­ü­ber­grei­fen­de Stile ersetzt. Im Vergleich zum Frontend-Framework von Twitter enthält das Yahoo-Pendant al­ler­dings keinerlei Ja­va­Script-An­wen­dun­gen, auch wenn Sie diese natürlich auf eigene Faust einbinden können. Pure.CSS ist weniger ein fertiges Frontend, das nur an die eigenen Be­dürf­nis­se angepasst werden muss, als vielmehr ein Start­punkt für Ihr Projekt und damit auch mit we­sent­lich größeren Frei­hei­ten verbunden.

Yahoo hostet das Framework auf seinem eigenen, freien Content Delivery Network (Yahoo CDN), sodass Sie es mithilfe eines einfachen Verweises im <head>-Bereich Ihres Projekts einbinden können. Sie können Pure.CSS natürlich auch her­un­ter­la­den und selbst hosten. Den aktuellen Link zum CDN sowie die Download-Dateien finden Sie auf der of­fi­zi­el­len Website purecss.io.

2013 ver­öf­fent­lich­te der Pro­gram­mie­rer Jack Lukic seine Framework-Lösung zur Frontend-Ent­wick­lung unter dem Namen Semantic UI. Der Kernpunkt dieser Code­samm­lung liegt darin, das Schreiben von HTML-Code durch nut­zer­freund­li­che, intuitive Kon­ven­tio­nen zu ver­ein­fa­chen. Zu diesem Zweck enthält Semantic UI über 3.000 se­man­ti­sche CSS-Klassen, die einfach an­zu­wen­den sind und den Ent­wick­lungs­pro­zess op­ti­mie­ren sollen. Während Bootstrap im Ba­sis­pa­ket nur ein einziges Theme enthält, führt Semantic UI über 20 ver­schie­de­ne De­sign­vor­la­gen in der Stan­dard­va­ri­an­te. Auch ansonsten gestaltet sich der Umfang etwas komplexer als bei dem Twitter-Framework: Neben den ele­men­ta­ren CSS- und Ja­va­Script-Dateien enthält das Ba­sis­pa­ket Fonts, den PHP-Pa­ket­ma­na­ger Composer, den Web-Da­tei­ma­na­ger Bower sowie den Ja­va­Script-Task-Runner Gulp.

Die einzelnen Kom­po­nen­ten sind in folgende sechs Bereiche ein­ge­ord­net:

• Globals: Stil-De­fi­ni­tio­nen auf Basis von Normalize.css; Ty­po­gra­fie- und Ge­stal­tungs­grund­la­gen

• Elements: all­ge­mei­ne Frontend-Be­stand­tei­le wie Buttons, Icons, Container u. v. m.

• Coll­ec­tions: struk­tu­rel­le Inhalte wie das Grid-System, Menüs, Tabellen oder Formulare

• Views: in­ter­ak­ti­ve Elemente wie Kom­men­tar­fel­der, Nach­rich­ten-Feeds oder Wer­be­ban­ner

• Modules: Widgets wie Dropdown-Menüs, Pop-up-Fenster oder Check­bo­xen

• Behaviors: Schnitt­stel­len zur Ja­va­Script-Pro­gram­mie­rung

Für Anfänger und Umsteiger ist das Na­mens­sys­tem von Semantic UI zunächst be­fremd­lich und in jedem Fall mit einem hohen Maß an Ein­ar­bei­tung verbunden. Im Endeffekt zahlt sich dieser Aufwand aber aus, denn der HTML-Code Ihres Web-Frontends ist we­sent­lich in­tui­ti­ver zu lesen als bei ver­gleich­ba­ren Frame­works wie Twitter Bootstrap, was ins­be­son­de­re bei späteren Über­ar­bei­tun­gen von Vorteil sein kann. Es gibt Semantic UI außer in der CSS- auch in einer Less-Variante; mitt­ler­wei­le existiert zudem eine Sass-Variante, wodurch das se­man­ti­sche Framework in diesem Punkt mit Bootstrap gleich­ge­zo­gen ist. Ein ent­schei­den­der Nachteil der Bootstrap-Al­ter­na­ti­ve ist die Tatsache, dass viele Kom­po­nen­ten von Ja­va­Script abhängig sind und ohne die Skript­spra­che nicht funk­tio­nie­ren.

Sie können Semantic UI entweder im Down­load­be­reich der of­fi­zi­el­len Homepage her­un­ter­la­den, die Dateien per Verweis auf das Content Delivery Network JSDELIVR einbinden oder auf die einzelnen Code-Snippets im GitHub-Re­po­si­to­ry des Frame­works zugreifen.

Uikit ist die Open-Source-Lösung zur Frontend-Pro­gram­mie­rung der in Hamburg be­hei­ma­te­ten Firma YOOtheme, die eine große Expertise bei der Ent­wick­lung von Web­ap­pli­ka­tio­nen sowie Themes für WordPress, Joomla und den haus­ei­ge­nen Website-Builder YOOtheme Pro vor­zu­wei­sen hat. Die um­fang­rei­che Sammlung aus HTML-, CSS- und Ja­va­Script-Kom­po­nen­ten un­ter­steht der freien MIT-Lizenz und kann daher be­den­ken­los genutzt und verändert werden. Alle CSS-Snippets exis­tie­ren sowohl in einer Less- als auch in einer Sass-Variante, so dass die Anpassung der Style-Vorlagen für geübte Pro­gram­mie­rer er­fri­schend einfach ist. Die über 30 Core-Module der Bootstrap-Al­ter­na­ti­ve bauen wie schon bei den vor­an­ge­gan­ge­nen Ver­tre­tern und dem Framework von Twitter auf Normalize.css auf, weshalb gängige In­ter­net­brow­ser keinerlei Probleme bei der Dar­stel­lung von UIkit-Web­pro­jek­ten haben.

Die Kern­kom­po­nen­ten sind in folgende sechs Ka­te­go­rien un­ter­glie­dert:

• Defaults: Basis für die Nor­ma­li­sie­rung der HTML-Elemente, mit deren Hilfe die Cross-Browser-Fähigkeit rea­li­siert wird, sowie einige grund­sätz­li­che Style-Maximen

• Layout: Werkzeuge zur Ge­stal­tung des Frontends, z. B. das Grid-System, In­halts­bo­xen oder nützliche CSS-Klassen zur Aus­zeich­nung wie­der­keh­ren­der Inhalte

• Na­vi­ga­ti­ons: Alle Elemente, die den Besucher bei der Erkundung Ihrer Web­ober­flä­che un­ter­stüt­zen; u. a. gibt es Module zur Pa­gi­na­ti­on (Sei­ten­num­me­rie­rung) sowie die klas­si­schen Na­vi­ga­ti­ons­leis­ten

• Elements: Stile für in sich ge­schlos­se­ne In­halts­blö­cke wie Tabellen, Auf­lis­tun­gen und Formulare

• Common: Kom­po­nen­ten, die Sie ty­pi­scher­wei­se innerhalb Ihrer Inhalte nutzen, z. B. Buttons, Icons, Badges oder Ani­ma­tio­nen

• Ja­va­Script: Haupt­säch­lich aus Ja­va­Script be­stehen­de Module zur Im­ple­men­tie­rung in­ter­ak­ti­ver Elemente

Um Inhalte für die un­ter­schied­li­chen Dis­play­grö­ßen auf­zu­be­rei­ten, hält UIkit ver­schie­de­ne re­spon­si­ve Klassen bereit. Die zu diesem Zweck bereits vor­de­fi­nier­ten Break­points – z. B. 1.200 Pixel für besonders große Bild­schir­me oder 479 Pixel für kleine Smart­phone-Displays – können Sie mit Hilfe des Online-Cus­to­mi­zers für jedes Theme wunsch­ge­mäß anpassen. Um Kom­pli­ka­tio­nen mit anderen CSS-Snippets bzw. -Frame­works zu vermeiden, sind alle Klassen durch das Präfix „uk-“ ge­kenn­zeich­net. Nicht im Kern-Framework in­te­griert, aber jederzeit optional wählbar sind zu­sätz­li­che CSS- und Ja­va­Script-Elemente, die Sie für die Rea­li­sie­rung kom­ple­xe­rer Web­ober­flä­chen benötigen, wenn diese bei­spiels­wei­se mit einem Ad­mi­nis­tra­tor-Bereich inklusive Log-in, HTML-Editor und Da­tei­upload-Funktion aus­ge­stat­tet sein sollen.

Trotz des be­acht­li­chen Funk­ti­ons­um­fangs fällt die Da­tei­grö­ße der einzelnen Kom­po­nen­ten sowie des gesamten Frame­works über­ra­schend gering aus. Dies wird ergänzt durch eine sehr aus­führ­li­che Do­ku­men­ta­ti­on, die den Einstieg erheblich ver­ein­facht – auch wenn Bootstrap in dieser An­ge­le­gen­heit ebenso die Nase vorn hat wie bei der Theme-Auswahl und dem Angebot an Tutorials. Dennoch exis­tie­ren auch von UIkit bereits rund 1.500 Forks auf GitHub, wo Sie alle Module des Frontend-Frame­works finden und her­un­ter­la­den können. Das Ge­samt­pa­ket gibt es auch zum Download auf der of­fi­zi­el­len Homepage. Al­ler­dings fehlt die Mög­lich­keit, Module im Vorhinein ab­zu­wäh­len, sodass Sie diese erst später im ent­pack­ten Ver­zeich­nis entfernen können.

Ma­te­ria­li­ze ist ein CSS-Framework, das auf den Prin­zi­pi­en des Material Designs basiert, das Google 2015 ein­ge­führt hat und mitt­ler­wei­le in einem Großteil seiner Apps verwendet. Das De­sign­kon­zept baut auf kar­ten­ähn­li­chen Flächen auf, die grafisch zwar prin­zi­pi­ell mi­ni­ma­lis­tisch gestaltet („Flat Design“), aber dennoch mit vielen Ani­ma­tio­nen und Schatten in Szene gesetzt werden. Die auf diese Weise erzeugten Tie­fen­ef­fek­te helfen dem Nutzer der Web­ober­flä­che dabei, wichtige In­for­ma­tio­nen und In­ter­ak­ti­ons­ele­men­te pro­blem­los zu erfassen. Ent­wi­ckelt haben das MIT-li­zen­zier­te UI-Framework Alvin Wang, Alan Chang, Alex Mark und Kevin Louie – vier Studenten der Carnegie Mellon Uni­ver­si­ty in Penn­syl­va­nia.

Die Bootstrap-Al­ter­na­ti­ve, die wie das Twitter-Framework ein 12-spaltiges Grid-System besitzt, enthält diverse CSS- und Ja­va­Script-Kom­po­nen­ten, über 700 of­fi­zi­el­le Material-Design-Symbole in einem Iconfont sowie Roboto, die Stan­dard­schrift­art des Google-De­sign­kon­zepts. Neben den üblichen CSS-Dateien in normaler und mi­ni­mier­ter Variante können Sie, wie bei Bootstrap auch, auf in Sass ge­schrie­be­ne SCSS-Quell­da­tei­en zu­rück­grei­fen, die die in­di­vi­du­el­le Ge­stal­tung Ihrer Web­ober­flä­che ver­ein­fa­chen. Un­ab­hän­gig von der ge­trof­fe­nen Auswahl stehen Ihnen rund 30 Elemente zur Verfügung:

• CSS: Das ele­men­ta­re CSS-Feature ist wie auch bei Bootstrap und den anderen UI-Frame­works das re­spon­si­ve Grid-System. Es liefert Ihnen die Grundlage für eine Web­ober­flä­che, die auf allen Geräten funk­tio­niert. Das Ma­te­ria­li­ze-Grid be­inhal­tet drei vor­de­fi­nier­te Dis­play­grö­ßen – unter 600 Pixel für mobile Geräte, bis 992 Pixel für Tablets und über 992 Pixel für Desktop-PCs. Weitere CSS-Snippets sind eine Farb­pa­let­te, die auf den Grund­far­ben des Material Designs gründet, die bereits erwähnte Schrift­art Roboto und ver­schie­de­ne Klassen, die in Ma­te­ria­li­ze „Helpers“ heißen und Sie bei der Aus­rich­tung von Inhalten un­ter­stüt­zen.

• Com­pon­ents: Com­pon­ents sind die Be­stand­tei­le des Frontend-Frame­works, die Sie für die Rea­li­sie­rung von Na­vi­ga­ti­ons­ele­men­ten und in­ter­ak­ti­ven Bereichen benötigen. Neben typischen Kom­po­nen­ten wie Codes zum Einbinden von Pa­gi­nie­rung, For­mu­la­ren, Na­vi­ga­ti­ons­leis­ten oder Icons finden Sie hier auch einige Module, die von ele­men­ta­rer Bedeutung für die Umsetzung des Material-Design-Konzepts sind. Dazu zählen bei­spiels­wei­se „Cards“ (die für Google typischen Ob­jekt­bo­xen zur Prä­sen­ta­ti­on von Inhalten) oder die sym­bo­li­schen „Chips“, mit denen sich Tags oder Kontakte dar­stel­len lassen.

• Ja­va­Script: In Sachen Ja­va­Script-An­wen­dun­gen zählt Ma­te­ria­li­ze ohne Zweifel zu den besten Bootstrap-Al­ter­na­ti­ven. Egal, ob Sie Bilder in der Karussell-Ansicht anzeigen lassen, in­ter­ak­ti­ve Dia­log­fens­ter hin­zu­fü­gen, Zieh­har­mo­ni­ka-Elemente einbauen oder der Ober­flä­che mit dem Parallax-Effekt Leben ein­hau­chen wollen, haben Sie ent­spre­chen­de Ja­va­Script-Snippets jederzeit griff­be­reit. Das rüstet Sie bestens für die Aufgabe, eine Web­ober­flä­che zu gestalten, die sich sowohl auf mobilen Geräten als auch auf Desktop-PCs durch eine hohe Nut­zer­freund­lich­keit aus­zeich­net.

Die Dateien des Ma­te­ria­li­ze-Projekts können Sie entweder auf GitHub oder auf der Homepage ma­te­ria­li­zec­ss.com her­un­ter­la­den. Dort finden Sie auch die zwei ver­füg­ba­ren Templates „Starter“ und „Parallax“, sowie den Mark-up-Code für den Bezug der Pro­jekt­da­tei­en über das Content Delivery Network cdnjs.

Die vor­ge­stell­ten Al­ter­na­tiv­lö­sun­gen haben für ge­wöhn­lich viel mit dem Twitter-Framework gemeinsam: Die zentrale Kom­po­nen­te ist in allen Fällen ein Grid-System, das sich durch Fle­xi­bi­li­tät aus­zeich­net und einen großen Anteil an der er­folg­rei­chen Rea­li­sie­rung ge­rä­te­über­grei­fen­der Web­ober­flä­chen hat. Die vor­de­fi­nier­ten Mindest- bzw. Ma­xi­mal­ma­ße für die ver­schie­de­nen Dis­play­grö­ßen un­ter­schei­den sich zwar von Framework zu Framework, al­ler­dings haben Sie hierbei als Ent­wick­ler in der Regel große Frei­hei­ten bei der Anpassung. Das gilt nicht nur für Git­ter­net­ze, sondern auch für die übrigen CSS-Elemente, die in einigen Fällen außerdem sehr intuitiv ein­ge­bun­den werden können, was bei Bootstrap nicht immer der Fall ist. Un­ter­schie­de exis­tie­ren außerdem bei den Klas­sen­sys­te­men der Bootstrap-Al­ter­na­ti­ven, wobei ins­be­son­de­re Semantic UI her­aus­sticht. Anstelle typischer CSS-Klassen hat das UI-Framework seinem Namen folgend über 3.000 eigene se­man­ti­sche Klassen in­te­griert, die das Code-Pro­gram­mie­ren noch in­tui­ti­ver machen sollen. Ver­ein­fa­chung beim Codieren gewähren die meisten Samm­lun­gen darüber hinaus durch die Un­ter­stüt­zung der Style­sheet-Sprachen Less und Sass, mit deren Hilfe Sie die Style­sheets Ihres Web­in­ter­faces un­kom­pli­ziert anpassen, bevor Sie diese an­schlie­ßend in das gewohnte CSS-Format umwandeln, damit sie der In­ter­net­brow­ser des Besuchers lesen und richtig in­ter­pre­tie­ren kann. Lediglich Pure.CSS ver­zich­tet auf beide CSS-Prä­pro­zes­so­ren, bietet mit der Scalable and Modular Ar­chi­tec­tu­re for CSS (SMACSS) aber einen in­ter­es­san­ten Ansatz für die Nutzung von CSS. Die ver­schie­de­nen Al­ter­na­ti­ven zu Bootstrap über­zeu­gen auf ganz un­ter­schied­li­chen Ebenen, weshalb es auch nicht möglich ist, eine einzelne zur Kö­nigs­lö­sung für die Frontend-Pro­gram­mie­rung zu de­kla­rie­ren. Machen Sie Ihre Ent­schei­dung daher in erster Linie von den An­sprü­chen Ihres Web­pro­jekts abhängig und stellen Sie sich die folgenden Fragen:

• Sind die Kom­po­nen­ten an­spre­chend struk­tu­riert?

• Bietet das Grid-System die ge­wünsch­ten Optionen?

• Wie wichtig ist die Un­ter­stüt­zung älterer Brow­ser­ver­sio­nen?

• Ent­spricht der Umfang an CSS- und Ja­va­Script-Modulen den An­for­de­run­gen?

• Ist die Größe der Codes (kom­pri­miert und nicht kom­pri­miert) ver­hält­nis­mä­ßig?

• Sind große Frei­hei­ten bei der Anpassung der Codes notwendig und wenn ja, welche Mög­lich­kei­ten offeriert das UI-Framework?

• Legen Sie Wert auf eine große Community (Wei­ter­ent­wick­lung, Er­wei­te­run­gen, Templates, Foren, Tutorials, etc.)?

Wenn Sie zwischen mehreren Bootstrap-Al­ter­na­ti­ven schwanken, ist ein Blick in die Online-Manuals emp­feh­lens­wert. Dort sind die Module oftmals inklusive an­schau­li­cher Code-Beispiele auf­ge­führt. Noch direkter können Sie sich von den Mög­lich­kei­ten der einzelnen Vertreter über­zeu­gen, indem Sie diese selbst aus­pro­bie­ren, wobei das Online-Tool Codeply eine große Hilfe dar­stel­len kann: Dort testen Sie die Kom­po­nen­ten der ver­schie­de­nen UI-Frame­works direkt im Browser, ohne eine einzige Datei her­un­ter­ge­la­den zu haben.