...
Voor het door ons op te leveren product web applicatie is het belangrijk dat het dashboard makkelijk te bestuderen overzien is en er dus overzichtelijk uitziet. CSS kan hierbij heel goed bij helpen. Met deze reden is het gebruik van een framework hiervan een heel fijn voordeel. In dit onderzoek gaan we opzoek naar de voor ons best mogelijke framework. Wij zullen CSS, wat staat voor Cascading Style Sheets, is een taal wat helpt met het mooi maken en het juist presenteren van je web applicatie. Een CSS-framework zal dit werk een stuk gemakkelijker en sneller maken. Als je dan bedenkt dat bij ons dashboard het duidelijk overzien ervan een groot onderdeel is, dan is een CSS-framework bijna een must. Met deze reden is het gebruik van een framework een heel fijn voordeel. In dit onderzoek gaan we opzoek naar de voor ons best mogelijke framework. Ik zal gaan kijken naar wat wij willen bereiken en zullen ik ga daarop gaan afstemmen. Zo ga ik eerst frameworks die hoe dan ook geen kans maken wegfilteren.
Hoofd- en deelvragen
Dit is onze mijn hoofdvraag:
Welk CSS-framework is het beste te gebruiken voor de gestelde criteria bij de door ons te maken web applicatie?
Om deze vraag te kunnen beantwoorden zullen we dit in kleinere (deel)vragen opsplitsen om zo tot een goed onderbouwd antwoord te komen. De deelvragen zijn als volgt:
- Welke CSS frameworks , die wij mogelijk zouden kunnen gebruiken , bestaan er al?
- Welke criteria zijn voor ons van belang?
- Hoe scoren de verschillende beschikbare frameworks op de door ons opgestelde criteria?
Na het beantwoorden van deze deelvragen hopen wij een duidelijk antwoord te krijgen op onze mijn hoofdvraag.
Welke CSS frameworks die wij
...
zouden kunnen gebruiken bestaan er al?
- Bootstrap
- Bulma
- Skeleton
- Materialize
...
Deze criteria zal helpen het juiste framework te vinden door middel van de plusjes en minnetjes op te tellen. Dit zou er toe leiden dat er een framework uitkomt wat het meest zou kloppen en die het handigst is voor ons projectzou zijn voor onze web applicatatie.
Om ervoor te zorgen dat er een prioriteit wordt gezet op bepaalde criteria ga ik voor elke criteria een weging meegeven:
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!DOCTYPE html>
<html lang="en" class="h-100">
<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>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<link href="cover.css" rel="stylesheet">
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Smalltalk-PROTOTYPE</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Made by Sem.</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et pariatur quaerat voluptas vitae sequi optio nesciunt reprehenderit alias, nostrum magni accusamus, iusto cupiditate. Dolor officia sed, atque est quia dolores.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Smalltalk-PROTOTYPE</p>
</footer>
</div>
</body>
</html> |
...
De homepagina die ik gemaakt met behulp van bootstrap Bootstrap ziet er als volgt uit:
figuur 1: resultaat Bootstrap
Het was fijn om te gebruiken en gemakkelijk te installeren. Het heeft misschien een klein voordeel gehad aangezien ik al eerder gebruik heb gemaakt van bootstrapBootstrap. Ik hoefde niet veel op te zoeken, maar op momenten wanneer ik hulp nodig had was er niet veel tijd voor nodig en ik had mijn perfecte oplossing al gevonden.
...
Op het gebied van documentatie zit het met bootstrap Bootstrap meer dan goed. Om iets te kunnen vinden hoef je alleen maar bootstrap Bootstrap plus de zoekterm van wat je wil weten in te vullen op een zoekmachine en er komen genoeg antwoorden. De complexiteit daarentegen is een ander verhaal. Het is zeker niet de het lastigste framework wat beschikbaar is, maar je hebt zeker even nodig om het in je vingers te krijgen. Ook de leesbaarheid vind ik niet super na het implementeren van bootstrap. Wel Echter is het wel zo dat je het makkelijk kan zien lezen zodra je alle termen kent die in bootstrap gebruikt worden en aangezien . Aangezien wij als groep allemaal wel eens met bootstrap Bootstrap hebben gewerkt is dit geen groot probleem voor ons.
Tijdens het maken van de het prototype ben ik niet vast komen te zitten en heb ik de homepagina redelijk vlot in elkaar gezet. De ervaring had daarbij een grote rol, maar ook het framework zelf. Bootstrap maakt het heel makkelijk om content te plaatsen waar je het wil en maakt het een stuk sneller. Dit zorgde ervoor dat er toch een mooie homepagina kwam te staan in een redelijk korte tijd. Over het onderhouden van bootstrap Bootstrap valt niks slechts over te zeggen. Bootstrap wordt nog steeds geupdate geüpdatet en verbeterd.
Bulma
| 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>Bulma</title>
<link rel="stylesheet" href="./css/bulma-rtl.min.css">
</head>
<body>
<nav class="navbar is-black py-3 pl-6">
<div class="navbar-brand">
<a class="navbar-item">
<span class="is-size-4 has-text-weight-bold">Smalltalk-PROTOTYPE</span>
</a>
</div>
<div class="navbar-menu" id="nav-links">
<div class="navbar-start pr-6">
<a class="navbar-item">My Account</a>
<a class="navbar-item">Contact</a>
</div>
</div>
</nav>
<main class="hero is-fullheight has-background-black-ter">
<div class="container hero-body">
<div class="columns is-centered is-mobile">
<div class="column is-half content is-large has-text-centered">
<h1 class="has-text-white">
Made by Sem.
</h1>
<p class="has-text-grey-lighter">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum tempore ea perspiciatis
nulla, soluta quos voluptas tenetur facere et, quod ipsam obcaecati iure ratione eveniet dolorem
possimus enim, fugiat cumque?
</p>
<button class="button is-light is-large is-outlined is-rounded">
Learn More
</button>
</div>
</div>
</div>
<div class="container hero-footer">
<div class="columns is-centered is-mobile">
<div class="column content">
<p class="has-text-grey-light pt-6 m-6">
Smalltalk-PROTOTYPE
</p>
</div>
</div>
</div>
</main>
</body>
</html> |
...
De homepagina die ik met behulp van Bulma heb gemaakt ziet er zo uit:
figuur 2: resultaat Bulma
Bulma is naast het installeren voor mijn gevoel het makkelijkste framework om te gebruiken. De namen van de klassen spreken voor zich en ik had daarom ook totaal geen moeite om dit framework voor het eerst te gebruiken.
...
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
Skeleton
| Code Blockcode | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!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> |
...
De homepagina die gemaakt is met behulp van het Skeleton framework ziet er als volgt uit:
figuur 3: resultaat Skeleton
Skeleton is een makkelijk te installeren framework, maar daar blijft het ook bij. Naast dat het je makkelijk gemaakt wordt met het horizontaal uitlijnen van content heeft Skeleton heel weinig andere functionaliteiten.
...
De homepagina waar gebruikt is gemaakt van Materialize ziet er als volgt uit:
figuur 4: resultaat Materialize
Materialize is een heel makkelijk te installeren framework en ook het gebruik ervan is niet lastig. Ik had niet veel obstakels naast het veranderen van kleuren en het goed zetten in horizontale richting. Dit duurde even om onder de knie te krijgen maar op site staan voldoende mogelijke heden mogelijkheden om dat op te lossen.
| Code | Criteria | -- | - | -/+ | + | ++ |
|---|---|---|---|---|---|---|
| CR1 | Documentatie | X | ||||
| CR2 | Complexiteit | X | ||||
| CR3 | Leesbaarheid | X | ||||
| CR4 | Prototype | X | ||||
| CR5 | Onderhouden | X |
...
Er is genoeg te vinden om een redelijke website te maken, maar de voorbeelden maken het niet heel veel makkelijker. Het zijn alleen volledige templates die laten zien worden gezien. Kleine onderdeeltjes ontbreken, maar dat vangt de website van Materialize zelf redelijk goed op. De complexiteit valt ook mee, dit . Dit komt omdat het toch wel redelijk makkelijk voor je wordt gemaakt en de tijd wat die je nodig hebt om het te leren is erg laagkort. Wel wordt de leesbaarheid van de code met de regel onleesbaarder. Zolang het een kleine website blijft en geen pagina's met driehonderd regels is het prima te overzien.
De Het maken van het prototype ging redelijk naar behoren en duurde niet heel lang om te maken. Wel was het lastig in het begin om uit te vogelen hoe Materialize werkt. Wanneer ik begon moest ik even rustig kijken naar wat er nou precies gebruikt kon worden. Het onderhouden van de code is daarentegen niet heel best. Laatste De laatste commit met een update is alweer twee jaar geleden.
...
Van de vier gemaakte prototype zijn er, na het maken van de prototype's, twee prototype's die echt tot aanmerking komen om te gebruiken in ons project. De genoemde twee zijn: , namelijk Bootstrap en Bulma. Het scheelde daarom ook heel weinig in de beoordeling die ik heb gegeven voor beide frameworks. Beide hebben ze wel voorzo hun voor- en nadelen. Zo is Bulma heel fijn en makkelijk te gebruiken, maar daar ligt Bootstrap niet heel ver van af en heeft in . Daarnaast heeft Bootstrap, in tegenstelling tot Bulma ongelofelijk veel te vinden op het internet. Daarnaast Ook hebben wij als groep, zoals eerder vermeld, al allemaal gewerkt met Bootstrap. Dit overschaduwt daarom weer het grote voordeel van Bulma, namelijk dat het heel makkeijk te gebruiken is mocht je nog geen tot weinig ervaring hebben met wanneer er nog amper ervaring is met het gebruik van een CSS-framework.
Doordat Bootstrap beter heeft gescoord op de criteria en het voordeel van Bulma overschaduwt, is Bootstrap de juiste keus voor het gebruik van CSS op onze op te leveren websiteweb applicatie.
Literatuurlijst
Bulma: Free, open source, and modern CSS framework based on Flexbox. (z.d.). https://bulma.io/
Documentation - Materialize. (z.d.). https://materializecss.com/
Lawrence, M. (2021, 9 december). What is a CSS Framework? - HTML All The Things. Medium. https://medium.com/html-all-the-things/what-is-a-css-framework-f758ef0b1a11
Otto, M. J. T. (z.d.). Bootstrap. https://getbootstrap.com/
Skeleton: Responsive CSS Boilerplate. (z.d.). http://getskeleton.com/