Templates, Boilerplates, Frameworks & Co.

Code-Sammlungen in der Übersicht

Immer häufiger greifen Designer auf fertige HTML- und CSS-Komponenten oder Javaskripte als Grundlage für ihre Projekte zurück. Wir haben einige interessante Code-Sammlungen zusammengetragen.

Übersicht: Code-Sammlungen

© Internet Magazin

Immer häufiger greifen Designer auf fertige HTML- und CSS-Komponenten oder Javaskripte als Grundlage für ihre Projekte zurück. Wir haben einige interessante Code-Sammlungen zusammengetragen.

Ob die Verwendung fertiger Code-Bausteine gut oder schlecht ist, darüber lässt sich streiten. Für Bausteine spricht, dass man mit ihrer Hilfe schneller vorwärts kommt. Gute Code-Sammlungen enthalten außerdem besonders weit gereifte und umfangreich getestete Lösungen.

Gegen Fertiglösungen spricht, dass sie häufig mehr Funktionen beinhalten, als das konkrete Projekt benötigt, und die Ladezeit damit unnötig verlängern. Zudem geht beim einfachen Zusammenkopieren fertiger Code-Bausteine unter Umständen das Verständnis dafür verloren, wie etwas funktioniert.

Nach unserer Ansicht überwiegen die Vorteile der auch Templates, Boilerplates oder Frameworks genannten Code-Sammlungen die Nachteile aber bei Weitem, vorausgesetzt, der Einsatz geschieht in Maßen und mit Umsicht. Selbst wenn Sie sich nicht dafür begeistern sollten, so können Sie bestimmt durch etwas Spicken im Code der folgenden Projekte wertvolle Ideen für Ihre eigenen Vorhaben sammeln.

internet, webdesign, html, css, javascript, code

© Internet Magazin

Über einen Webkonfigurator lässt sich der Funktionsumfang von H5BP flexibel an das jeweilige Projekt anpassen.

HTML5 Boilerplate

Das derzeit bekannteste Frontend-Framework ist HTML5 Boilerplate (H5BP). Es vereint eine Reihe erfolgreicher Einzelprojekte und selbstentwickelten Code zu einer Sammlung von Best Practices, die jeder Webentwickler kennen sollte.

Da ist zum Beispiel Normalize.css, das die HTML-Darstellung in verschiedenen Browsern nivelliert. Zu den übrigen Grundbausteinen von H5BP gehört nicht nur jQuery, sondern auch Modernizr. Letzteres rüstet Websites mit zahllosen nützlichen Eigenschaften aus. So kann Modernizr zahlreiche Browserfunktionen testen, zum Beispiel CSS3 Gradients, Border Radius und rgba().

Ratgeber: 80 clevere Freeware-Tools

In Abhängigkeit vom Testergebnis fügt Modernizr dem html-Tag Klassen hinzu, zum Beispiel touch oder no-touch oder lädt passende Polyfills nach. Darüber hinaus enthält H5BP eine Vielzahl interessanter Details, etwa Beispiele für HiDPI Media Queries, CSS zum Formatieren der Hintergrundfarbe ausgewählten oder angetippten Textes, ein auf Geschwindigkeit getrimmtes Google-Analytics-Snippet und so weiter. Dank des via Modernizr geladenen HTML5 Shim funktioniert HTML5 Boilerplate auch in älteren Browsern.

Twitter Bootstrap

Twitters Bootstrap enthält eine umfangreiche Sammlung fertiger Website-Bausteine. Ob Sie nun eine einfache Navigationsleiste brauchen oder ein Dropdown-Menü, Breadcrumbs oder Paginierung - Bootstrap enthält die entsprechenden Komponenten. Hinzu kommen Button-Gruppen, Buttons mit darin enthaltenen Dropdowns, Embleme, Hinweise und Fortschrittsbalken.

Auf dieser Grundlage können Sie rasch einen Prototypen entwickeln oder das Backend einer Webanwendung. Alle Elemente funktionieren bis herunter zum Internet Explorer 7. Wie HTML5 Boilerplate basiert auch Bootstrap auf Normalize.css, so dass sich beide Frameworks mit geringem Aufwand im selben Projekt nutzen lassen.

Normalize.css

Normalize.css versteht sich als der moderne CSS-Reset. Anders als klassische Resets setzt es nicht zuerst alles Aussehen auf Null, um dann das Aussehen von HTML-Elementen von Grund auf neu aufzubauen. Vielmehr setzt Normalize.css auf den vorhandenen Darstellungseigenschaften auf und führt diese zusammen. Klassikern wie

* { margin: 0; padding: 0 }

ist es damit nicht nur beim Umgang mit Formularen haushoch überlegen. Wer noch klassische CSS-Resets einsetzt, sollte sich Normalize.css unbedingt näher ansehen. In der aktuellen Version 2.0.1 wird IE 7 allerdings nicht mehr unterstützt, so dass Sie gegebenenfalls noch auf Version 1.0.1 zurückgreifen müssen. Beide finden Sie unter.

Foundation 3

Responsive Webdesign ermöglicht die optimale Präsentation einer Website unter verschiedenen Auflösungen - vom Smartphone über Tablets und Desktops bis hin zum TV-Gerät. Foundation 3 ist ein auf die Entwicklung entsprechender Websites gerichtetes Gridsystem auf Basis von box-sizing: border-box. Das flexible Gridsystem unterstützt Nesting (korrekte Darstellung von Grid im Grid) und Offsets, also um eine bestimmte Anzahl von Spalten versetzte Spalten.

Ratgeber: Software-Grundausstattung für jeden PC

Auf Geräten mit kleinem Display ordnet Foundation den Inhalt der Spalten automatisch untereinander an, lässt sich aber auch durch Hinzufügen entsprechender Klassen zum HTML-Code zu einer vierspaltigen Darstellung überreden. Der Zugänglichkeit Ihrer Seite kommt zugute, dass es Foundation 3 egal ist, in welcher Reihenfolge Sie die verschiedenen Spalten im Quellcode positionieren.

HTML5 Mobile Boilerplate

HTML5 Mobile Boilerplate ist die auf mobile Endgeräte optimierte Variante von H5BP. Als solche bringt sie zum Beispiel statt jQuery das leichtgewichtigere, aber weitgehend kompatible Zepto.js mit. Modernizr ist in einer auf Smartphones und Tablets optimierten Version enthalten.

Außerdem finden Sie in HTML5 Mobile Boilerplate zahlreiche kleine Kniffe, wie zum Beispiel einen für verschiedene Smartphone-Betriebssysteme optimierten Viewport, verbesserte Schriftendarstellung im mobilen IE und iPhone Web App Meta. Textbereiche wachsen automatisch mit, das Adressfeld wird versteckt. HTML5 Mobile Boilerplate ist gut dokumentiert und enthält sinnvolle Fallbacks für ältere Smartphone-Betriebssysteme.

internet, webdesign, html, css, javascript, code

© Internet Magazin

Sogar Layouttabellen werden von HTML5 Email Boilerplate verwendet - anders geht es in aktuellen Outlook-Versionen nicht.

HTML Email Boilerplate

Seit jedes bessere Smartphone HTML-E-Mails vernünftig darstellt, gehen auch den hartnäckigen Verfechtern von Plain Text langsam die Argumente aus. Wer allerdings glaubt, mit IE 6 schon in jeden Abgrund geblickt zu haben, den HTML und CSS bereithalten, der hat noch keine Vorlage für HTML-E-Mails entwickelt.

Hier haben Sie es nämlich nicht nur mit einer Handvoll leidlich kompatibler Browser zu tun, sondern mit Dutzenden von E-Mail-Clients, die Ihren Code alle unterschiedlich interpretieren. Um so hilfreicher ist das HTML Email Boilerplate, das eine Sammlung funktionierender Techniken beinhaltet.

Kaufberatung: Die beste Sicherheits-Suite

Dazu gehören neben dem optimalen Doctype (XHTML) zum Beispiel auch Conditional Comments (für Outlook ab 2007) und Media Queries (für mobile Endgeräte). Den gesamten Code finden Sie unter htmlemailboilerplate.com.

internet, webdesign, html, css, javascript, code

© Internet Magazin

Das Wordpress-Theme-Framework underscores.me stammt von Automattic, der Firma hinter Wordpress.

underscores.me

Underscores.me ist ein Grundgerüst, aus dem Sie eigene Wordpress-Themes bauen können. Es versteht sich ausdrücklich nicht als Parent Theme, das mit einem Child Theme erweitert werden soll, sondern als Grundlage für eigenständige Designs.

Im Vergleich mit dem Standard-Theme Twenty Twelve und seinen Vorgängern fällt der deutlich abgespeckte, aber wohldokumentierte Code von underscores.me positiv auf. Außerdem ist das Framework ausgestattet mit einem hilfreichen 404, Beispielen für Custom Header, die der Nutzer via WP-Admin verändern kann, Beispielen für Theme- Optionen und so weiter.

Im layouts-Ordner finden Sie gleich fünf verschiedene Beispiellayouts. Nicht alles, was an Beispielen in underscores.me enthalten ist, wird man in jedem Projekt gebrauchen können, aber es ist dennoch ein interessantes Framework.

jQuery Boilerplate

Gerade Einsteiger tun sich schwer dabei, ihr Javascript in jQuery-Plug-ins zu gießen. Diese Aufgabe erleichtert das jQuery Boilerplate. Es enthält fertigen Code, der sicherstellt, dass andere Skripte Ihr Plug-in nicht durch fehlende Semikola oder versehentliches Definieren von undefined behindern. Außerdem zeigt das Boilerplate, wie Sie Standardparameter elegant setzen und Ihr Plug-in vor mehrfacher Instanziierung schützen.

Mehr zum Thema

CSS-Tricks
CSS3 für mobile Geräte

Welche CSS3-Eigenschaften sind besonders für mobile Websites oder Apps geeignet und funktionieren zuverlässig? Wir haben die CSS-Datei von jQuery…
Fritzbox Telefonie
7 Tipps

Die FritzBox bietet Telefoniefunktionen, die vielen Profi-Telefonanlagen in nichts nachstehen. Wir zeigen, wie Sie sie optimal nutzen.
gesetze
Vorsicht Abmahnungen

Man sieht einen lustigen Film im Netz, will ihn Freunden zeigen und klickt auf "Teilen". Doch aufgepasst: Nicht immer ist das erlaubt. Gleiches gilt…
Weblog
Blog selbst erstellen

Wir zeigen, wie Sie gratis Ihren eigenen Blog selbst erstellen. Zum Starten brauchen Sie mit WordPress nicht einmal fünf Minuten.
Den Internetanbieter zu wechseln bringt oft Probleme und Ärger
DSL, Telefon und Co.

DSL, Telefon & Co: Wenn Kunden ihre Telefon-und Internetanbieter wechseln, gibt es oft Probleme. Wir erklären, wie Sie Ärger vermeiden.