Leer Material Design Lite: De Grid

Google's nieuwe front-end ontwikkel framework Material Design Lite (MDL) nader bekeken. MDL heeft standaard een aantal UI componenten om gebruik te kunnen maken van de Material Design guidelines and principles om websites te bouwen. 

In deze serie, gaan we in detail kijken naar de afzonderlijke MDL onderdelen, beginnend met de Grid dat de basis van elke front-end framework vormt. Laten we beginnen!

Aan de slag

Voordat we de Grid, of een van de andere componenten van MDL kunnen gaan gebruiken, moeten we eerst de MDL bibliotheek, de stylesheets en het Javascript toevoegen. Er zijn een aantal manieren waarop we kunnen dit doen, maar het meest eenvoudig is te linken naar de gehoste bestanden in Google CDN. Deze bestanden bevatten het volgende:

• Material Design font icon stylesheet
• Het Material Design standaard lettertype Roboto
• Het hoofd stylesheet
• Het JavaScript bestand

1

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

2

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>

3

<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />

4

<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

Kleuren Schema's

Eenmaal toegevoegd, kunnen we beginnen met het opbouwen van de UI (gebruikers interface) met kleuren zoals gedefinieerd in het hoofd stylesheet. Het hoofd stylesheet heeft de volgende naam: material. {primaire}-{accent}. min.css. De hoofd kleur is hier groen-blauw en rood is de accentkleur. Deze kleuren zijn toegepast op onderdelen zoals de navigatie en de knoppen, maar ze beïnvloeden de Grid niet tenzij je speciale klassen zoals .mdl-kleur--primary en .mdl-kleur--accent  toevoegt.

Je kunt de kleuren combinatie precies zo maken als je wilt door te verwijzen naar de Material Design kleuren specificaties, zoals bijvoorbeeld: material.purple-pink.min.css, material.blue_grey-pink.min.css, and material.blue-orange.min.css.

Maar als je toevoegen van de kleuren combinaties rechtstreeks in het css bestand ongemakkelijk vindt dan kun je ook de Customize tool daarvoor gebruiken. Selecteer de kleuren die je wilt gebruiken en vervang dan de hoofd stylesheet link door die welke door de customize tool gegenereerd wordt.

Het bouwen van de Grid

De Grid, samen met de Navigatie en de Footer, is in MDL onderdeel van het Layout component. De Grid in MDL is gebouwd met behulp van Flexbox waardoor het veelzijdiger is dan de traditionele frameworks die nog steeds floats gebruiken. De Grid bestaat uit kolommen; twaalf kolommen voor "desktop grootte", acht kolommen voor "tablet" formaat (800px en minder), en vier kolommen voor "telefoon" grootte (onder 500px).

Je begint een grid met een lege div. Voeg vervolgens een mdl-grid class toe en eventueel een custom class om later gedefinieerde of aangepaste styles te kunnen veranderen:

1

<div class="content-grid mdl-grid">

2

<!-- grid here -->

3

</div>

Zie de mdl-grid als een equivalent van de row of container class als je eerder met Bootstrap gewerkt hebt. Hier, in plaats van vooraf vastgelegd, laat MDL je vrij om zelf de breedte bepalen. Dat betekent dat je misschien zelf de max-width van de grid zoals jij die nodig hebt zult moeten specificeren:

1

.content-grid {

2

  max-width: 960px;

3

}

De Kolommen

Om de kolommen te bouwen voeg je een of meer div elementen toe (of welk elemenent je ook maar nodig hebt) met een class mdl-cell binnen het mdl-grid element.

1

<div class="content-grid mdl-grid">

2

  <div class="mdl-cell">

3

    <!-- add content here -->

4

  </div>

5

  <div class="mdl-cell">

6

    <!-- also here -->

7

  </div>

8

  <div class="mdl-cell">

9

    <!-- and probably also here -->

10

  </div>

11

</div>

Nu hebben we een grid gebouwd. We hebben drie kolommen toegevoegd. Elke kolom is netjes uitgelijnd en ingesteld op een gelijke breedte van 33.3333333333%. In MDL wordt ervan uitgegaan dat we, in het algemeen, drie kolommen in een rij zullen toevoegen.

Om de standaard ingestelde kolom breedte te negeren moet je een mdl-cell--{nummer}- col class toevoegen met een nummer bereik van 1 tot 12. Voeg deze class toe voor elke div:

Tip: Deze class is een BEM naamruimte voor een Aanpassing. Voor meer details kijk je in de eerdere post Een Introductie in de BEM Methodiek waar Josh Medeski alle ins en outs besproken heeft.

1

<div class="mdl-grid">

2

  <div class="mdl-cell mdl-cell--6-col">

3

    <!-- add content here -->

4

  </div>

5

  <div class="mdl-cell mdl-cell--3-col">

6

    <!-- also here -->

7

  </div>

8

  <div class="mdl-cell mdl-cell--3-col">

9

    <!-- and probably also here -->

10

  </div>

11

</div>

De eerste kolom maken we nu groter.

MDL probeert de  kolommen binnen het beschikbare venster te houden door het formaat van de kolommen op een logische manier te aan te passen. Als je het venster verkleint naar tablet en mobile formaat (probeer het, klik op de icons) dan zul je zien dat de eerste kolom groter blijft. De laatste twee kolommen  zijn nu onderin gestapeld en zijn nog steeds de helft kleiner dan de eerste kolom. 

"Tablet" en "Mobiele" Beeldvensters

Vaak zullen we controle moeten hebben over deze kolom groottes als ze bekeken worden in specifieke vensters. Zoals al gezegd gebruikt MDL standaard 8 kolommen voor de tablet en 4 kolommen voor mobiele beeld vensters. De kolommen moeten zich voegen tot een maximum van respectievelijk 8 en 4 bij het bekijken op tablet en mobiel.

1

<div class="content-grid mdl-grid">

2

  <div class="mdl-cell mdl-cell--6-col mdl-cell--2-col-tablet mdl-cell--2-col-phone">

3

    <!-- add content here -->

4

  </div>

5

  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">

6

    <!-- also here -->

7

  </div>

8

  <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--4-col-phone">

9

    <!-- and probably also here -->

10

  </div>

11

</div>

Uitgaande van het bovenstaande voorbeeld: de eerste kolom zou nu groter moeten zijn dan de eerste gezien op een desktop. De tweede kolom zal groter zijn wanneer bekeken op een tablet. En op een mobiel zullen de eerste twee kolommen zij aan zij met gelijke breedte te zien zijn terwijl de breedte van de laatste kolom wordt aangepast aan de breedte van het bovenliggende (parent) element. 

Hulp Classes

MDL voorziet de Grid van een aantal hulp classes ofwel aanpasbare classes. Hierin ondermeer een set classes om kolommen te verbergen bij bepaalde venster groottes:

• mdl-cell--hide-desktop; verbergt de kolom in desktop grootte, venster groter dan (>840px)
• MDL-cel--hide-tablet; Hiermee verbergt u de kolom in tablet-grootte beeld venster grootte groter dan (> 480px)
• MDL-cel--hide-phone; Hiermee verbergt u de kolom in de mobiele-grootte beeld venster grootte kleiner dan (< 480px)

 Een set hulp klasses voor het uitlijnen van de kolommen:

• MDL-cel--stretch; past zich aan om de kolom te vullen van het bovenliggende element, in dit geval mdl-raster.
• MDL-cel--top; zet de kolom naar de top van het parent element.
• MDL-cel--bottom; Zet de kolom aan de onderkant van het parent element.

Deze classes zijn optioneel, maar zijn er in het geval je ze nodig hebt. Voeg er een of twee toe aan de div kolom, bijvoorbeeld:

1

<div class="content-grid mdl-grid">

2

  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-cell--top">

3

    <!-- add content here -->

4

  </div>

5

  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-cell--hide-tablet">

6

    <!-- also here -->

7

  </div>

8

  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-cell--bottom mdl-cell--hide-phone">

9

    <!-- and probably also here -->

10

  </div>

11

</div>

Dit voorbeeld plaatst de derde kolom aan de bodem van de rij voor desktops, verbergt de tweede kolom op tablets terwijl op mobiel de derde kolom wordt verborgen. Probeer het maar eens uit:

Samenvattend

Het MDL Grid is zorgvuldig gebouwd. Omdat het Flexbox gebruikt in plaats van floats, is het veel makkelijker om de kolommen te uit te lijnen, te plaatsen en te vergroten of verkleinen zonder daarmee de layout of de naastliggende elementen  te verstoren.

Hoewel dit niet vereist is, raad ik je aan om te wennen aan de CSS calc() function, alsmede de BEM methodiek — de structuur die door MDL wordt gebruikt om de klasses te benoemen. Dit zal je helpen om het aanpassen van de grid in de pas te hpuden met de door MDL vooraf gebouwde structuur.

In de volgende tutorial bekijken we een ander MDL component. Tot de volgende keer!