...
Er is meer dan genoeg op de site van Bulma zelf om een mooie website te maken. Toch vond ik het lastig om bij externe websites voorbeelden te vinden. De complexiteit maakt het daarentegen helemaal goed. Bulma is heel erg makkelijk om mee te werken. Het heeft mij heel weinig tijd gekost om erachter te komen hoe ik het best met het framework kon werken. De leesbaarheid is ook een pluspunt doordat de eerder genoemde namen van de klassen perfect kloppen met wat er gebeurd op de website. Zodra je een beetje HTML kennis beheerst zou je in principe zo kunnen zien wat alles doet en wat er gebeurd.
Het maken van het prototype ging daarom ook redelijk vanzelfsprekend. Alles ging naar behoren en op momenten dat ik een kleine vraag had was dit makkelijk op te lossen doordat alles duidelijk en uitgebreid gedocumenteerd is op hun site. Het onderhouden wordt ook nog eens goed gedaan. Zo is er recent nog een update gekomen. Er zit echter wel redelijk wat tijd tussen de updates.
Skeleton
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeleton</title>
<link rel="stylesheet" href="/Skeleton/normalize.css">
<link rel="stylesheet" href="/Skeleton/skeleton.css">
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div class="container">
<div class="row">
<div class="one-third column">
<h2>
<strong>Smalltalk-PROTOTYPE</strong>
</h2>
</div>
<div class="one-third column">
<h3>My account</h3>
</div>
<div class="one-third column">
<h3>Contact</h3>
</div>
</div>
</div>
</nav>
<div class="section values">
<div class="container">
<div class="row">
<div class="one-fourth column offset-by-three">
<h1>
<strong>
Made by Sem.
</strong>
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ipsam veniam earum, accusamus ab impedit perferendis nulla vitae saepe iste optio laudantium numquam! Modi at exercitationem id sapiente ea esse.
</p>
</div>
</div>
</div>
</div>
</body>
</html> |
...