Gestaltungsraster gibt es mittlerweile wie Sand am Meer. Das Besondere am Semantic Grid System ist jedoch, dass es ohne zusätzliche Klassen im HTML Markup auskommt. Dabei setzt es auf den cleveren Einsatz von Selektoren innerhalb des Stylesheets, die mit einem CSS Preprocessor (in diesem Beispiel mit SASS) generiert werden können. In Verbindung mit MediaQueries lassen sich so im handumdrehen flexible, responsive Gestaltungsraster für Mobiles Webdesign aufziehen. weiterlesen

Das Box-Modell von CSS nach W3C Spezifikationen sieht vor, dass sich die tatsächlich gerenderte Breite eines Elementes aus with, border und padding zusammensetzt. Bei elastischen Layouts ist diese Berechnung hinderlich und frustrierend. Wie dies mit box-sizing: border-box deutlich vereinfacht werden kann: hier im Artikel! weiterlesen

Mit der neuen CSS3 Spezifikation ist es mittlerweile möglich, Animationen die früher nur mit JavaScript möglich waren, performancegünstig mit CSS3 umzusetzen. In diesem Artikel geht es um einen kleinen Einstieg in dieses Feature. weiterlesen

Bei sogenannten Fluid-Layouts die sich immer an die aktuelle Browser-Breite anpassen, steht man spätestens beim Einbetten von Videos vor einem Problem.
weiterlesen

Arbeiten mehrere Designer an einem Projekt, wird das CSS Stylesheet oft schnell unübersichtlich. Jeder Designer benutzt seine eigene Logik im Aufbau, Klassenbenennung, Anordnung und Sortierung der verschiedenen Selektoren und Attribute. Deshalb macht es Sinn, sich innerhalb des Teams auf eine Formatierung des CSS zu einigen. Da das Rad aber nicht neu erfunden werden muss, gibt es hier im Artikel einige CSS Style Guides. weiterlesen

CSS3 hat eine Reihe neuer Möglichkeiten eröffnet, Layouts flexibel in allen Browsern darzustellen. Lange schon liegen Hintergründe im Trend, die sich über das gesamte Browserfenster strecken. weiterlesen

Beim Einbinden von Icon Fonts gibt es ein paar Dinge zu beachten, um Browserkompatibilität und Barrierefreiheit zu gewährleisten. weiterlesen

Im vorherigen Artikel sind wir auf die Basics in Sachen Sass bzw. SCSS eingegangen. Heute wollen wir noch etwas tiefer in die Materie einsteigen und ziehen das Tool Compass hinzu. Dieses erweitert den Funktionsumfang von SCSS noch einmal ordentlich, u.a. um die Möglichkeit, automatisch Sprites und das zugehörige CSS generieren zu lassen. weiterlesen