Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 11 Kommentare

  1. Maykay
    schrieb am 17.01.2017 um 04:36 Uhr:

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

    Antworten
  2. drewjosh
    schrieb am 23.07.2013 um 08:40 Uhr:

    solche Zusammenstellungen sind immer wertvoll! Merci:)

    Antworten
  3. rené
    schrieb am 07.05.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

    Antworten
  4. Mario
    schrieb am 31.03.2013 um 09: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

    Antworten
  5. Norman
    schrieb am 25.03.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

    Antworten
  6. galerien mit wp, websiteplanung, ein besserer schreibstil, telekom drossel,und tools für webdesigner | bloggen
    schrieb am 25.03.2013 um 08:11 Uhr:

    […] Jonas Hellweg hat die Weiten des Internets durchforstet und eine interessante Liste mit 23 Scripten, Frameworks und Tools für Webdesigner zusammengestellt. Unbedingt reinschauen und […]

    Antworten
  7. Sebastian
    schrieb am 23.03.2013 um 08:31 Uhr:

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

    Antworten
  8. Michael
    schrieb am 22.03.2013 um 22:47 Uhr:

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

    Antworten
  9. Daniele De Rosa
    schrieb am 22.03.2013 um 12:12 Uhr:

    Wie immer eine schöne Zusammmenstellung interessanter Tools!

    Viele Grüße,
    Daniele

    Antworten
  10. Sebastian
    schrieb am 22.03.2013 um 10:03 Uhr:

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

    Antworten
  11. Roman J
    schrieb am 22.03.2013 um 09:24 Uhr:

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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →