- Für zarte Hände und mobile Geräte: Touch-Slider Swiper
- MUI: Das Framework für Googles Material Design
- Der Maßstab für Frontend-Entwickler: CSS Ruler
- Raus damit! Slideout.js als Menü für mobile Geräte
- RIN: Ein schlankes SASS-Boilerplate aus Japan
- ai2html: Skript für Illustrator wandelt Vektor-Dateien in HTML um
Tools für Webworker
Für zarte Hände und mobile Geräte: Touch-Slider Swiper
Wischen mit Stil: Swiper (http://www.idangero.us/swiper/) ist der wohl beste Touch-Slider für mobile Geräte. Hardware-Beschleunigung, Lazy-Loading für Bilder und Flexbox-Support sind nur einige wenige Features des kostenlosen JavaScript-Sliders, der Web-Applikationen das gewisse Etwas verleiht. Obwohl für iOS konzipiert, läuft Swiper auch äußerst geschmeidig auf Android- und Windows-Geräten sowie außerdem allen modernen Desktop-Browsern. Swiper ist zwar eine Komponente des Framework7-Frameworks, kann aber dennoch auch unabhängig von dem Framework eingesetzt werden.
MUI: Das Framework für Googles Material Design
Material-Design-Fans aufgepasst: Das HTML-, CSS- und JS-Framework MUI (https://www.muicss.com) folgt Googles Richtlinien, um schnell und einfach das „Material Design“ zu implementieren. Das Framework wurde grundlegend auf Performance optimiert, um eine konsistente und rasche Entwicklung zu gewährleisten. Dabei ist es egal, ob MUI für E-Mail-Templates, Web-Applikationen oder für hybride Apps eingesetzt werden soll. Es werden keine weiteren Abhängigkeiten benötigt, was das Framework noch sympathischer macht. Zudem ist es mit einer Dateigröße von lediglich vier Kilobyte äußerst schlank.
Der Maßstab für Frontend-Entwickler: CSS Ruler
Bei den etlichen Größenangaben in CSS kann man schon mal richtig ins Schwitzen kommen. Wer deshalb schon immer mal CSS-Größenangaben visualisieren wollte, um eine bessere Übersicht zu erhalten, der findet jetzt bei CSS Ruler Abhilfe: Neben Pixeln, EMs und REMs werden noch weitere Größenangaben von CSS unterstützt. Diese können entweder vom Viewport beziehungsweise der Schriftgröße oder von einer absoluten Größe abhängig sein. CSS Ruler (http://katydecorah.com/css-ruler/) zeigt anschaulich alle Variationen in einer interaktiven Testumgebung. 15 Maßeinheiten mit drei Parametern auf einem Blick – das Tool lässt keine Frage unbeantwortet, denn: Bilder sagen mehr als tausend Worte.
Raus damit! Slideout.js als Menü für mobile Geräte
Die geringe Größe von mobilen Geräten zwingt Entwickler zu kreativen Lösungsansätzen, wie beispielsweise zum mittlerweile sehr populären und weit verbreiteten Off-Canvas-Pattern. Das Dependency-freie Skript Slideout.js (https://mango.github.io/slideout/) besticht durch simples Markup und einfache Konfigurationsmöglichkeiten. Mit einer Größe von lediglich vier Kilobyte präsentiert sich das Out-Of-The-Box-Menü inklusive CSS-Transformations und -Transitions. Das Off-Canvas-Menü lässt keine Wünsche offen und ist mit gerade mal zwei ID-Selektoren leicht zu implementieren: Minimalismus und Funktionalität für den optimierenden Entwickler, der das Beste aus seiner mobilen Applikation herausholen will.
RIN: Ein schlankes SASS-Boilerplate aus Japan
Das für Gulp optimierte Boilerplate, welches bereits in der dritten Version veröffentlicht wurde, unterstützt Frontend-Designer durch SCSS-Support, automatischem Browser-Reloading, einem einfachen Grid-System, Retina-Support und einem mitgelieferten BrowserSync-Server. Ergänzt wird das minimalistische Framework durch automatische Optimierung von Gif-, JPG-, PNG-, und SVG-Dateien. Somit ist RIN (https://github.com/sanographix/rin) alles andere als ein überladenes Framework wie Twitters Bootstrap oder Zurbs Foundation.
ai2html: Skript für Illustrator wandelt Vektor-Dateien in HTML um
Nützliches Tool für Illustrator: Mit ai2html (http://ai2html.org/) können Frontend-Entwickler Vektor-Dateien mit einem einfachen Skript in HTML- und CSS-Dateien umwandeln. Dabei werden Texte nicht als SVG gerendert, sondern bleiben als editierbare Zeichen erhalten. Neben sehr vielen Konfigurationsmöglichkeiten wie zum Beispiel Bild-Formate und Qualität, Retina-Auflösungen und PNG-Transparenz ist das Skript eine wertvolle Erweiterung für Illustrator-Nutzer und Entwickler. Obwohl der ausgegebene Code nicht mit dem eines Entwicklers vergleichbar ist, sind die gelieferten Ergebnisse durchaus brauchbar.