Das Responsive Grid System ist eine Zusammenstellung von CSS-Klassen die euch helfen eine Website um ein flexibles Raster zu ergänzen und die Seite somit für Smartphones und Tablets zu optimieren. Das System lässt sich auch noch nach der Gestaltungs- oder Coding-Phase anwenden und zudem muss die Anzahl der Rasterspalten nicht global für die gesamte Seite festgelegt werden. Ein interessanter Ansatz.
Mit dem Online Tool „CSS Gradient Finder“ könnt ihr auf CSS basierende, lineare Farbverläufe auf Grundlage eines Bildes automatisch erstellen lassen.
Per Drag & Drop könnt ihr eine Grafik mit dem entsprechenden Verlauf in das Tool laden, anschließend erhaltet ihr als Ausgabe den entsprechenden CSS-Quellcode inkl. der verschiedenen Vendor-Prefixes für die unterschiedlichen Browser.
Mit dem Online-Tool Responsify.it könnt ihr ein umfangreiches Template als Grundlage für eine responsive Website erstellen. Über die Eingabemaske lassen sich verschiedene Breakpoints sowie die Anzahl der Spalten und der Abstand zwischen den Spalten einstellen. Die Wahl zwischen einem prozent- und einem pixelbasierten Raster habt ihr allerdings nicht, das Raster basiert immer auf flexiblen Spalten (was ja auch die schönere Variante ist).
Mit dem Online-Generator „CSS Arrow Please“ lassen sich Tooltips oder Sprechblasen im Handumdrehen erstellen. Neben Größe und Position des Pfeils kann die Hintergrundfarbe des Basiselements sowie die Stärke und Farbe einer Umrandung eingestellt werden. Der technische Hintergrund solcher CSS-Pfeile ist zwar keinesfalls neu, der Generator erspart jedoch lästige Arbeitsschritte und macht die etwas abstrakte CSS-Technik gleichzeitig leichter verständlich.
Mit Gridpak wurde ein neues, sehr hilfreiches Tool zur Erstellung von flexiblen Gestaltungsrastern veröffentlicht. Gridpak bietet im Gegensatz zu anderen Tools dieser Art keine vordefinierten Raster sondern unterstützt Webdesigner dabei eigene flexible Gestaltungsgrundlagen zu erstellen.
Neben der Gesamtbreite des Rasters, der Anzahl an Spalten, sowie dem Innen- Außenabstand könnt ihr mit Gridpak individuelle Breakpoints festlegen. Diese Breakpoints werden anschließend über CSS3 Media Queries angesprochen.
Hilfsmittel für Responsive- bzw. Multi-Screen-Design schießen ja im Moment wie Pilze aus dem Boden. Ich zeigt euch hier so viele davon weil ich der Meinung bin, dass man nur dann das beste Tool finden kann wenn man auch eine Auswahl hat. Und abgesehen davon sind die Vorlieben und Anforderungen sehr individuell und man muss ganz einfach schauen welches Tool einem persönlich den Workflow am ehesten erleichtert.
Das 978 Grid System bietet ein flexibles Raster mit fünf vordefinierten Breakpoints. Mindestens genauso interessant sind jedoch die Browser-Statistiken die das Entwicklerteam als Grundlage für die sechs Breakpoint zu Rate gezogen hat.
Moderne Websites kommen um den Einsatz von CSS-Sprites nicht mehr herum. Um die Performance einer Seite zu verbessern, gehört die Technologie längst zu den Basics. Leider ist es zeitaufwändig und lästig eine Sprite zu erstellen: Zunächst müssen die gewünschten Grafiken auf der Arbeitsfläche positioniert werden, anschließend werden die Abmessungen und Koordinaten in das CSS-Dokument übernommen.
Spritepad vereinfacht (wie auch andere Tools) die Arbeit mit Sprites. Im Gegensatz zu allen anderen mir bekannten Online-Anwendungen funktioniert jedoch bei Spritepad alles genau so wie man es sich wünscht.
Wer sich mit CSS beschäftigt, muss eine Vielzahl von Begriffen kennen. Es gibt Keywords, Values, Media Queries, Combinators, Attribute-Selectors, Rule-Sets, …
Beitrag zu Ende lesenDas Testen und Debuggen von responsiven Layouts kann trotz moderner Browser-Landschaft und DevTools aufwändig werden. Wir haben seit einiger Zeit …
Beitrag zu Ende lesenWebentwickler nutzen zahlreiche Tools um die Code-Qualität von Websites automatisch zu überprüfen. Neben Validatoren, Lintern und Google Page Speed sind …
Beitrag zu Ende lesenDie Front-End Tooling Umfrage hat ein ziemlich geradliniges Ziel – herauszufinden welche Werkzeuge von Frontend-Entwickler derzeit in unserer Branche eingesetzt werden. …
Beitrag zu Ende lesenDas Firefox-Plugin Firebug ist eines der einflussreichsten und beliebtesten Frontend-Tools der letzten Jahre. Mit der Veröffentlichung 2005 war Firebug das …
Beitrag zu Ende lesenHTML5 Boilerplate ist ein extrem umfangreiche HTML5 Startpaket für die Arbeit mit HTML5-Websites. Allerdings müsst Ihr Boilerplate je nach Bedürfnis …
Beitrag zu Ende lesen