Custom Grids with Singularity GS

Walter Jenner - Form & Code

Überblick

• Was sind Grids? Warum verwendet man Grids?
• Custom grids vs. Ready made grids
• Singularity
• Gestalterisches

Was & Warum?

• Einteilung der Seite in ein oder mehrere Raster
• Gestaltungsrahmen
• Vereinfachte technische Umsetzbarkeit weil begrenztes Set an Positionierungen
• Erleichtert vorallem Responsive-Layouts
  • http://mediaqueri.es

Custom vs ready-made

• Bootstrap = fertiges Grid System
• Custom = flexibel

Singularity GS

• SASS basiert
• liefert Hilfs-Functionen und Mixins
• Erstellen von Custom Grids einfacher

Grober Ablauf

• Breakpoints definieren
• Pro breakpoint Grid definieren (Anzahl Spalten und Platz dazwischen)
• Beispiel
  • Default: 3 Spalten, und jeweils 10px dazwischen
  • Wenn größer 768px: 12 Spalten und jeweils 15px dazwischen
• Einzelnen Elementen eine Spaltenbreite zuweisen
  • Default: 3 (von 3) Spalten breit
  • Wenn größer 768px: 8 (von 12) Spalten breit

Links

• https://github.com/at-import/Singularity/wiki

Gestalterisches zu Grids

• http://alistapart.com/article/content-out-layout
• http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1