Autor: Sven Wolfermann

Native CSS Grid Layouts ohne Framework – ein einfaches Beispiel

Für die nächste Ausgabe des t3n Magazin (Nr. 48) schreibe ich einen Artikel über CSS Grids… hier vorab ein kleiner Ausschnitt daraus.

Eine neue CSS Grid Layout Spezifikation gibt Webworkern nun die Möglichkeit eigene Grids nach den jeweiligen Anforderungen selbst zu definieren. Das ist nicht nur für Seitenlayouts, sondern auch für Modul-Layouts sehr nützlich. Aber zugegeben sind auch sehr viele neue Eigenschaften zu lernen, 17 neue Eigenschaften in Summe.

Native CSS Grid Layouts ohne Framework – ein einfaches Beispiel weiterlesen

Sass Parent Selector – ‚&‘ (ampersand)

Für eine Schulung zum Thema „Sass“ habe ich einige Möglichkeiten zum Einsatz des so genannten „Parent Selector“ zusammen gestellt.

Kurz notiert – was macht der „Parent Selector“?
Der „Parent Selector“ referenziert in einer verschachtelten Regel den Eltern-Selektor und verbindet beim Kompilieren die Knoten zum endgültigen Selektor. Das ‚&‘ Ampersand dient als Platzhalter. Hier ein einfaches Beispiel:

Sass Parent Selector – ‚&‘ (ampersand) weiterlesen

Nützliche PostCSS-Module

Gibt es die überhaupt, wird sich so mancher denken… und die Antwort ist wie immer – it depends™. Natürlich gibt es nützliche PostCSS-Module, die Entwicklern beim Schreiben von CSS unterstützen, für andere passt es eher nicht in den Workflow. Nur weil es das jetzt gibt, heißt es nicht, dass jeder Webworker es gleich einsetzen muss. Dennoch denke ich, dass bei vielen mindestens ein PostCSS-Modul Einzug in den Build-Prozess gefunden hat, nämlich Autoprefixer.

Nützliche PostCSS-Module weiterlesen

Flexbox Fallbacks

Aktuell bekomme ich des Öfteren eine Diskussion über den Einsatz von Flexbox in aktuellen Webprojekten mit. Häufiges Thema ist dabei, dass der IE9 Flexbox nicht unterstützt und aus diesem Grund lieber auf Flexbox verzichtet wird. Ich muss zugeben, dass ich seit mehreren Jahren in Mobile- oder Responsive-Projekten arbeite und dort nur äußerst selten noch IE9- oder IE8-Support benötigt wird. Somit kann ich schon länger fast ausschließlich Flexbox verwenden ohne einen Fallback inkludieren zu müssen. Deswegen kann ich die Diskussion vielleicht nicht so nachvollziehen, da Flexbox mittlerweile zu meinen täglichen Tools zählt. In diesem Blog-Post möchte ich mal ein paar typische Flexbox-Fallback-Möglichkeiten skizzieren.

Flexbox Fallbacks weiterlesen

Responsive Navigation aus UX-Sicht

Optimierte Navigation bei mobilem Webdesign

Eines der komplizierteren Themen im Responsive Webdesign ist unbestritten die Navigation, gerade wenn ein Relaunch bestehender Inhalte geplant ist. Wird auf der vorhandenen Webseite eine umfangreiche Navigation (z. B. „Mega Dropdown“) verwendet, ist eine Anpassung auf kleinere Bildschirme eine herausfordernde Aufgabe. Hier gibt es keine Einheitslösung, es muss eine gut durchdachte Lösung gefunden werden. Beim Responsive Re-Design sollte es immer eine Anpassung von Inhalt (Content Strategy) und Navigationsstruktur geben, auch wenn dies sicherlich schwerfällt.
Responsive Navigation aus UX-Sicht weiterlesen

Assemble – erste Schritte mit dem Static Site Generator für Grunt

Wie bereits im Artikel „Static Site Generators“ geschrieben, habe ich mich letztes Jahr projektbedingt mit Assemble beschäftigt. Assemble ist ein Static Site Generator für Grunt und nutzt Handlebars als Template-Engine.

tl;dr; „Warum ist mir egal, ich will Code sehen” => hier klicken

Mir persönlich nutzt ein Static Site Generator oft bei meinem täglichen Workflow, beim Erstellen von Klickdummys und Templates. Der Vorteil eines „Static Site Generator“ liegt auf der Hand: man nutzt die Dynamik einer Script-Sprache um wiederholende Elemente nicht jedes Mal neu schreiben zu müssen oder Markup mit dynamischen Daten zu vermischen. Man stelle sich vor, man muss bei einer statischen Seite einen Navigationspunkt ändern und das bei vielen Seiten, das ist aufwändig und fehleranfällig.

Assemble – erste Schritte mit dem Static Site Generator für Grunt weiterlesen

Responsive iFrames

Responsive Retrofitting Teil 3

Ein Blogpost der nunmehr 3 Jahre auf Vollendung wartet, ist jetzt endlich fertig :)

Responsive iFrame? Das klingt schon falsch und ist auch ein schwieriges Pflaster. Grundsätzlich können iFrames responsive sein, Voraussetzung ist natürlich, dass sich deren Inhalt ebenfalls responsive verhält. Es ist ja quasi ein Browserfenster im Browserfenster. Doch die Anpassung der Breite ist nicht das Problem, die Anpassung der Höhe macht es kompliziert.

Responsive iFrames weiterlesen

Content Source Order in RWD

Responsive Retrofitting Teil 2

Diese kleine Serie gibt ein paar Beispiele, wie man ein paar knifflige Aufgaben beim „responsive-fähig-machen” einer Desktop-Seite lösen kann.

Wie schon in Teil 1 zum Thema „Responsive Tabellen“, nochmals vorab der Hinweis, dass man bei einer umfangreicheren Seite mit neuer Code-Basis im Mobile-First-Modus starten sollte.

Ein häufiges Problem beim sogenannten „Responsive Retro Fitting”, also bestehende Desktop Webseiten „responsivefähig” zu machen, ist die visuelle Neuordnung von Inhalt, wenn man am bestehenden Markup nichts ändern kann/darf.

Content Source Order in RWD weiterlesen

CSS clip-path

clip-path ist eine neue CSS-Eigenschaft, die wie viele andere CSS3-Eigenschaften ebenfalls den Ursprung in SVG hat. Wie bei shapes-outside kann man clip-path über Pfadfunktionen wie circle(), ellipse(), inset() oder polygon() eine Form zuweisen, die dann das Bild oder den Container in der jeweiligen Form beschneiden. Alles, was außerhalb der definierten Form ist, wird entfernt und der Hintergrund des Elternelements erscheint.

Die alte Eigenschaft clip gibt es zwar schon länger in CSS, wurde jetzt aber überarbeitet spezifiziert. Der aktuelle Einsatz von clip ist sicherlich ein anderer als ursprünglich angedacht. Meist nutzen Webworker clip für barrierefreies Verstecken von Elementen wie <input type="radio" /> um ein Custom-Design zu integrieren und gleichzeitig die Browser-Funktionen zu erhalten. Die HTML-Boilerplate nutzt dies in der .visuallyhidden Definition. CSS clip-path weiterlesen

CSS Shapes – neue Formen braucht das Web

Die Welt ist eine Scheibe und das Web ist eckig… so ungefähr könnte man anfangen um in das Thema einzusteigen. Aber ihr wisst ja, dass es anders ist.

Nachdem wir mit CSS3 schon die Möglichkeit bekommen haben, die Ecken einer Box optisch abzurunden, bleibt natürlich eines offen – der Text bricht nach wie vor an der „geraden” Box-/Bildkante um, dass heißt er orientiert sich z.B. nicht an der Kante von border-radius, erst recht nicht am Inhalt des Bilds. Die eigentliche Box bleibt viereckig. Das ändert CSS-Shapes.

CSS Shapes – neue Formen braucht das Web weiterlesen