Overslaan en naar de inhoud gaan

Susy 2 layouts

Susy 2 layouts

Sinds een aantal weken ben ik overgestapt van, nu, Susy One naar Susy (2). Susy One was de vorige versie en bestaat nu nog als legacy versie. Versie 2 is anders opgezet en benaderd het bouwen van een gridsysteem op een andere manier. Vandaar dat beide versies nog bestaan. Dit vereiste het nodige uitzoekwerk met het opzetten van grids op deze nieuwe manier.

Zelf een grid opstellen vs. een framework

Wat is het voordeel van het zelf opzetten van een grid systeem ten opzichte van een kant-en-klaar grid van een framework als Bootstrap of Zurb? Het antwoord is heel persoonlijk; wat je fijn vind om mee te werken. Persoonlijk vind ik de controle en de hoeveelheid code die een custom grid met zich mee brengt een groot voordeel. Natuurlijk gaat het niet om megabytes met CSS code, maar hoe minder CSS code hoe overzichtelijker een project. Het nadeel is dat je wel alles zelf moet inschatten en bouwen. Werk je in een team met developers die minder kaas gegeten hebben van een grid of gewoon het project niet helemaal goed snappen en een nieuwe layout nodig hebben, dan kan dit met een zelfbouw grid voor iets meer moeilijkheden zorgen. Bestaande frameworks komen meestal ook met goede documentatie die beschrijft welke classes en mogelijkheden er beschikbaar zijn. En meestal kan je elk mogelijke grid layout wel bouwen daarmee, waar je met zelfbouw alleen ondersteund wat je initieel bedacht hebt.

Designers en grid systemen

Gaan niet samen. Ondanks dat er genoeg mogelijkheden zijn om grids in Photoshop te krijgen of grids te bereken wordt dit, in mijn persoonlijke ervaring, niet volledig ingezet. Als developer wordt je geleerd patronen te herkennen en toe te passen. Hetzelfde geldt ook voor grids in frontend development. Het eerste wat ik altijd doe wanneer ik een design krijg is kijken of er een consistent grid is opgezet dat overal dezelfde verhoudingen en patronen toepast. Voorheen was ik opzoek naar 1 patroon, wat zijn de kolommen en de gutters en zijn die overal hetzelfde. Was dat niet zo, dan moest ik opzoek naar een tussenoplossing. Misschien een beetje smokkelen met een paar pixels. Grids blijven toch vooral een benadering dan een exacte pixelwetenschap. Onlangs ben ik een design tegengekomen met een aantal afwijkende grid configuraties. Soms zelfs meerdere op één pagina. Hoe durven die designers.

Ik meende ook ergens gelezen te hebben dat Susy meerdere grid configuraties ondersteund en dat je verschillende layouts kan definiëren en die dus inzetten. Wat is de beste manier om iets te leren: door het te gebruiken.

Grid layout configuratie

Op papier leek het de heilige graal voor meerdere grid configuraties, zelfs op één pagina. Tijd om grid layout configuraties te onderzoeken.

De basis configuratie komt in de vorm van de variable $susy. In het onderstaande voorbeeld zet ik de debug grid overlay aan zodat ik, tijdens de ontwikkeling, kan zien hoe het grid opgezet is en hoe het zich verhoudt met betrekking tot responsive.

1
2
3
4
5
6
7
8
9
10
11
12
13
$susy: (
  math: fluid,
  debug: (
    image: show-columns,
    output: overlay
  )
);

.container,
.twocolumn,
.threecolumn {
  @include container(940px);
}

In het onderstaande voorbeeld staan twee configuraties geconfigureerd op drie breekpunten. Met column(5 1) kan je aangeven hoe de kolomverhouding is. Hier betekent (5 1) dat de linkerkolom vijf keer zo groot is als de rechterkolom. Deze verhoudingen zijn altijd relatief aan de breedte van de container waar ze in staan. In dit geval dus 940 pixels breed. Concreet betekent dit dus dan links (940/6)*5 = 783.3333 pixels breed is. Rechts dan automatisch (940/6)*1 = 156.6666. Omdat $susy staat ingesteld op fluid, en dus percentages gebruikt in plaats van pixels, zal deze verhouding hetzelfde blijven wanneer de container smaller wordt.

Dan zijn er, volgens mij, verschillende manieren om hierna verder te gaan.

  1. Je kan ervoor kiezen om één configuratie te houden en die mee te laten schalen met de container. Stel je hebt dus een grid van 12 kolommen dan zal deze ook 12 kolommen hebben op smalle schermen. Hetgeen wat je aanpast zijn de spans van de kolommen op verschillende breekpunten. Iets wat op desktop over 3 kolommen gaat zal dan op mobiel over alle 12 gaan bijvoorbeeld. Met deze aanpak heb ik ook gewerkt en werkt niet onprettig.

  2. Je kan er ook voor kiezen om per breekpunt een andere configuratie in te zetten. Deze hebben dan andere kolom verhoudingen afhankelijk van de breedte van het scherm. Het onderstaande stuk Sass code doet dit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$twocolumn-small: (
    columns: (1),
    gutters: 0,
);

$twocolumn-medium: (
    columns: (3 1),
    gutters: 0,
);

$twocolumn-large: (
    columns: (5 1),
    gutters: 0,
);

$threecolumn-small: (
    columns: (1),
    gutters: 20px/300px,
);

$threecolumn-medium: (
    columns: (1 1),
    gutters: 20px/300px,
);

$threecolumn-large: (
    columns: (1 1 1),
    gutters: 20px/300px,
);

Dit resulteerd in de volgende configuraties wanneer je beide containers op één pagina zet. Wat ook de moeite waard is om te noemen is dat naast percentages als breedte, je ook vaste pixel waardes kan opgeven, zoals te zien bij gutters: 20px/300px. Dit betekent een gutter breedte van 20px en kolombreedte van 300px. Dit werkt uiteraard alleen goed wanneer alles bij elkaar opgeteld even breed is als de container.

Desktop

Grid desktop

Tablet

Grid tablet

Mobiel

Grid mobiel

Panel layouts in Drupal

Hoe gebruik je dit dan in een Drupal template? Ik zet daar vooral Panel layouts voor in. Deze geven mij de meeste vrijheid om mijn templates in te delen zodat ik het zo makkelijk mogelijk kan stylen. Het enige nadeel is dat je niet meerdere panel layouts op één pagina kan inzetten. Misschien kan het wel maar weet ik gewoon nog niet hoe (laat me weten @vandijkdavid).

De panels kunnen zo klein zijn als het onderstaande voorbeeld

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <section class="three-column">
    <div class="column w-4-12">
      <?php print $content['content_first']; ?>
    </div>
    <div class="column w-4-12">
      <?php print $content['content_second']; ?>
    </div>
    <div class="column w-4-12 last">
      <?php print $content['content_third']; ?>
    </div>
  </section>
</div>

Conclusie

Wat betreft Drupal zijn er altijd meerdere wegen die naar Rome leiden, sommige zijn wat hobbeliger dan andere maar hebben over het algemeen hetzelfde resultaat. Hetzelfde geldt dus ook voor de aanpak van grids en responsiveness.