25 neue Tools, Scripte & Frameworks für Webdesigner – Januar 2013
Auch im neuen Jahr möchte ich euch die interessantesten Tools der letzten 30 Tage nicht vorenthalten. Neben spannenden Download-Quellen für Webfont-Icons, findet ihr in der heutigen Zusammenfassung diverse Scripte zum Thema RWD, Polyfills für den Einsatz von CSS3, Scripte zur Performance-Optimierung sowie Drag & Drop-Rastersysteme.
Bookmarklets
HTML Code Sniffer
Mit dem HTML Code Sniffer könnt ihr den Quellcode euer Website sehr detailliert validieren und prüfen. Im Mittelpunkt der Prüfung steht auch eine Validierung nach WCAG 2. Das Tool ist in Form eines Bookmarklets und eines Online-Tools verfügbar.
Frameworks
Grid-A-Licious
Mit dem jQuery-Plugin Grid-A-Licious erstellt ihr Layouts mit fließenden Boxen. Das an Pinterest erinnernde System ist selbstverständlich „fully responsive“.
CSS Horus
CSS Horus ist ein Framework für Adaptive Websites mit umfangreichen Einstellungsmöglichkeiten. Neben Angaben für Tabellen, Buttons, Formulare etc. kann das Framework auch mit LESS verwendet werden.
BASE
Falls euch die Auswahl an „responsive Frameworks“ immer noch nicht ausreichen sollte … auch das Base-Framework bietet eine solide Grundlage für neue Projekte. :)
Online-Tools
PX to EM
Wie der Name bereits andeutet, ist PX to Em ein Tool um Pixel-Werte in EM-Werte umzuwandeln. Ihr könnt entweder eine Umrechnungstabelle verwenden oder den Converter bemühen.
css3base
Arbeitet Ihr CSS-Vorlagen wie normalize.css & Co? Mit css3base könnt ihr euch ein globales Stylesheet aus verschiedenen populären „Resets“ zusammenstellen lassen.
Download-Quellen
icononstr
Auf iconmonstr findet ihr kostenlose Icons im PNG und SVG-Format. Alle Icons sind einfarbig und stark stilisiert bzw. simpel gestaltet.
IcoMoon
IcoMoon ist ein Download-Portal für SVG/Webfont-Icons und eine HTML5-App. Mit dem Online-Tool könnt ihr auch eigene Vektoren in Webfont-Icons umwandeln.
Iconbench
Auf Iconbench könnt ihr einfarbige Icons mit Farben, Verläufen, Effekten, Schlagschatten und Konturen aufwerten. Wenn ihr euch für einen Stil entschieden habt, stellt ihr per Klick ein Icon-Set zusammen und ladet die Icons im PNG-Format herunter.
X-Icon Editor
Der X-Icon Editor ist ein Favicon-Generator der allen Ansprüchen moderner Websites gerecht wird und Icons in allen notwenigen Größen erstellt. Insbesondere für den IE9+ werden hochauflösende Icons erstellt.
Scripte
Socialite.js
Mit Socialite.js könnt ihr Social Sharing Buttons dann laden, wenn sie vom Besucher auch benötigt werden. Um die Performance zu verbessern, könnt ihr das Nachladen an verschiedene Events knüpfen, z.B. an einen Mouse Over oder eine bestimmte Scrolling-Position.
Gridster.js
Mit dem jQuery-Plugin Gridster.js erstellt ihr Drag & Drop Rastersysteme.
FooTable
Das jQuery-Plugin FooTable optimiert HTML-Tabellen für die Nutzung auf kleinen Bildschirmen.
xCharts
Mit xCharts erstellt ihr dynamische und sehr schön gestaltete Diagramme auf Basis von SVG, HTML, CSS und natürlich dem JavaScript selbst.
HeyOffline.js
Mit dem JavaScript (CoffeeScript) HeyOffline.js könnt ihr User über ausgefallene Funktionen eurer Website informieren.
cssParentSelector.js
Mit dem folgenden Script könnt ihr die Vorteile des CSS Parent Selectors der CSS4 Spezifikation bereits heute einsetzen. z.B. E! > F
Response JS
Mit dem jQuery-Plugin Response JS könnt ihr HTML5-Inhalte in bestimmten Media Queries austauschen/nachladen. Nach dem „Mobile-First“-Prinzip, kann eine Website so um Inhalte erweitert werden.
Adapt.js
Mit dem winzigen Script Adapt.js könnt ihr verschiedene externe CSS-Dokumente in Abhängigkeit zum aktiven Media Query laden.
Backstretch
Mit dem jQuery-Plugin Backstretch fügt ihr Hintergründe in eure Website ein, die Grafik passt sich dabei automatisch der Größe des Eltern-Elements an. Auch Slideshows sind möglich. Das Script eignet sich nicht nur für Websites mit großen Foto-Hintergründen, sondern auch für kleine Grafiken im RWD.
carouFredSel
Mit dem Script (jQuery-Plugin) carouFredSel wandelt ihr beliebige HTML-Elemente in responsive Carousels um.
PageSlide
Mit dem jQuery-Plugin PageSlide könnt ihr unkompliziert ein Off-Canvas-Element herstellen.
yepnope.js
Mit Yepnope könnt ihr Scripte, insbesondere Polyfills, nur dann laden, wenn Sie von Besucher auch benötigt werden. In Kombination mit Modernizr nahezu unschlagbar.
Responsive Images
Mit diesem Script könnt ihr optimierte Bildgrößen für unterschiedliche Displays und Auflösungen herstellen.
selectivizr
Mit dem Polyfill selectivizr rüstet ihr CSS3 Pseudoklassen und Attributselektoren für die Internet Explorer 6-8 nach.
Picturefill
Picturefill ist ein Polyfill zur Verwendung des HTML-
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.
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.
Coole Liste an Links :-)
Auch die eigene Suche ist eine gute Idee. Immer weiter so!
Grüße!
WOW! Ich bin begeistert! Klasse für diese Links! Herzlichen Dank für das zusammentragen! Ich lese Deine Feeds immer mit großer Begeisterung! Klasse! Weiter so!
Ganz ehrlich: Ich liebe diese Listen. Super Sache, dass du dir jeden Monat die Arbeit machst ;)