Inventis

LESS is more, toch?
Deze week stond in het teken van LESS, een dynamische techniek om bestaande CSS uit te breiden met variabelen, mixins, functies, … Na de developers meeting waarin Stijn met het idee op de proppen kwam om LESS te gebruiken in nieuwe projecten, ben ik direct begonnen met het opzoeken van documentatie. Variabelen en functies, normaal gezien iets voor een programmeertaal, gebruikt in css moest toch wel handig zijn. En dat was ook zeker het geval, ontwikkelen met LESS heeft zo zijn voor- en nadelen. Voordelen omdat er gebruik gemaakt kan worden van eerder genoemde variabelen, … maar ook nadelen omdat het toch weer een andere manier van denken en werken is.

LESS

LESS of ook wel leaner css is dus een geweldige techniek om in een project te gebruiken. Eens je de verschillende mogelijkheden hebt bekeken, wil je er direct mee aan de slag. Door gebruik te maken van variabelen kan je veel voorkomende waarden (bv. een bepaalde kleurcode) hergebruiken, wat de onderhoudbaarheid van het css document bevordert. De variabelen zijn wel niet zoals we ze kennen uit andere programmeertalen, het zijn eerder constanten. Nog interessanter dan de variabelen zijn de mixins. Met behulp van mixins kan je veel gebruikte eigenschappen (bv. een border) bundelen in een class en deze koppelen aan een ander element of class. Ook kan er gebruik gemaakt worden van functies waarbij met behulp van javascript, gemakkelijk berekeningen en/of aanpassingen gemaakt kunnen worden. Enkele voorbeelden:

Variabelen:

@color: #424242;

h1 {
font-weight: bold;
color: @color;
}


Mixins:

.rounded-corners (@radius: 10px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#button {
.rounded-corners(5px);
height: 30px;
width: 100px;
}


Dit zijn natuurlijk niet de enige mogelijkheden van LESS, de rest kan je bekijken in de documentatie

Is het nu front-end, frontend of front end?

Deze week ben ik ook begonnen aan het volgende luik van mijn stageopdracht, namelijk het opfrissen van de front end van de gestandaardiseerde modules. Na een korte meeting met Stijn en Chris, waarin ik informatie kreeg over de ui library en hoe het er allemaal uit moest zien, ben ik direct begonnen aan de blog module. Hiervan moest de overzichtspagina en de detailpagina onder handen genomen worden. Om deze opdracht tot een goed einde te brengen mocht ik gebruik maken van de Twitter bootstrap, een verzameling “tools” gebruik makend van LESS, die de ontwikkeltijd van een front end kunnen verminderen. Door gebruik te maken van een basis bestaande uit html en css voor typografie, formulier, knoppen, tabellen, grids, navigatie, … kan er gemakkelijk en snel een front end opgezet worden.

Fronteers

Gisterenavond was het tijd voor de Fronteers meeting in Brussel, waarin 2 talks gegegeven werden over CSS3. Lennart Schoors begon met zijn talk “Look ma, no images” waarin hij verschillende voorbeelden liet zien van figuren die gemaakt waren zonder afbeeldingen, enkel door gebruik te maken van CSS eigenschappen. Na de eerste talk was Benjamin De Cock aan de beurt met zijn talk over CSS 3 transitions & animations. Het was mooi om te zien wat er mogelijk was met CSS 3, alleen spijtig dat voor elke “nieuwe” eigenschap nog steeds browser prefixes moesten gebruikt worden, wat de grootte van de codebase niet echt op een positieve manier bevordert.

Volgende week

Een week hier vliegt voorbij, volgende week ga ik verder werken aan de front end van de andere modules en hoop ik even veel bij te leren als deze week! Goed weekend iedereen en tot volgende week!