Aanpak

Waar de "aan de slag"-pagina's een inleidende rondleiding door het project en wat het biedt geven, richt dit document zich op waarom we de dingen in Bootstrap doen zoals we ze doen. Het legt onze filosofie over bouwen voor het web uit, zodat anderen van ons kunnen leren, met ons kunnen bijdragen en ons kunnen helpen verbeteren.

Zie je iets wat niet klopt, of misschien beter kan? Open een issue — we bespreken het graag met je.

Samenvatting

We gaan hieronder dieper op elk punt in, maar op hoofdlijnen bepaalt dit onze aanpak.

• Componenten moeten responsief en mobile-first zijn
• Componenten moeten worden gebouwd met een basisklasse en uitgebreid via modifier-klassen
• Componentstates moeten een gemeenschappelijke z-index-schaal volgen
• Geef waar mogelijk de voorkeur aan een implementatie in HTML en CSS boven JavaScript
• Gebruik waar mogelijk utilities in plaats van eigen stijlen
• Vermijd waar mogelijk het afdwingen van strikte HTML-eisen (kindselectors)

Responsief

De stijlen van Bootstrap zijn gebouwd om responsief te zijn, een aanpak die vaak mobile-first wordt genoemd. We gebruiken die term in onze documentatie en zijn het er grotendeels mee eens, maar soms is hij te breed. Hoewel niet elk component in Bootstrap volledig responsief hoeft te zijn, draait deze responsieve aanpak erom CSS-overrides te beperken door je stijlen te laten toevoegen naarmate de viewport groter wordt.

In heel Bootstrap zie je dit het duidelijkst terug in onze media queries. In de meeste gevallen gebruiken we min-width-queries die vanaf een bepaald breakpoint gaan gelden en doorlopen tot en met de hogere breakpoints. Zo geldt een .d-none van min-width: 0 tot oneindig. Een .d-md-none geldt daarentegen vanaf het medium breakpoint en hoger.

Soms gebruiken we max-width wanneer de inherente complexiteit van een component daarom vraagt. Soms zijn zulke overrides functioneel en mentaal duidelijker te implementeren en te onderhouden dan het herschrijven van kernfunctionaliteit van onze componenten. We streven ernaar deze aanpak te beperken, maar zetten hem af en toe in.

Klassen

Afgezien van onze Reboot, een normalisatie-stylesheet voor verschillende browsers, streven al onze stijlen ernaar klassen als selector te gebruiken. Dat betekent dat we type-selectors (bijv. input[type="text"]) en overbodige bovenliggende klassen (bijv. .parent .child) vermijden, omdat die stijlen te specifiek maken om eenvoudig te overschrijven.

Componenten moeten daarom worden gebouwd met een basisklasse die gemeenschappelijke, niet-te-overschrijven eigenschap-waardeparen bevat. Bijvoorbeeld .btn en .btn-primary. We gebruiken .btn voor alle gemeenschappelijke stijlen zoals display, padding en border-width. Vervolgens gebruiken we modifiers zoals .btn-primary om de color, background-color, border-color enzovoort toe te voegen.

Modifier-klassen zouden alleen gebruikt moeten worden wanneer er meerdere eigenschappen of waarden over meerdere varianten heen gewijzigd moeten worden. Modifiers zijn niet altijd nodig, dus controleer bij het maken ervan of je daadwerkelijk regels code bespaart en onnodige overrides voorkomt. Goede voorbeelden van modifiers zijn onze themakleurklassen en formaatvarianten.

z-index-schalen

Er zijn twee z-index-schalen in Bootstrap: elementen binnen een component en overlay-componenten.

Componentelementen

• Sommige componenten in Bootstrap zijn met overlappende elementen gebouwd om dubbele randen te voorkomen zonder de border-eigenschap aan te passen. Bijvoorbeeld button groups, input groups en pagination.
• Deze componenten delen een standaard z-index-schaal van 0 tot en met 3.
• 0 is standaard (initieel), 1 is :hover, 2 is :active/.active en 3 is :focus.
• Deze aanpak sluit aan bij onze verwachtingen over de hoogste gebruikersprioriteit. Als een element focus heeft, is het in beeld en heeft het de aandacht van de gebruiker. Actieve elementen komen op de tweede plaats omdat ze een status aangeven. Hover staat op de derde plaats omdat het gebruikersintentie aangeeft, maar over vrijwel alles kan gehoverd worden.

Overlay-componenten

Bootstrap bevat verschillende componenten die op de een of andere manier als overlay functioneren. Daaronder vallen, in volgorde van hoogste z-index, dropdowns, fixed en sticky navbars, modals, tooltips en popovers. Deze componenten hebben hun eigen z-index-schaal die bij 1000 begint. Dit startgetal is willekeurig gekozen en dient als kleine buffer tussen onze stijlen en de eigen stijlen van jouw project.

Elk overlay-component verhoogt zijn z-index-waarde iets, zodanig dat gangbare UI-principes ervoor zorgen dat elementen met focus of hover altijd in beeld blijven. Zo blokkeert een modal het document (je kunt geen andere actie ondernemen dan de actie van de modal), dus zetten we die boven onze navbars.

Lees hier meer over op onze z-index-layoutpagina.

HTML en CSS boven JS

Waar mogelijk schrijven we liever HTML en CSS dan JavaScript. Over het algemeen zijn HTML en CSS breder verspreid en toegankelijker voor meer mensen van uiteenlopende ervaringsniveaus. HTML en CSS zijn in je browser bovendien sneller dan JavaScript, en je browser biedt je doorgaans al veel functionaliteit.

Dit principe is terug te zien in onze eersteklas JavaScript-API die op data-attributen leunt. Je hoeft vrijwel geen JavaScript te schrijven om onze JavaScript-plugins te gebruiken; schrijf in plaats daarvan HTML. Lees hier meer over op onze JavaScript-overzichtspagina.

Tot slot bouwen onze stijlen voort op het fundamentele gedrag van gangbare webelementen. Waar mogelijk gebruiken we liever wat de browser al biedt. Je kunt bijvoorbeeld een .btn-klasse op vrijwel elk element zetten, maar de meeste elementen bieden geen semantische waarde of browserfunctionaliteit. Daarom gebruiken we <button>s en <a>s.

Hetzelfde geldt voor complexere componenten. Hoewel we onze eigen plugin voor formuliervalidatie zouden kunnen schrijven die op basis van de status van een input klassen aan een bovenliggend element toevoegt, waardoor we de tekst bijvoorbeeld rood kunnen maken, gebruiken we liever de pseudo-elementen :valid/:invalid die elke browser ons biedt.

Utilities

Utility-klassen — in Bootstrap 3 helpers genoemd — zijn een krachtige bondgenoot in de strijd tegen opgeblazen CSS en slechte paginaprestaties. Een utility-klasse is doorgaans één enkel, onveranderlijk eigenschap-waardepaar uitgedrukt als klasse (zo staat .d-block voor display: block;). Hun belangrijkste aantrekkingskracht is de snelheid waarmee je HTML schrijft en de beperking van de hoeveelheid eigen CSS die je moet schrijven.

Specifiek wat eigen CSS betreft, kunnen utilities helpen om de groei van je bestandsgrootte tegen te gaan door je meest herhaalde eigenschap-waardeparen tot losse klassen terug te brengen. Op schaal kan dat een dramatisch effect op je projecten hebben.

Flexibele HTML

Hoewel het niet altijd mogelijk is, proberen we niet te dogmatisch te zijn in onze HTML-eisen voor componenten. Daarom richten we ons op losse klassen in onze CSS-selectors en proberen we selectors voor directe kinderen (>) te vermijden. Dat geeft jou meer flexibiliteit in je implementatie en houdt onze CSS eenvoudiger en minder specifiek.

Codeconventies

Code Guide (van Bootstrap-medeoprichter @mdo) documenteert hoe we onze HTML en CSS in heel Bootstrap schrijven. Het beschrijft richtlijnen voor algemene opmaak, gezond-verstandstandaarden, de volgorde van eigenschappen en attributen, en meer.

We gebruiken Stylelint om deze en andere standaarden in onze Sass/CSS af te dwingen. Onze eigen Stylelint-configuratie is open source en beschikbaar voor anderen om te gebruiken en uit te breiden.

We gebruiken vnu-jar om standaard en semantische HTML af te dwingen en om veelvoorkomende fouten op te sporen.