Auteurs:

Naam	Studentnummer
Sem Gerrits	668329

Docenten

Naam	Functie
Helen Visser	Skills begeleider
Mark Giesen	Procesbegeleider

Klas	ITA-OOSE-A
Groepsnaam	Smalltalk
Course	OOSE
Datum	11 Nov 2022
Versie	1.57

Inhoudsopgave

Inleiding

Voor het door ons op te leveren web applicatie is het belangrijk dat het dashboard makkelijk te overzien is. CSS kan hierbij heel goed bij helpen. 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 ik ga daarop gaan afstemmen. Zo ga ik eerst frameworks die hoe dan ook geen kans maken wegfilteren.

Hoofd- en deelvragen

Dit is 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 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 mijn hoofdvraag.

Welke CSS frameworks die wij zouden kunnen gebruiken bestaan er al?

Bootstrap
Bulma
Skeleton
Materialize

Dit is een heel klein deel van de frameworks die er zijn, maar het lijstje zijn de frameworks die het meest interessant eruit zien voor onze doeleinden. Wij willen namelijk onze diagrammen zo snel en goed mogelijk kunnen plaatsen waar wij willen. Dit zijn de vier frameworks die ik heb kunnen vinden waar de gebruikers ervan heel lovend spreken op het gebied van het managen en plaatsen van content.

Welke criteria zijn voor ons van belang?

Om te bepalen welke framework het best bij ons project past is het belangrijk om criteria op te stellen. Deze criteria is in dit geval specifiek voor dit product. Dit zorgt ervoor dat je het juiste framework eruit filtert. De criteria die wij hebben bedacht om het voor ons beste framework te krijgen is:

Code	Criteria	--	-	-/+	+	++
CR1	Documentatie
CR2	Complexiteit
CR3	Leesbaarheid
CR4	Prototype
CR5	Onderhouden

Om de criteria wat duidelijker te krijgen worden ze hieronder uitgelegd:

CR1 Documentatie: hier wordt gekeken naar hoeveel er te vinden is op het internet.
CR2 Complexiteit: hier wordt gekeken naar hoe makkelijk er mee te werken is.
CR3 Leesbaarheid: dit gaat over hoe leesbaar de code is met het gebruik van het framework.
CR4 Prototype: hier test ik hoe fijn het is om mee te werken en het resultaat natuurlijk.
CR5 Onderhouden: dit deel gaat over hoe vaak het framework geüpdatet wordt.

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 die het handigst zou 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:

CR1 - 2x
CR2 - 1x
CR3 - 1x
CR4 - 3x
CR5 - 2x

Hoe scoren de verschillende beschikbare frameworks op de door ons opgestelde criteria?

Om antwoord te krijgen op deze deelvraag ga ik een prototype maken voor elk gekozen framework. Voor ieder framework ga ik een kleine home pagina maken om zo een eerlijk oordeel te kunnen geven.

Bootstrap

<!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">
    <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 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 Bootstrap. 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.

De beoordeling die hieronder staat is daarom ook zeer positief.

Code	Criteria	+	++
CR1	Documentatie		X
CR2	Complexiteit	X
CR3	Leesbaarheid	X
CR4	Prototype		X
CR5	Onderhouden		X

++ = 7
+ = 2
+/- = 0
- = 0
-- = 0

Op het gebied van documentatie zit het met Bootstrap meer dan goed. Om iets te kunnen vinden hoef je alleen maar 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 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. Echter is het wel zo dat je het makkelijk kan lezen zodra je alle termen kent die in bootstrap gebruikt worden. Aangezien wij als groep allemaal wel eens met Bootstrap hebben gewerkt is dit geen probleem voor ons.
Tijdens het maken van 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 valt niks slechts te zeggen. Bootstrap wordt nog steeds geüpdatet en verbeterd.

Bulma

<!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.

De beoordeling voor Bulma is mede daardoor heel positief.

Code	Criteria	+	++
CR1	Documentatie	X
CR2	Complexiteit		X
CR3	Leesbaarheid		X
CR4	Prototype		X
CR5	Onderhouden	X

++ = 5
+ = 4
+/- = 0
- = 0
-- = 0

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.

Skeleton

<!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.

Vandaar dat de beoordeling ook niet heel hoog is.

Code	Criteria	--	-/+	+
CR1	Documentatie	X
CR2	Complexiteit		X
CR3	Leesbaarheid			X
CR4	Prototype	X
CR5	Onderhouden	X

++ = 0
+ = 1
+/- = 1
- = 0
-- = 7

Op het gebied van voorbeelden en stukjes code die kunnen helpen voor Skeleton valt hierover er weinig tot niks te vinden. Dit maakt het heel lastig om er mee te werken. De weinig beschikbare functionaliteiten helpen hier zeker niet aan mee. Hoe complex het is valt dan wel weer mee. Skeleton is namelijk zeer minimaal gemaakt, dus zijn er ook weinig mogelijkheden. De leesbaarheid is daarentegen wel positief. Alles wat er te implementeren bestaat is redelijk makkelijk te lezen. De prototype heb ik ook niet naar behoren kunnen maken, omdat dit te lang duurde. Ik ben gestopt op het moment dat ik vast kwam te zitten en geen antwoord kon vinden op het internet. Skeleton wordt ook niet meer geüpdatet en de laatste update is heel lang geleden. Het onderhouden van het framework is dus ook afwezig.

Materialize

<!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>Materialize</title>

    <link rel="stylesheet" href="/Materialize/css/materialize.css">
    <link rel="stylesheet" href="/Materialize/css/materialize.min.css">
</head>


<body class="grey darken-4">


    <div id="navbar" class="navbar-fixed scrollspy">
        <nav class="grey black">
            <div class="nav-wrapper container">
                <div class="container"> <a href="index.html" class="brand-logo">Smalltalk-PROTOTYPE</a></div>

                <ul class="right side-nav">
                    <li><a href="contactUs.html">Contact Us</a></li>
                    <li><a>My account</a></li>
                </ul>
            </div>
        </nav>
    </div>

    <div id="index-banner" class="container">
        <div class="section no-pad-bot">
            <div class="container valign">
                <br><br>
                <h1 class="header center white-text text-darken-2">Made by Sem.</h1>
                <div class="row center">
                    <h5 class="header col s12 light grey-text text-darken-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid accusamus tempora vero excepturi non tenetur molestias odit ex necessitatibus voluptatem. Hic qui quisquam suscipit, aspernatur perferendis aliquid maxime delectus. Laborum?</h5>
                </div>
                <div class="row center">
                    <button class="waves-effect white black-text btn">Learn more</button>
                </div>
            </div>
        </div>
    </div>

</body>


</html>

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 mogelijkheden om dat op te lossen.

Code	Criteria	-	-/+	+
CR1	Documentatie			X
CR2	Complexiteit			X
CR3	Leesbaarheid		X
CR4	Prototype			X
CR5	Onderhouden	X

++ = 0
+ = 6
+/- = 1
- = 2
-- = 0

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 worden gezien. Kleine onderdeeltjes ontbreken, maar dat vangt de website van Materialize zelf redelijk goed op. De complexiteit valt ook mee. Dit komt omdat het toch wel redelijk makkelijk voor je wordt gemaakt en de tijd die je nodig hebt om het te leren is kort. 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.
Het maken van het prototype ging redelijk naar behoren en duurde niet heel lang. 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. De laatste commit met een update is alweer twee jaar geleden.

Conclusie

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, namelijk Bootstrap en Bulma. Het scheelde weinig in de beoordeling die ik heb gegeven voor beide frameworks. Beide hebben zo hun voor- en nadelen. Zo is Bulma heel fijn en makkelijk te gebruiken, maar daar ligt Bootstrap niet heel ver van af. Daarnaast heeft Bootstrap, in tegenstelling tot Bulma ongelofelijk veel te vinden op het internet. Ook hebben wij als groep, zoals eerder vermeld, al allemaal gewerkt met Bootstrap. Dit overschaduwt daarom het grote voordeel van Bulma, namelijk dat het heel makkeijk te gebruiken is 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 web 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/

Space shortcuts

Page tree

Inhoudsopgave

Inleiding

Hoofd- en deelvragen

Welke CSS frameworks die wij 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?

Bootstrap

Bulma

Skeleton

Materialize

Conclusie

Literatuurlijst

2 Comments

Bram Bakker

Bram Bakker

Space shortcuts

Page tree

Onderzoek CSS-Framework

Inhoudsopgave

Inleiding

Hoofd- en deelvragen

Welke CSS frameworks die wij 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?

Bootstrap

Bulma

Skeleton

Materialize

Conclusie

Literatuurlijst

2 Comments

Bram Bakker

Bram Bakker