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

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.

Was leistet Gridpak?

Die Bedienung von Gridpak ist absolut selbsterklärend. Nachdem ihr die gewünschten Einstellungen am Raster vorgenommen habt und die Breakpoints festgelegt sind könnt ihr euch ein umfangreiches Download-Paket herunterladen. Enthalten sind neben dem generierten Stylesheet auch LESS- und PNG-Grafiken, JavaScript-Files und ein Demo-Ordner.
Die JavaScript-Dateien dienen dazu das Raster während der Entwicklung der Website einzublenden: Mit der Taste G kann das Grid im Browser ein- und ausgeblendet werden.

Vimeo

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren

Video laden

Weiterführende Links

Folgende Links informieren sehr gut zum Thema Gridpak. Insbesondere der Smashing Magazine Artikel gibt interessante Einblicke in das Tool.

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 – 8 Kommentare

  1. Jan Stieler
    schrieb am 14.05.2019 um 18:37 Uhr:

    Ist hier https://github.com/erskinedesign/ed.gridpak noch als Archiv verfügbar.

    Antworten
  2. André
    schrieb am 02.05.2018 um 13:42 Uhr:

    Ich seh grad – http://app.responsify.it/ bietet das Umschalten per Auswahl „Mobile“, Tablet“ und „Desktop“…

    Antworten
  3. André
    schrieb am 02.05.2018 um 13:39 Uhr:

    Anscheinend gibt es die Seite nicht mehr – gibt es aktuell einen Generator, der Ähnliches bietet (inklusive Größenanpassungen per Maus“klick“)?

    Antworten
  4. Die besten meiner geteilten Links auf Twitter im April 2012 | pixelstrol.ch
    schrieb am 16.01.2014 um 20:18 Uhr:

    […] Mithilfe des Blogartikels Gridpack – Responsive Grid Generator auf blog.kulturbanause.de bin ich auf ein neues Tool gestossen. Durch den Generator Gridpack lassen sich eigene Web-Layoutraster generieren, welche sich an verschiedene Bildschirmauflösungen anpassen. […]

    Antworten
  5. Arit
    schrieb am 16.04.2012 um 16:37 Uhr:

    @alex: soweit ich das sehe, kannst du alle werte frei verändern und sowohl px als auch prozentangaben verwenden

    Antworten
  6. Alex
    schrieb am 10.04.2012 um 14:47 Uhr:

    @JoLau: Soweit ich gesehen habe, kann man mit Gridpak nur in 20 Px-Abständen die Grids definieren. Von daher wäre es damit also nicht möglich, ein 978er Grid zu bauen. (Außer ich hab eine versteckte Option nicht nicht gefunden ;-))

    Antworten
  7. JoLau
    schrieb am 03.04.2012 um 17:42 Uhr:

    Danke für den Tipp. Du hattest ja im letzten Artikel das 978.gs empfohlen. Was ist nun besser? Das 978.gs oder gridpak.com?

    Antworten
    • Jonas Hellwig
      schrieb am 03.04.2012 um 19:30 Uhr:

      @JoLau: das kann man so nicht beantworten. Gridpak dient ja dazu selbst ein Raster zu entwickeln. 978Grid nimmt dir das ab indem 5 Raster vordefiniert wurden. Einfacher ist es daher wahrscheinlich mit Letzterem.

      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.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

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 →