Bootstrap: snel ontwikkelen met een CSS Library
Hier wordt uitgebreid kennis gemaakt met Bootstrap. Dit doen we op op een manier, die goed bij developers past. Je zult zien dat we al een hele opmaak responsive kunnen realiseren zonder ook maar 1 regel CSS te schrijven.
- We kiezen ervoor om met npm en de Command Line tool te werken;
- We gebruiken de CLI ook om het werk op GitHub te plaatsen;
- Bootstrap wordt pas op het eind met Sass aangepast.
Leerdoelen
- kennismaken met Bootstrap:
- installatie;
- documentatie;
- lay-out: opmaken van responsive kolommen;
- enkele componenten:
- navigatiebalk;
- jumbotron;
- modale vensters;
- cards
- voor- en nadelen van Bootstrap kennen;
- werken met npm;
- werken met CLI voor GitHub;
- werken met Sass om Bootstrap aan te passen/af te slanken.
Opdracht
- Download van https://github.com/Theo-denBlanken/LOTR het startdocument of maak een vergelijkbare pagina.
- Volg eerst onderstaande instructievideos om het resultaat te krijgen zoals in de video hiernaast.
- Voeg daarna een eigen component van Bootstrap toe!
- Ga vervolgens Bootstrap aanpassen aan het onderwerp Lord of the Rings.
Site met Bootstrap 1: Bootstrap koppelen aan het document
Uitgaande van een document op https://github.com/Theo-denBlanken/LOTR gaan we Bootstrap installeren. Als Node.js is geïnstalleerd kan dat via npm. (Anders zijn er nog verschillende andere manieren zoals rechtstreekse downloads en CDN.) Voor npm starten we de Terminal (windows: command prompt) en navigeren met cd naar de projectmap.
Met npm init initialiseren we node package manager. Daarvoor worden er een aantal vragen beantwoord. Als we ook een repository van ons project op GitHub willen, kunnen we de url daarvan ook opgeven. Mocht je hier een fout maken, dan kun je hem in de editor nog herstellen.
Hierna geven we met npm install bootstrap voor de Bootstrap installatie. Hierna blijkt een map node_modules te zijn aangemaakt alsook package-lock.json en is package.json te zijn aangevuld met de bootstrap dependency.
We kunnen bootstrap.css of een minified versie daarvan koppelen aan ons document een test van het document laat zien dat er een ander font is, en de knoppen en input hebben al een andere vorm.
Site met Bootstrap 2: responsive grid van Bootstrap
Alle lay-out met Bootstrap begint met de content in een element (vaak een div) te plaatsen. Bootstrap noemt dit de container-div en hij krijgt dan ook de class container of de class container-fluid mee. Het element krijgt daarmee wat padding.
Wil je kolommen naast elkaar zetten, dan omvat je ze eerst met een div met de class row.
Vervolgens geef je de elementen zelf de class col.
Bootstrap heeft een 12-koloms grid. Het is daarmee goed deelbaar door 2, 3 en 4. Je vertelt van elke kolom hoeveel delen van die 12 hij gaat omspannen. Dus als er 2 kolommen naast elkaar moeten, geef je ze allebei de class col-6.
In onze pagina willen we bij kleine viewports 2 kolommen en met grote viewports 4 kolommen.
We gaan de class van de kolommen dus extra informatie geven. Voor kleine viewports wordt col-6 uitgebreid naar col-sm-6. Daarmee geldt de dit dus voor kleine viewports.
Door de class uit te breiden naar col-sm-6 col-md-3 voeg je dus en breakpoint toe voor gemiddelde viewports waarbij er dan 4 kolommen naast elkaar kunnen.
Documentatie: https://getbootstrap.com/docs/4.3/layout/grid/#mix-and-match.
Site met Bootstrap 3: padding in Bootstrap
Om wat meer ruimte tussen de inhoud van de sections te maken geven we met de class p-4 extra padding aan die sections.
Om aan de randen ook diezelfde ruimte te hebben, geven we het row-element ook die padding.
Site met Bootstrap 4: Jumbotron
Om de header meer te benadrukken, geven hem de class jumbotron mee.
Documentatie: https://getbootstrap.com/docs/4.3/components/jumbotron/
Daarbinnen weer een container-fluid om gelijke afstand tot de rand te maken als de elementen daaronder.
Met de display-4 class kan een kop 1 nog groter en lichter worden (https://getbootstrap.com/docs/4.3/content/typography/).
De eerste paragraaf wordt iets groter met de class lead.
Site met Bootstrap 5: navigatiebalk
Een andere component van Bootstrap is de navbar: de navigatiebalk. Documentatie: https://getbootstrap.com/docs/4.3/components/navbar/
Deze bestaat uit een dusdanig aantal elementen met classes, dat het praktischer is deze in zijn geheel te kopiëren en de links daarin te vervangen door je eigen linkjes.
Een deel daarvan zijn interne links naar delen van de pagina.
Met enkele classes kan het ook een andere kleurschema krijgen: https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes.
Voor de dropdown en de menu-toggle is JavaScript nodig. Deze wordt gekoppeld vanuit de node_modules-map.
Het script blijkt echter afhankelijk van jQuery. Via npm install jquery wordt deze gedownload, en moet het worden gekoppeld vóór het script van Bootstrap.
Site (met Bootstrap): Git met CLI
Nu we toch met de commandline werken, kunnen we met de instructies op GitHub ons werk in een repository plaatsen en updaten.
We kunnen lokaal ons README.md maken en ook een .gitignore-bestand.
Dit laatste bestand geeft de bestanden aan, die niet meegenomen moeten worden als we alles online plaatsen. Normaliter hoort daar de node_modules map bij, maar dan moeten de JavaScript bestanden ook naar 1 bestand gecompileerd worden en dat gebeurt in deze training nog niet. In onze .gitignore komt een verborgen bestand te staan die gemaakt en gebruikt wordt door de Finder van MacOS: .DS_Store
Windows- gebruikers zouden de eerste 5 regels kunnen nemen die staat op: https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
Git zou op je systeem geïnstalleerd moeten staan, controleer met git --version of dit het geval is, anders naar https://git-scm.com/downloads Na deze voorbereidingen git initialiseren met git init. Dit staat ook op de instructie van jouw repo.
Er is een verborgen map .git gemaakt en deze zal niet meegenomen worden naar GitHub.
De README.md hoeft niet aangemaakt, met de editor kun je hem wellicht aanpassen.
Voor beginners is het niet handig dit met CLI te doen.
Vervolgens de mee te nemen bestanden voor de commit op de stage plaatsen.
Dit kan met git add -A. Alle bestanden die niet in de .gitignore en .git staan, worden toegevoegd.
Met git status, kun je nog zien welke dat zijn.
De commit is een punt die in het versiebeheersysteem van Git een punt markeert met de toestand van de bestanden. Je geeft er dus een opmerking bij:
git commit -m "de opmerking" Met git remote maak je Git duidelijk dat je jouw lokale repository verbind met die van bijvoorbeeld GitHub:
git remote add origin https://github.com/Theo-denBlanken/demoLOTR.git
Soms moet hier natuurlijk ook het wachtwoord worden toegevoegd.
Hierna kan de commit worden gepusht: git push -u origin master. Mijn systeem vraagt mijn beheerderswachtwoord van mijn Mac nog bij. Dit is voor de eerste keer een flinke klus geweest, maar de volgende wijzigingen gaan dan een stuk eenvoudiger.
In dit voorbeeld wijzigen we README.md en voegen .gitignore toe. (in deze video wordt deze pas na de eerste commit gemaakt.)
Nu is alleen git add -A nodig: deze zet alleen de gewijzigde bestanden op de stage.
Daarna git commit -m "vermeld wat gewijzigd is" en
git push -u origin master.
Met de pijltjes toets ‘naar boven’ zijn deze opdrachten dan vliegensvlug te geven.
Site met Bootstrap 6: een modaal in Bootstrap
Bootstrap heeft ook een modaalcomponent.
De instructie op
https://getbootstrap.com/docs/4.3/components/modal/#scrolling-long-content laat weer veel mark-up zien. Als je die kopieert en invoegt, kun je de inhoud in de div met de class modal-body plaatsen. De titel in het h5 element aanpassen evenals de inhoud van de knoppen.
Dat zou bij 1 modaal op de pagina volstaan, maar bij meerdere modalen ontstaan er zo ook meerdere id’s. Deze moet je dus toesnijden op de inhoud en de verwijzingen van de knop naar de inhoud moet ook worden aangepast.
Valideer je mark-up. Op deze manier is naar boven gekomen dat de titel van het modaal ook een id heeft, die per modaal ook echt uniek gemaakt dient te worden.
Site met Bootstrap 7: drie secties naast elkaar
Een herhaling van een eerdere handeling: er is een omvattend element met de class container-fluid nodig en daarin een div met de class row. De afbeeldingen moeten kleiner blijven dan de breedte van de kolommen en dat kan met de class img-fluid. De sections daarbinnen krijgen een class col-md-6 col-md-4 zodat ze bij kleine viewports met zijn tweeën naast elkaar staan en bij bredere viewports met zijn drieën.
Naar keuze kan de derde section een class col col-md-4, zodat hij bij de kleine viewport niet smal wordt en een lege ruimte naast zich laat, maar als enige de hele breedte neemt.
Site met Bootstrap 8: footer stijlen
We geven de footer hier een achtergrondkleur en gaan de inhoud in lijn met de rest van de pagina brengen.
De we zorgen dat er weer 2 elementen zijn met de class container-fluid en row in elkaar zitten met elk een p-4 class.
De achtergrond kan met bg-primary. Dit geven we de nav-bar ook. Ook als zijn deze kleuren nog niet optimaal, verderop gaan we die kleur naar onze smaak omzetten.
De kleur van de tekst gaat met text-white, en voor linkjes moet je dat apart als class aan de link meegeven.
Rechts uitlijnen gaat met text-right.
Site met Bootstrap 9: knoppen op dezelfde hoogte
Als je de knoppen, die onderaan in de kolommen staan, op dezelfde hoogte willen hebben, merken we het gemis van CSS Grid of Flexbox.
Het wordt hier daarom met een JavaScript opgelost met matchHeight.js:
http://brm.io/jquery-match-height/ en
https://github.com/liabru/jquery-match-height
Met npm install jquery-match-height wordt de jQuery-plugin geïnstalleerd.
Koppel het script na de koppeling van jQuery.
Daarna kan een eigen scriptje de betrokken elementen selecteren en gelijk maken aan de langste uit de selectie: $('#inleiding p').matchHeight(); selecteert alle paragrafen in de div met de id inleiding en maakt ze even hoog.
Als er meerdere paragrafen in een kolom voorkomen, moeten ze in een gemeenschappelijke parent gestopt worden, die dan geselecteerd kan worden.
Voor de eenheid de overige knoppen allemaal ook de class btn btn-primary meegeven.
Site met Bootstrap 10: GitHub bijwerken
Het is weer een mooi moment om GitHub bij te werken.
Merk op dat we tot nu toe niet 1 regel CSS geschreven hebben!!
De volgende 3 opdrachten volstaan:
git add -A
git commit -m “gelijke hoogten gemaakt”
git push -u origin master
Met de pijltjes-omhoog toets zijn ze praktisch op te roepen.
In de video laat ik ook git status zien om te laten zien wat er gebeurd. Je hoeft de GitHub site niet eens te openen, we doen het hier ter demonstratie van het wonder.
Site met Bootstrap 11: Card component
Een van de kolommen kan een card-component worden.
Voor de semantiek wordt de huidige section een div en wordt de zichtbare inhoud (exclusief de modaal omdat dit makkelijker werken is) de section. Deze krijgt de class card mee.
Als de kop de class card-header krijgt, de afbeelding de class card-img-top, de inhoud de class card-body en de div om de button de class card-footer. Dan heb je een mooie card gerealiseerd. Geef de footer dan ook nog de class text-center om de knop gecentreerd te krijgen.
Site met Bootstrap 12: Eigen css genereren
Er wordt nu nog gebruik gemaakt van de css van bootstrap.css, die meer dan 10.000 regels telt.
We gaan onze eigen css genereren en maken daarvoor een eigen scss-bestand en een eigen css-bestand.
Het scss-bestand importeert de noodzakelijke scss-bestanden uit de node_modules.
Er wordt dus NIET in de node_modules-map gewerkt!
De documentatie van Bootstrap vertelt welke scss-bestanden vereist zijn, voordat je zelf de noodzakelijke eruit pikt:
https://getbootstrap.com/docs/4.3/getting-started/theming/ Vereist: functions, variables, mixins.
Je begint al resultaat te krijgen na reboot, type, images en grid.
Voor de hele LOTR hebben we nodig: dropdown, transitions, navbar, buttons, jumbotorn, class, modal en card en de volgende utilities: text, spacing, background en screenreaders.
Deze exercitie levert een eigen CSS-bestand op van een kleine 5,5-duizend regels. Bijna een halvering van bootstrap.css!!
Site met Bootstrap 13: Bootstrap aanpassen
Nu je je eigen Bootstrap hebt, kun je ook de variabelen aanpassen.
Bootstrap maakt gebruik van de !default eigenschap van Sass. Dit betekent dat als er nog geen waarde aan een eigenschap is toegekend, deze de default-waarde krijgt.
Voorbeeld: $primaire-kleur: #123456; !default
Wil je echter dat de primaire kleur rood is, dan wijzig je dus niet de bovenstaande regel. Immers: deze staat in de node_modules-map en daarin wijzig je niets.
Je zet hem in een eigen SCSS-bestand- of document, die gecompileerd wordt voordat de bestanden in de node_modules gecompileerd worden. Daarmee zorg je er dus voor dat de $primaire-kleur rood is gezet en Sass zal dan de default-instelling overslaan.
Daaronder kun je natuurlijk fonts importeren, achtergrondafbeeldingen instellen en zo meer. Je maakt zo je eigen Bootstrap-versie!
Moet er een tekstkleur worden aangepast, probeer dan dat eerst via classes in je markup te doen.
Bonusopdracht
Je kunt op 3 manieren de bonus bemachtigen:
- Maak de opdracht met een andere CSS library zoals Foundation;
- Programmeer je eigen JS scriptje, die de kolommen even hoog maakt.
- Voeg zelf een Bootstrap component op zinvolle wijze toe.
- Valideer jouw pagina’s op Markup Validation Service van W3C.
- De validatie icoontjes plaats je in de footer.
- Maak in jouw GitHub-repo een
README.mdmet daarin tenminste een link naar jouw online uitwerking. - Stuur de GitHub-link naar mij.
Met dank aan Theo!