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

Für einige Projekte gibt es die Anforderung, exakt auf Grundlage des Bootstrap-Grids zu layouten. Das Gestaltungsraster von Bootstrap 4+ basiert auf fünf Viewportgrößen/Breakpoints mit jeweils 12 Spalten. Wir haben uns eine Vorlage für Adobe XD erstellt, die den schnellen Einstieg ins Projekt vereinfachen soll.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: Adobe XD

Hinweise zur Handhabung des Bootstrap-Templates

Die XD-Vorlage ist anhand der Doku von Bootstrap entstanden. Da Bootstrap mit Prozentwerten für Spaltenbreiten arbeitet, lassen sich nicht alle Werte 1:1 abbilden, da in XD nur mit glatten Pixelwerten gearbeitet werden kann.

Die 12 Spalten von Bootstrap haben wir auf kleinen Viewports reduziert, da sie ansonsten sehr fein werden und unserer Meinung nach das visuelle Gestalten behindern. In den Voreinstellungen der Zeichenfläche kann die Anzahl geändert werden.

Aufbau der XD-Vorlage mit verschiedenen, Mobile First aufgebauten Zeichenflächen

Jeder Viewport ist mobile First aufgebaut. Es sollte also immer die Spannbreite bis zur nächsten Viewportgröße mit Hilfe der Resizing-Funktionen von Adobe XD abgebildet werden.

Informationen zur Handhabung von Adobe XD haben wir hier zusammengefasst. 

Download: Bootstrap-Gestaltungsraster für Adobe XD

Ihr könnt unter folgendem Link eine XD-Datei herunterladen, die inhaltlich folgende Artboards abbildet.

XD-Datei herunterladen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Christian Carl
    schrieb am 15.10.2020 um 16:04 Uhr:

    Hallo Jonas, vielen Dank für deine tolle Seite und die XD-Vorlage. Eine Sache ist mir leider auch jetzt nicht ganz klar.

    Z.B. in der unlimited-Version sind die Abstände vom Viewportrand bis zu den Layout-Spalten unterschiedlich. Rechts 436 und links 430px. Legt man ein Objekt über die gesamte Grid-Breite an, ist es 1134px breit. Dabei sollte die maximale Containerbreite doch 1140px betragen, oder nicht?

    Wendet man links 430 px an, verändert das natürlich andere Parameter, wie Spaltenbreite oder Abstand, da es rein rechnerisch gar nicht funktionieren kann, ein 12er Raster mit 30px Spaltenabstand in einer Gesamtbreite von 1140px anzulegen, zumindest wenn die Spalten einen ganzen Pixelwert haben sollen :)

    Auch bei anderen Viewports unterscheiden sich die Breiten der Layoutraster von der durch Bootstrap vorgegebenen max. Containerbreite.

    Bestimmt bin ich Opfer eines Denkfehlers, vielleicht kannst du mich davon befreien, damit ich pixelgenau gestalten kann :). Danke und viele Grüße, Chris

    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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: