Overslaan en naar de inhoud gaan

Responsive grids met Sass en Susy

Omega, Adaptive Theme en Zen zijn allemaal mooie base themes voor het opzetten van een goed te configureren website. Voor een geoefende frontender is het misschien iets teveel van het goede. Teveel configuratie kan overkill zijn voor een grote website met eigen eisen. Voor die frontender is het beter en leuker om met een goede HTML basis te beginnen en daarmee zelf een grid en Sass-configuratie op te zetten.

Opzetten van een responsive grid met breakpoints

Ik werk het liefst vanuit de mobile first methode. Daarbij zijn je default waardes, de waardes voor het weergeven op de laagste revolutie.

Variabelen

$total-columns: 4

Totaal aantal beschikbare kolommen op de laagste resolutie.

$column-width: 60px

De breedte van een enkele kolom op elke resolutie.

$gutter-width: 16px

De breedte van de gutters tussen de kolommen.

$grid-padding: 16px

De breedte van de padding aan de zijkanten van je container.

$break-large: 12
$break-medium: 8
$break-small: 6

Het minimum aantal kolommen waarop de site nog zichtbaar moet zijn per breekpunt. De namen voor de breekpunten zijn zelf te definieren.

Deze breekpunten zijn daarna op de volgende manier aan te spreken. De volgorde van het aanspreken van de breekpunten is belangrijk. Aangezien de aanpak mobile-first is moet je beginnen met het kleinste breekpunt. De stijlen worden dan van klein naar groot overschreven voor de verschillende breekpunten.

@include at-breakpoint($break-small) { }
@include at-breakpoint($break-medium) { }
@include at-breakpoint($break-large) { }

Opzet

Het beste is om al je grid en responsive gerelateerde scripts in een apart bestand te zetten, bijvoorbeeld _grid.scss. Dit bestand kan je dan importeren in je stylesheet (@import “grid”;). Het beste is om dit wel onderaan te doen. Tenzij je van !important houdt.