Geavanceerd Bootstrap 3 gebruik

Bootstrap, een geweldig HTML, CSS en JS framework om snel en eenvoudig responsive websites mee te ontwikkelen. Echter hekelen veel mensen tegen het “probleem” dat de HTML “vervuild” wordt met alle classes die nodig zijn voor de styling. Kan dat niet anders?

Bootstrap 3 met LESS

Dat kan zeker anders! Gebruik de LESS bestanden van Bootstrap! LESS moet wél ge-compiled worden naar gewoon CSS, hiervoor zijn tal van plugins te vinden voor populaire systemen als WordPress en Magento, maar nog handiger is Grunt of Gulp! Alleen door LESS te gebruiken ben je er natuurlijk niet, daarvoor zijn er in LESS mixins! In de Bootstrap documentatie zie je op meerdere plekken voorbeelden staan met “Usage as a Mixin” als commentaar erbij. Hiermee kan je classes aan selectors hangen.

Bootstrap classes aan CSS selectors

Wanneer je een afbeelding ronde hoeken wilt geven heeft Bootstrap hier de “img-rounded” class voor, in de documentatie staat dat deze als volgt gebruikt kan worden:

<img src="..." alt="..." class="img-rounded">

Wanneer je alle afbeeldingen op je website ronde hoeken wilt geven, kan dit middels LESS i.c.m. Bootstrap als volgt gedaan worden:

img {
	.img-rounded();
}

Op die manier zijn de classes in de HTML niet nodig!

Bootstrap Grid met mixins

Niet alleen de “eenvoudige” dingen uit Bootstrap kunnen op deze manier gebruikt worden, maar ook bijvoorbeeld het Bootstrap Grid! Een stukje HTML als voorbeeld:

<div class="container">
	<div class="menu"></div>
	<div class="content"></div>
</div>

Wanneer je van de container een row wilt maken en van menu en content een kolom dan kan je dit als volgt doen:

.container {
	.make-row();

	.menu {
		.make-md-column(3);
	}

	.content {
		.make-md-column(9);
	}
}

Een heel mooi voorbeeld waar dit gebruikt wordt is het Magento Boilerplate!