23 neue Tools, Scripte und Frameworks für Webdesigner – März 2013

wp-test-icon

Es ist wieder soweit – ich möchte euch einige neue Tools, Scripte und Frameworks vorstellen, über die ich in den vergangenen Wochen gestolpert bin. Diesen Monat sind verschiedene Hilfsmittel für die Arbeit mit Prototypen, Icon-Fonts und WordPress-Themes mit von der Partie. Darüber hinaus Scripte zur Erstellung von Text-Animationen, komfortablen Formularen und Suchfeldern. Viel Spaß beim stöbern.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Frameworks

Responsable

Mit dem CSS/LESS/SCSS-Framework Responsable könnt ihr Prototypen und responsive Websites auf Grundlage einer Reihe vordefinierter Elemente herstellen. Neben einem Baseline-Grid sind beispielsweise Responsive Images auf Basis von jQuery Picture enthalten.

Responsive LESS/SCSS-Framework mit vielen vordefinierten Komponenten
Responsive LESS/SCSS-Framework mit vielen vordefinierten Komponenten

Mueller Grid System

Wenn ihr mit Compass arbeitet ist das responsive/adaptive Framework Mueller sicher einen Blick wert.

Das Grid System Mueller arbeitet auf Basis von Compass
Das Grid System Mueller arbeitet auf Basis von Compass

jFormer

jFormer ist ein auf jQuery basierendes Framework zum Erstellen von komplexen Formularen. Auch eine umfangreiche Validierung des Formulars ist möglich.

Formulare mit jQuery optimieren
Formulare mit jQuery optimieren

Sidetap

Sidetap ist ein Framework für mobile Websites und Applications. Unter anderem lässt sich mit Sidetap eine Off-Canvas-Navigation herstellen.

Off-Canvas und mehr mit Sidetap
Off-Canvas und mehr mit Sidetap

jslibraryboilerplate

Mit Hilfe der jslibraryboilerplate könnt ihr ein eigenes JavaScript-Framework aufsetzen. Genutzt werden kann pures JavaScript, CoffeeScript und TypeScript.

Eine Framework für JavaScript-Frameworks – jslibraryboilerplate
Eine Framework für JavaScript-Frameworks – jslibraryboilerplate

Proto

Mit Proto erstellt ihr schnelle Prototypen auf Basis von SCSS.

Rapid Prototyping mit SCSS dank Proto
Rapid Prototyping mit SCSS dank Proto

Download-Quellen

Genericons

Die Macher von WordPress (Automattic) haben mit "Genericons" ein eigenes Webfont-Icon-Set zur Verfügung gestellt.

Webfont-Icon-Set von den Machern von WordPress
Webfont-Icon-Set von den Machern von WordPress

Scripte

Blokk

Blokk ist ein Webfont für Mockups, Wireframes oder Prototypen. Der Schriftsatz zeigt lediglich Balken anstelle von Zeilen und könnte immer dann helfen, wenn Kunden anfangen Lorem Ipsum Texte zu übersetzen. Zur Beurteilung des Layouts halte ich Blokk für ungeeignet. Die dunklen Textblöcke haben ein viel stärkeres Gewicht als echte Texte das hätten. Der Eindruck entspricht daher nicht dem Endergebnis.

Webfont für Platzhalter-Texte in Mockups und Prototypen
Webfont für Platzhalter-Texte in Mockups und Prototypen

pdf.js

pdf.js ist ein PDF-Viewer auf Basis von JavaScript.

PDFs mit JavaScript darstellen - pdf.js
PDFs mit JavaScript darstellen - pdf.js

cssFx.js

cssFx.js ist ein Polyfill für CSS3-Funktionen in alten und neuen Browsern. Das Script fügt die notwendigen Vendor-Prefixes automatisch ein und ist sehr vergleichbar mit -Prefix-Free.

Polyfill für CSS3 Vendor-Prefixes
Polyfill für CSS3 Vendor-Prefixes

typehead.js

Mit dem jQuery-Plugin typehead.js erstellt ihr eine performante Auto-Vervollständigung für Suchfelder.

Auto-Vervollständigung für Suchfelder
Auto-Vervollständigung für Suchfelder

textillate.js

Mit dem Script textillate.js könnt ihr mit recht geringem Aufwand sehr ansehnliche CSS3 Text-Animationen erstellen.

CSS3-Text-Animationen mit dem Script textillate.js
CSS3-Text-Animationen mit dem Script textillate.js

Leaflet

Mit der JavaScript-Bibliothek Leaflet erstellt ihr interaktive Karten, ohne die Performance auf Smartphones zu sehr zu belasten. Das Script funktioniert in allen populären Browsern (Desktop & Mobile) und kann mit Plugins erweitert werden.

Mobile Karten mit Leaflet
Mobile Karten mit Leaflet

Responsive Measures

Mit dem jQuery-Plugin Responsive Measures berechnet ihr die Schriftgröße einer Website automatisch anhand des Container-Elements.

Responsive Typography mit dem jQuery-Plugin Responsive Measures
Responsive Typography mit dem jQuery-Plugin Responsive Measures

jQuery Timing

Mit jQuery Timing könnt ihr Animationen und zeitabhängige Events jeglicher Art realisieren: Wiederholungen, Timeouts, Verzögerungen etc. lassen sich kinderleicht erstellen.

Wiederholungen, Timeouts und Verzögerungen mit jQuery Timing
Wiederholungen, Timeouts und Verzögerungen mit jQuery Timing

Holder.js

Mit dem Script Holder.js generiert ihr frei gestaltbare Platzhalter-Grafiken, ohne dass eine Internetverbindung notwendig ist. Je nach Projekt kann das ein entscheidender Vorteil gegenüber Diensten wie Placehold.it sein.

Mit Holder.js lassen sich Platzhalter-Grafiken für Websites generieren
Mit Holder.js lassen sich Platzhalter-Grafiken für Websites generieren

Fabric.js

Fabric.js ist eine Javascript-Bibliothek zur Erstellung von HTML-Canvas-Elementen. Enthalten ist auch ein SVG-Converter.

JavaScript-Bibliothek zur Erstellung von Grafiken mit HTML5-Canvas und SVG
JavaScript-Bibliothek zur Erstellung von Grafiken mit HTML5-Canvas und SVG

Online-Tools

Am I Responsive?

Mit dem Online-Tool Am I Responsive? erstellt ihr 4-in-1-Screenshots einer Website. Das Tool dient nicht als Debug-Umgebung, sondern soll dabei helfen schnell ansprechende Screenshots zu generieren.

Screenshot-Tool für Responsive Websites – Am I Responsive?
Screenshot-Tool für Responsive Websites – Am I Responsive?

HSL Color Picker

Mit dem HSL Color Picker steht euch ein umfangreiches Tools zum Auswählen von Farben zur Verfügung. Der Farbwähler kann auch in die eigene Website integriert werden, der Code steht auf GitHub bereit.

Der HSL Color Picker ist Online-Tool und Farbwähler für die eigene Website
Der HSL Color Picker ist Online-Tool und Farbwähler für die eigene Website

Compress PNG

Mit Compress PNG konvertiert ihr (geeignete) Grafiken ins PNG8-Format und verringert die Dateigröße noch einmal erheblich.

Online-Bildkompression mit Compress PNG
Online-Bildkompression mit Compress PNG

Sonstige Quellen

WP Test

WP Test ist ein Set von Test-Inhalten zur Überprüfung eines neuen WordPress-Themes. Nach dem Import stehen in WordPress diverse Artikel, Inhalte, Medien, Kategorien und mehr zur Verfügung. Wenn hier keine Fehldarstellungen mehr erkennbar sind, sollte das Theme weitestgehend kugelsicher sein.

WP Test stellt umfangreiche Test-Inhalte für WordPress-Themes zur Verfügung
WP Test stellt umfangreiche Test-Inhalte für WordPress-Themes zur Verfügung

One Div

Auf One Div findet ihr eine Liste an Icons, die ausschließlich mit CSS realisiert wurden. Jedes Icon verwendet nur ein einziges HTML-Element als Basis.

CSS-Icons mit nur einem HTML-Element
CSS-Icons mit nur einem HTML-Element

Roots Theme

Roots ist ein Blank-Theme für WordPress auf Basis der HTML5 Boilerplate und Bootstrap. Mit Hilfe eines solchen Templates kann die Theme-Entwicklung entscheidend beschleunigt werden.

Blank-Theme für WordPress auf Basis der HTML5 Boilerplate und Bootstrap
Blank-Theme für WordPress auf Basis der HTML5 Boilerplate und Bootstrap

Noch mehr Tools gefällig?

Als Gedankenstütze für mich selbst, habe ich eine Website gebastelt, die alle mir bekannten Tools auflistet. Wenn ihr ein Hilfsmittel für ein bestimmtes Anwendungsgebiet sucht, werden ihr dort sicher schnell fündig.

Screenshot der Website
Screenshot der Website

Die Tools sind verschlagwortet und können am einfachsten über die Suche gefunden werden. Probiert es doch mal aus und sucht nach Responsive Slidshow jQuery, Retina Script oder CSS3 Tooltip.
Die Website ist noch lange nicht fertig. Für Bug-Reports, Anregungen und Hinweise bin ich euch sehr dankbar.

Das Artikelbild dieses Beitrags stammt von WP Test.