kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

10 Kommentare

  1. Roman J

    Verfasst am 22. März 2013 um 9:24 Uhr.

    Vielen Dank für die Zusammenstellung. Habe direkt einige Seiten mit Lesezeichen versehen für später. :-)

  2. Sebastian

    Verfasst am 22. März 2013 um 10:03 Uhr.

    Hey Jonas, danke für die umfangreiche Auflistungl. Sind einige sehr interessante Seiten bei! :)

  3. Daniele De Rosa

    Verfasst am 22. März 2013 um 12:12 Uhr.

    Wie immer eine schöne Zusammmenstellung interessanter Tools!

    Viele Grüße,
    Daniele

  4. Michael

    Verfasst am 22. März 2013 um 22:47 Uhr.

    Gute Liste.. da hast schon mit die Besten gepickt. Bravo!

  5. Sebastian

    Verfasst am 23. März 2013 um 8:31 Uhr.

    Das ist wieder einmal eine tolle Zusammenstellung! Dankeschön!
    Ist eigentlich cssFx so etwas wie ein http://modernizr.com/ ?

  6. Norman

    Verfasst am 25. März 2013 um 18:47 Uhr.

    Hi Jonas, wieder einmal eine klasse Zusammenstellung! Danke Dir. Ich werde bestimmt auf das eine oder andere Tool demnächst mal wieder zurückgreifen. LG, Norman

  7. Mario

    Verfasst am 31. März 2013 um 9:58 Uhr.

    Wie immer eine klasse Auswahl von interessanten Fundstücken. Da kann ich ja wieder mal was durcharbeiten. Dankeschön und weiter so.

    Gruß

    Mario

  8. rené

    Verfasst am 7. Mai 2013 um 13:23 Uhr.

    Ich liebe solche Sammlungen.

    Bei Hongkiat gab’s sowas auch mal eine Zeit lang – leider wurde es scheinbar wieder eingestellt.

    Super, dass es hier weitergeht :)

    VLG

  9. drewjosh

    Verfasst am 23. Juli 2013 um 8:40 Uhr.

    solche Zusammenstellungen sind immer wertvoll! Merci:)

  10. Maykay

    Verfasst am 17. Januar 2017 um 4:36 Uhr.

    Da sind ein paar sehr nützliche Tools dabei. Ich werde mal einige testen und mich wieder zurück elden.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.