Responsify.it – Responsive Grid Template

responsify-logo-icon

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).

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Integrierte Viewport-Testumgebung

Nachdem ihr die Basiseinstellungen vorgenommen habt und verschiedene Breakpoints erstellt wurden könnt ihr das Raster direkt online testen. Über einen Button im Footer der Seite lässt sich der Viewport auf die drei prominentesten Darstellungsgrößen skalieren. Dabei orientiert sich der Viewport an den Abmessungen 480px (iPhone im Querformat), 768px (iPad im Hochformat) und 1200px (Notebook, Desktop etc.).

Viewport-Test im Responsive-Grid-Generator

Download des Templates

Ihr könnt das gesamte Template als Download-Paket herunterladen. Das Paket enthält dann neben einer Grafik mit dem Raster auch eine index.html mit dem Basis-Quellcode und eine CSS-Datei mit den verschiedenen Media Queries. Zusätzlich enthält das Paket SCSS-Dateien und LESS-Dateien.

Der Workflow von Responsify.it