Kategorien
Design HTML/CSS

Bootstrap 3: Warp-Geschwindigkeit für CSS-Selektoren und andere Neuerungen

Das bekannte Frontend-Framework Bootstrap, entwickelt im Hause Twitter, ist vor Kurzem in der Version 3.0.0. veröffentlicht worden. Kenner schätzen Bootstrap in der Version 3.0 aufgrund des strikten Mobile-First-Ansatzes und des damit verbundenen „Easy Goings“ bei der Entwicklung für das schier endlose Heer von mobilen Endgeräten, von denen jedes für sich eigene Darstellungsmacken mitbringt.

bootstrap

Die neue Bootstrap-Variante wurde innerhalb von 9 Monaten gestaltet, entwickelt und fertig gestellt. Das minifizierte CSS wurde um mehr als 20% von 127kb auf 97kb reduziert. Die neue Bootstrap-Version kommt außerdem mit einem optimierten Box-Modell sowie einem neuen, spezifischen dreiteiligen Grid-System, welches die entsprechenden Breakpoints für Smartphones, Tablets, Desktops und breite Desktops gleich mitbringt. Bootstrap antizipiert und behebt durch diese 3 Standardklassen, die Breakpoints für „small“ (Smartphones etc.), „medium“ (Tablets, Phablets etc.) und „large“ (Desktops, Extra-large Desktops) setzen, sowie das 12er-Grid das lästige Erstellen von separaten Stylesheets oder zusätzlichen Media Queries.

Die Neuerungen sind dabei so beträchtlich, dass der Sprung der Versionierung – von 2.3.2. auf 3.0.0. – ebenfalls größer ausgefallen ist.

Lässiges Schreiben von Stylesheets mit LESS

Zu den weiteren wichtigen Neuerungen gehört die Integration des CSSFrameworks LESS: Mit LESS wird CSS um Variablen, Mixins, Operationen und Funktionen erweitert; so lässt sich beispielsweise ein hexadezimaler Farbwert wiederverwenden, in dem er in eine Varable wie z.B. @color geschrieben wird – was widerrum wiederholtes Nachschauen des Hex-Wertes sowie weitere kleinere Lästigkeiten erspart und ganz nebenbei noch die Geschwindigkeit erhöht, mit der die gesamte Softwareapplikation kompiliert wird.

Darüber hinaus bietet Bootstrap 3.0 neues Design und ein neues Theme. Die Javascript-Plugins wurden ebenfalls umgeschrieben.

Glyphicon-Fonts auf der Basis einer Schriftfamilie

Ein weiteres, äußerst interessantes Feature sind die Glyphicon Fonts. Sie wurden wieder ins Projekt geholt und die Bilder durch eine Schriftfamilie ausgetauscht, mit insgesamt 40 neuen Glyphen – das erspart viele Lästigkeiten bei der Implementation von Icons, die ganz nebenbei – durch die Verwendung als Schriftfamilie – nahezu beliebig skalierbar sind.

glyphicons

Es wurden einige Komponenten hinzugefügt, beispielsweise die Panels und gruppierten Listen, andere entfernt, wie das Akkordeon – es wurde durch zusammenklappbare Panels ersetzt; auch Untermenüs und einige andere Komponenten wurden entfernt. Viele Klassennamen wurden umgeschrieben und aktualisiert.

Vor der Dokumentation haben die Bootstrap-Entwickler ebenfalls nicht Halt gemacht und diese um einige wichtige Aspekte erweitert. Dazu zählen vertiefende Abhandlungen und nützliche Informationen rund um die Themen Bootstrap-Komponenten, die Browserunterstützung, Lizenzfragen, Barrierefreiheit sowie weitere Aspekte.

Bootstrap 3 macht Schluss mit alten Zöpfen

Die beste Nachricht der Bootstrap-Entwickler ist jedoch zweifellos, dass die Unterstützung für Internet Explorer 7 aufgegeben worden ist. Die Bootstrap-Entwickler folgten ganz den rauhen Gesetzen des Marktes. Da für IE 7 zweifellos eine Oldtimer-Zulassung benötigt wird, muss er nicht mehr zwangsläufig unterstützt werden, mag sich das Entwicklerteam gedacht haben. Firefox 3.6 wird ebenfalls nicht mehr unterstützt; die Unterstützung von IE 8 ist gewährleistet, allerdings muss zur Unterstützung das Javascript-Framework Respond.js eingebunden werden, damit die Media Queries korrekt funktionieren.

Die Navbars und Panels benötigen nun die .navbardefault und .panel-default-Klasse für die jeweilige Standardvariante. Die berühmten Bootstrap-Jumbotrons gehen nun über die volle Breite des Viewports und beinhalten einen weiteren Container.

Ein vollständiger Baukasten für die Entwicklung von Responsive und Mobile Websites

Bootstrap 3 verfolgt den „Responsive“ und „Mobile First“-Ansatz konsequent. Die für die mobile Entwicklung notwendigen Komponenten sind bereits vollständig eingebaut und bedürfen keiner weiteren Stylesheets. So erklärt sich der Erfolg von Bootstrap durch die Fokussierung auf das Notwendige: Minimaler Aufwand bei gleichzeitig bestmöglicher Performance, Reduzierung auf Klassen, die die Breakpoints für automatisch regeln, schlankes CSS durch den Einsatz von Mixins und Variablen via LESS – alles zusammen der ideale Ansatz für ein performantes Frontend-Framework, welches sich auf ideale Art und Weise mit mächtigen Backend-Frameworks und Applikationen verweben lässt.

Natürlich gibt es für die populärsten Content Management Systeme, wie zum Beispiel WordPress und Drupal, bereits Bootstrap-Themes, die ein Layout anhand des Bootstrap-Grids ermöglichen. Der Einsatz von Bootstrap ist leicht verständlich und sehr intuitiv; Beginner in der Web-und Mobileentwicklung werden ebenfalls gut und schnell mit dem Framework zurechtkommen.

Die schnelle Verbreitung und Übernahme von Bootstrap in der Entwicklercommunity bestätigt, dass sich mit Bootstrap sehr gut performante und skalierbare Webapplikationen bauen lassen. Entwickler von Webapplikationen, die mit Ihren Applikationen auch „nach vorn hin“, also auf mobilen Endgeräten eine „bella figura“ machen wollen, sollten dieses Framework in ihren Werkzeugkasten aufnehmen.

(dpe)

Kategorien
Design HTML/CSS Responsive Design

Focal Point: Intelligentes Beschneiden von Bildern in responsivem Webdesign

Responsives Webdesign zielt darauf, dass eine Website dank unterschiedlicher Layouts auf verschieden großen Displays ordentlich dargestellt wird. Bilder werden dabei in der Regel auf eine bestimmte Breite herunterskaliert. Gerade bei detailreichen Darstellungen kann es dann schon mal vorkommen, dass ein Bild schlecht erkennbar erscheint. Das CSS-Framework Focal Point sorgt für ein intelligentes Beschneiden von Bildern ab bestimmten Größen, damit nur ein Ausschnitt des Bildes – der aber dafür größer – angezeigt wird.


Beispiel für die Festlegung des Focal Point

Da sich der inhaltliche Mittelpunkt eines Bildes nicht immer in der tatsächlichen Bildmitte befindet, kann es passieren, dass nach dem Beschneiden eines Bildes ein wichtiger Bildbestandteil außerhalb des Bildes liegt. Mit Focal Point wird ein Bereich definiert, der den inhaltlichen Fokus eines Bildes darstellt und beim Beschneiden des Bildes auf jeden Fall erhalten bleiben soll.

Focal Point festlegen

Das Prinzip von Focal Point ist einfach: Jedes Bild wird in Raster von zwölf mal zwölf Einheiten unterteilt. Per CSS definiert man nun eine Einheit des Rasters als inhaltlichen Mittelpunkt, den Focal Point. Ist beispielsweise auf einem Bild eine Person abgebildet, lässt sich der Kopf dieser Person als Focal Point definieren. Selbst wenn sich diese Person am Bildrand befindet, fällt sie der Bildbeschneidung nicht zum Opfer.

Um den Focal Point festzulegen, weist man dem Bild zwei Klassen zu, welche die horizontale und vertikale Position des Focal Point innerhalb des Rasters angeben. Gezählt wird von der Rastermitte. Es gibt daher je sechs Klassen, die nach oben, unten, rechts und links zählen.

<div class="focal-point left-3 up-2">
 <div>
   <img src="bild.jpg" width="400" height="300" alt="" />
 </div>
</div>

Im Beispiel wird der Focal Point drei Rastereinheiten nach links und zwei nach oben festgelegt. Die Angabe der Klasse „focal-point“ ist ebenso obligatorisch, wie der zusätzliche DIV-Container um das Bild.

Standardmäßig beschneidet das Framework ein Bild, sobald das Browserfenster kleiner als 767 Pixel ist. Dieser Wert kann in der übersichtlichen Stylesheet-Datei aber leicht angepasst werden.

Funktionsweise von Focal Point

Die Funktionsweise ist leicht erklärt: Über die unterschiedlichen CSS-Klassen wird das Bild über negative margin-Werte beschnitten. Als Einheit wird em verwendet. Die besten Ergebnisse werden erzielt, wenn das Bild ein Seitenverhältnis von 4:3 im Querformat hat. Für hochformatige Bilder im Verhältnis 3:4 sollte die zusätzliche Klasse portrait vergeben werden.

Fazit: Focal Point verfolgt einen interessanten Ansatz für eine bessere Darstellung von Bildern bei kleinen Auflösungen. Das Framework besteht zudem nur aus einer einzelnen, dabei sehr übersichtlichen CSS-Datei und ist daher schnell angewendet.

(dpe)

Kategorien
Design HTML/CSS

Centurion – Neues HTML5/CSS3-Framework für Rapid Responsive Prototyping

Und schon wieder ist ein neues HTML5/CSS3-Framework für die beschleunigte Web-Entwicklung erschienen. Wer soll da noch den Überblick behalten? Centurion wirkt auf den ersten Blick wie eine Mischung aus Twitters Bootstrap und dem 960.gs. Entwickler Justin Hough will Centurion mehr als Boilerplate zur schnellen Theme-Entwicklung verstanden wissen. In der Tat ist es für ein ausgewachsenes Framework im Vergleich zu anderen Vertretern zur Zeit noch etwas schmächtig…

Centurion – Framework oder Boilerplate?

Mir persönlich gefällt Houghs Entscheidung, Centurion mit SASS zu entwickeln und auch so zu publizieren. Immerhin ist Centurion in der Form des browser-lesbaren CSS deutlich komplex. Die Verwendung von SASS erlaubt es dem Entwickler, und insbesondere dem, der das Framework nicht selbst erstellt hat, den Überblick zu behalten.

Nach eigenen Angaben entstand Centurion vornehmlich aus dem eigenen Bedarf. Als Front-End-Entwickler und Mitgründer der Webdesign-Schmiede Room 316 Studios benötigt Hough natürlich stets eine solide Basis für die Entwicklung des nächsten Kundenprojekts. Wie Hough in einem Blogpost zum Framework erläutert, brauchte er Jahre, zu erkennen, dass, ungeachtet der schlussendlichen Optik, allen Web-Projekten Gesetzmäßigkeiten und grundlegende Elemente gemeinsam sind. Diese versuchte er für sich zu erarbeiten. Als Ergebnis entstand Centurion.

Centurion ist so angelegt, dass es prinzipiell die Basis eines beliebigen Themes für ein beliebiges CMS oder auch ein reines Frontend sein kann. Mittlerweile trägt Centurion die Versionsnummer 3 und befindet sich weiterhin in reger Entwicklung. Die letzten größeren Änderungen am Projekt datieren aus der Zeit zwischen Weihnachten und Silvester. Offenbar ist Hough, der sich offensiv zu seinem Glauben bekennt, auch hinsichtlich seiner Projekte sehr leidenschaftlich.

Ungeachtet der Bezeichnung als Framework ist Centurion eher als Boilerplate angelegt, dabei aber nicht so limitiert. Ich denke, Hough würde nicht widersprechen, wenn man Centurion irgendwo in der Mitte zwischen den beiden Ansätzen einordnete.

Sollten Sie übrigens trotz hoher Versionsnummer noch nie von Centurion gehört haben, so wundern Sie sich nicht. Die ersten beiden Versionen des Frameworks verwendete Hough ausschließlich für seine eigenen Projekte. Erst mit der aktuellen Version geht er an die Öffentlichkeit und stellt das Projekt unter den Lizenzen GPL und MIT zur kostenlosen Nutzung auch in kommerziellen Projekten zur Verfügung.

Centurion – starke Anleihen bei Bootstrap und 960.gs

Mich erinnert Centurion an zwei Projekte, die ich bereits seit langem kenne. Das Grid von Centurion erinnert nicht nur von der Ausdehnung mit seinen 960 Pixeln, sondern auch hinsichtlich seiner Syntax an 960.gs, welches ich bereits vor vier/fünf Jahren erstmalig zum Einsatz brachte. Das grafiklose Styling grundlegender Bedienelemente, insbesondere der Buttons erinnert stark an Twitters Bootstrap. Auch der grundlegende Klassen-Ansatz lässt an die großen Vorbilder erinnern.

Will man in Centurion ein Grid definieren, das die 12 verfügbaren Spalten in vier gleiche Container trennt, so verwendet man die Syntax class=“grid–3”. In 960.js würde man den identischen Effekt unter Verwendung von class=“grid_3” erzielen. Anders als 960.gs, das auch mit 16 Spalten arbeiten kann, ist Centurion auf das 12 Spalten-Layout begrenzt.

Neben dem Spalten-Layout ist auch das gesamte optische Styling klassen-basiert. So erreicht man diese schicke Tabellenoptik:

Durch das Hinzufügen dieser Klasse zum Table-Element:

Damit der optische Effekt korrekt funktioniert, muss allerdings auf eine semantisch korrekte Auszeichnung der Tabelle geachtet werden, etwas, das nicht jeder Webdesigner, speziell die, die schon sehr lange dabei sind, gewohnt sein wird. So muss das aussehen:

Table Header
Content This is longer content
Table Footer

Centurion – responsiv mit Media Queries

Hough verspricht voll responsives Verhalten bis hinunter zu 320 Pixeln Bildschirmbreite. Setzte er in der ersten Version des Frameworks noch auf JavaScript, um das responsive Verhalten zu gewährleisten, also Stylesheets per JavaScript in Abhängigkeit von der Screen-Größe zu wechseln, verwendet Centurion seit Version 2 konsequent Media Queries. Das Grid verhält sich sogar im ewigen Sorgenkind Internet Explorer responsiv, die meisten übrigen Elemente allerdings nicht. In der Tat gab sogar responsives Design, respektive dessen radikalere Diktion “Mobile First”, überhaupt erst den Denkanstoß, aus dem sich letztlich Centurion entwickelte.

Schlussendlich kann ich zum jetzigen Zeitpunkt nichts negatives zu Centurion sagen, mit Ausnahme der Tatsache, dass derzeit die Dokumentation hauptsächlich aus Lücken besteht. Das sei einem Projekt, dass seit 10 Tagen öffentlich ist, allerdings verziehen. Die wenigen fertigen Teile der Anleitung lassen indes erkennen, dass Hough den Part sehr ernst nimmt. Was da ist, ist gut. Mit Hilfe der Community soll ein “robustes” (Zitat des Entwicklers) Werk daraus werden, das die Verwendung von Centurion nicht gerade zum Kinderspiel, aber doch so leicht wie möglich machen soll.

Links zum Beitrag: