Nadering

Hoewel de pagina's 'Aan de slag' een inleidende rondleiding geven door het project en wat het biedt, richt dit document zich op waarom we de dingen doen die we doen in Bootstrap. Het legt onze filosofie uit om op het web te bouwen, zodat anderen van ons kunnen leren, met ons kunnen bijdragen en ons kunnen helpen verbeteren.

Zie je iets dat niet goed klinkt, of misschien beter kan? Open een probleem — we willen het graag met u bespreken.

Overzicht

We zullen in elk van deze meer ingaan, maar op een hoog niveau, dit is wat onze aanpak leidt.

• Componenten moeten responsive en mobile-first zijn
• Componenten moeten worden gebouwd met een basisklasse en worden uitgebreid via modificatieklassen
• Componentstatussen moeten voldoen aan een algemene z-indexschaal
• Geef waar mogelijk de voorkeur aan een HTML- en CSS-implementatie boven JavaScript
• Gebruik waar mogelijk hulpprogramma's in plaats van aangepaste stijlen
• Vermijd waar mogelijk het afdwingen van strikte HTML-vereisten (children selectors)

Snel reagerend

De responsieve stijlen van Bootstrap zijn ontworpen om responsief te zijn, een benadering die vaak wordt aangeduid als mobile-first . We gebruiken deze term in onze documenten en zijn het er grotendeels mee eens, maar soms kan deze te breed zijn. Hoewel niet elk onderdeel volledig responsief hoeft te zijn in Bootstrap, gaat deze responsieve benadering over het verminderen van CSS-overschrijvingen door u ertoe aan te zetten stijlen toe te voegen naarmate de viewport groter wordt.

Bij Bootstrap zie je dit het duidelijkst in onze mediaquery's. In de meeste gevallen gebruiken we min-widthquery's die van toepassing zijn op een specifiek breekpunt en doorgaan naar de hogere breekpunten. A geldt bijvoorbeeld .d-nonevan min-width: 0tot oneindig. Aan de andere kant is a .d-md-nonevan toepassing vanaf het gemiddelde breekpunt en hoger.

Soms gebruiken we max-widthwanneer de inherente complexiteit van een component dit vereist. Soms zijn deze overschrijvingen functioneel en mentaal duidelijker te implementeren en te ondersteunen dan de kernfunctionaliteit van onze componenten te herschrijven. We streven ernaar deze aanpak te beperken, maar zullen deze van tijd tot tijd gebruiken.

Klassen

Afgezien van onze Reboot, een cross-browser normalisatie-stylesheet, zijn al onze stijlen erop gericht om klassen als selectors te gebruiken. Dit betekent dat je uit de buurt moet blijven van typeselectors (bijv. input[type="text"]) en vreemde bovenliggende klassen (bijv. .parent .child) die stijlen te specifiek maken om gemakkelijk te overschrijven.

Als zodanig moeten componenten worden gebouwd met een basisklasse die gemeenschappelijke, niet-overschreven eigenschap-waardeparen bevat. Bijvoorbeeld, .btnen .btn-primary. We gebruiken .btnvoor alle gangbare stijlen zoals display, padding, en border-width. We gebruiken dan modifiers zoals .btn-primaryhet toevoegen van de kleur, achtergrondkleur, randkleur, enz.

Modifier-klassen mogen alleen worden gebruikt als er meerdere eigenschappen of waarden voor meerdere varianten moeten worden gewijzigd. Modifiers zijn niet altijd nodig, dus zorg ervoor dat u regels code daadwerkelijk opslaat en onnodige overschrijvingen voorkomt bij het maken ervan. Goede voorbeelden van modifiers zijn onze themakleurklassen en maatvarianten.

z-index schalen

Er zijn twee z-indexschalen in Bootstrap: elementen binnen een component en overlaycomponenten.

Component elementen

• Sommige componenten in Bootstrap zijn gebouwd met overlappende elementen om dubbele randen te voorkomen zonder de bordereigenschap te wijzigen. Bijvoorbeeld knopgroepen, invoergroepen en paginering.
• Deze componenten delen een standaardschaal z-indexvan 0door 3.
• 0is standaard (initieel), 1is :hover, 2is :active/ .activeen 3is :focus.
• Deze aanpak komt overeen met onze verwachtingen van de hoogste gebruikersprioriteit. Als een element gefocust is, is het zichtbaar en onder de aandacht van de gebruiker. Actieve elementen zijn het op één na hoogste omdat ze de staat aangeven. Hover is de op twee na hoogste omdat het de intentie van de gebruiker aangeeft, maar bijna alles kan worden zweven.

Overlay-componenten

Bootstrap bevat verschillende componenten die als een soort overlay fungeren. Dit omvat, in volgorde van hoogste z-index, dropdowns, vaste en plakkerige navigatiebalken, modals, tooltips en popovers. Deze componenten hebben hun eigen z-indexschaal die begint bij 1000. Dit startnummer is willekeurig gekozen en dient als een kleine buffer tussen onze stijlen en de aangepaste stijlen van uw project.

Elke overlaycomponent verhoogt zijn z-indexwaarde enigszins op een zodanige manier dat gemeenschappelijke UI-principes het mogelijk maken dat gebruikersgerichte of zwevende elementen te allen tijde in beeld blijven. Een modaal is bijvoorbeeld documentblokkering (u kunt bijvoorbeeld geen andere actie ondernemen behalve de actie van de modal), dus we plaatsen dat boven onze navigatiebalken.

Lees hier meer over op onze z-indexlay-outpagina .

HTML en CSS via JS

Waar mogelijk schrijven we liever HTML en CSS boven JavaScript. Over het algemeen zijn HTML en CSS productiever en toegankelijker voor meer mensen van alle verschillende ervaringsniveaus. HTML en CSS zijn ook sneller in uw browser dan JavaScript, en uw browser biedt u over het algemeen veel functionaliteit.

Dit principe is onze eersteklas JavaScript API die dataattributen gebruikt. U hoeft bijna geen JavaScript te schrijven om onze JavaScript-plug-ins te gebruiken; schrijf in plaats daarvan HTML. Lees hier meer over op onze JavaScript overzichtspagina .

Ten slotte bouwen onze stijlen voort op het fundamentele gedrag van veelvoorkomende webelementen. Waar mogelijk gebruiken we het liefst wat de browser biedt. U kunt bijvoorbeeld een .btnklasse op bijna elk element plaatsen, maar de meeste elementen bieden geen semantische waarde of browserfunctionaliteit. Dus in plaats daarvan gebruiken we <button>s en <a>s.

Hetzelfde geldt voor complexere componenten. Hoewel we onze eigen plug-in voor formuliervalidatie zouden kunnen schrijven om klassen toe te voegen aan een bovenliggend element op basis van de status van een invoer, waardoor we de tekst rood kunnen opmaken, geven we er de voorkeur aan de :valid/ :invalidpseudo-elementen te gebruiken die elke browser ons biedt.

Nutsvoorzieningen

Utility-klassen - voorheen helpers in Bootstrap 3 - zijn een krachtige bondgenoot in het bestrijden van CSS-bloat en slechte paginaprestaties. Een nutsklasse is typisch een enkele, onveranderlijke eigenschap-waarde-paring uitgedrukt als een klasse (bijv. .d-blockvertegenwoordigt display: block;). Hun primaire aantrekkingskracht is de snelheid van gebruik tijdens het schrijven van HTML en het beperken van de hoeveelheid aangepaste CSS die u moet schrijven.

Specifiek met betrekking tot aangepaste CSS, kunnen hulpprogramma's helpen de toenemende bestandsgrootte tegen te gaan door uw meest herhaalde eigenschap-waardeparen in enkele klassen te verminderen. Dit kan op grote schaal een dramatisch effect hebben in uw projecten.

Flexibele HTML

Hoewel dit niet altijd mogelijk is, streven we ernaar om niet al te dogmatisch te zijn in onze HTML-vereisten voor componenten. Daarom concentreren we ons op afzonderlijke klassen in onze CSS-selectors en proberen we directe kinderen-selectors ( >) te vermijden. Dit geeft u meer flexibiliteit in uw implementatie en helpt onze CSS eenvoudiger en minder specifiek te houden.

Codeconventies

Code Guide (van Bootstrap co-creator, @mdo) documenteert hoe we onze HTML en CSS schrijven in Bootstrap. Het specificeert richtlijnen voor algemene opmaak, gezond verstand standaardwaarden, eigenschap- en attribuutvolgorde, en meer.

We gebruiken Stylelint om deze normen en meer af te dwingen in onze Sass/CSS. Onze aangepaste 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 te detecteren.