Maak uw ontwerpsysteem, deel 4: Afstand

In dit artikel zullen we kijken hoe we een afstandssysteem in CSS kunnen instellen en hoe we kunnen profiteren van relatieve eenheden om responsiviteit te verwerken.

Dit artikel maakt deel uit van een serie over ontwerpsystemen die zijn geïnspireerd op onze bibliotheek met webcomponenten. De bibliotheek vertrouwt op een solide systeem van CSS-globals. Dus dit zijn wij die de dingen delen die we hebben geleerd om de wereldwijde stijl van onze bibliotheek te bepalen!

Artikelreeks:
- Deel 1: Typografie
- Deel 2: Raster en lay-out
- Deel 3: kleuren
- Deel 4: Afstand
- Deel 5: Pictogrammen
- Deel 6: Knoppen

We hebben de Spacing Editor gelanceerd! Een webontwerptool waarmee u een afstandsschaal kunt genereren en responsieve regels kunt instellen.

Het afstandssysteem instellen met behulp van CSS-variabelen

Stap één van het instellen van een afstandssysteem is het creëren van een schaal van (afstand) waarden. Om een ​​schaal van niet-lineaire waarden te maken, hebt u 1) een eenheid of basiswaarde en 2) een vermenigvuldiger nodig. We hebben het al gehad over het creëren van een modulaire schaal in ons artikel over webtypografie.

Een basisbenadering van spatiëring ziet er als volgt uit:

Het bovenstaande fragment beschrijft een afstandssysteem op basis van de Fibonacci-reeks (elke waarde wordt gevonden door de twee getallen ervoor op te tellen).

Opmerking: de eerste keer dat ik las over het toepassen van de Fibonacci-reeks op een schaal met afstandswaarden, stond in dit uitstekende artikel van The Scenery.

Het nadeel van een basisbenadering is dat het goed is. Als we een enkele afstandswaarde willen wijzigen, moeten we de wiskunde uitvoeren en alle andere waarden handmatig bijwerken.

Laten we proberen het systeem enigszins onder controle te krijgen. We kunnen een variabele introduceren om het eenheidsnummer te definiëren en de functie calc () gebruiken om de afstandswaarden te verkrijgen.

We komen dichterbij! In het bovenstaande voorbeeld hebben we elke afstandswaarde gedefinieerd door het eenheidsnummer te vermenigvuldigen met een vermenigvuldiger. Merk op dat de Fibonacci-reeks nog steeds wordt toegepast op de vermenigvuldigers. Als we nu het hele systeem willen bijwerken, kunnen we de eenheidswaarde bewerken.

Laten we vervolgens van de absolute eenheid afkomen en deze vervangen door de em-eenheid. Om dit te doen, kunnen we 16 px vervangen door 1em:

Wat lijkt op een kleine aanpassing, verandert eigenlijk veel! De em-eenheid is een relatieve eenheid gelijk aan de huidige lettergrootte. In de meeste browsers is de standaard lettergrootte (voordat CSS-stijl wordt toegepast) 16 pixels. Daarom kunnen we aannemen dat 1em = 16 px. Als u echter de lettergrootte van een element bewerkt, is 1em niet langer 16 px (voor dat element), maar gelijk aan de nieuwe lettergrootte. Wat lijkt op een gebrek aan controle, is een krachtige sneltoets. Ik zal je laten zien waarom.

Als je deze serie over ontwerpsystemen hebt gevolgd, weet je dat we een typografiesysteem hebben gemaakt waarin alle lettergroottes met elkaar zijn verweven en worden verkregen door een variabele van de tekstbasisbasis (gelijk aan 1em) te vermenigvuldigen met een verhouding. Dat betekent dat de variabele tekst-basisgrootte de controller is van het hele type systeem. Als u de tekstbasisgrootte bij een specifieke mediaquery vergroot, worden alle variabelen voor tekstgrootte dienovereenkomstig gewijzigd.

Door slechts één variabele bij te werken, krijgt u dit:

Niet alleen dat! Omdat de afstandseenheid gelijk is aan 1em, en alle andere afstandswaarden vermenigvuldigers van de waarde van de eenheid zijn, hebben we ook invloed op de afstand als we de variabele voor tekst-basisgrootte bijwerken.

Kijk hoe deze methode tegelijkertijd de typografie en de spatiëring beïnvloedt:

We werken nog steeds een enkele variabele bij (tekstbasis). Tot dusverre geen aanvullende mediavragen nodig! Het enige wat u hoeft te doen om te profiteren van deze krachtige benadering van reactievermogen, is de afstandsvariabelen gebruiken om paddings en marges op componentniveau in te stellen:

Wat als u alle afstandswaarden in één keer wilt bijwerken, zonder dat u de variabele voor de tekstbasis moet wijzigen? Werk gewoon de variabele voor de spatie-eenheid bij:

Het is waar dat je door een methode als deze te omarmen wat van je "visuele" controle verliest, maar het is voor eenvoud en onderhoudbaarheid. Het is waar dat je geen pixel-perfecte waarden kunt instellen, maar je zult reageren op een geheel nieuw niveau: het grootste deel van het werk zal een robuuste waardenschaal voor spatiëring en typografie instellen. Vervolgens kunt u 2-3 specifieke variabelen bij specifieke mediaquery's bewerken om een ​​cascade-effect te creëren, in tegenstelling tot het aanpassen van alle componenten en subelementen.

Een standaard opvulling instellen voor alle componenten

Er zullen gevallen zijn waarin u verschillende componenten nodig hebt om dezelfde vulling te hebben. Een variabele instellen voor de standaardopvulling van de componenten is een truc die ik heb geleerd na veel tijd zoeken naar een opvulwaarde die ergens in mijn CSS-bestanden is verborgen.

Voor alle duidelijkheid verwijs ik naar die blokkerige, "containerachtige" componenten.

Hier is een voorbeeld:

Laten we teruggaan naar ons _spacing.scss-bestand en laten we de variabele padding van de component opnemen:

Door dit te doen, maakt u nog een "dev-snelkoppeling": als u opvulling op een component moet toepassen, hoeft u niet te controleren welke afstandsvariabele in andere soortgelijke gevallen is gebruikt. Gebruik gewoon de component-padding variabele.

Marge hulpprogramma klassen

Hoewel het veilig is om opvulling rechtstreeks in uw component-CSS op te nemen, kunnen marges indelingsproblemen veroorzaken. We verwijzen nogmaals naar de hoofdcomponenten, die blokken die uw hoofdlay-out definiëren (geen component