Nils Binder werkt bij 9Elements als front-end developer en hij is daar het hoofd van het webdesign team van zeven werknemers. Met zijn team werkt hij aan kleine to medium websites. In deze weekly nerd gaf Nils ons zijn ideeën over het veelgebruikte wrapper-element en hoe dit veel beter zou kunnen.
De standaard wrapper
Veel websites gebruiken een wrapper element om te zorgen dat de content niet breder dan een bepaalde breede wordt. Veelal wordt dit gedaan met een maximale breedte, wat padding en het centreren van de content.
.wrapper {
max-width: 800px;
margin: 0 auto;
padding: 1em;
}Dit kan volgens Nils al beter door alleen de breedte en margin aan te geven en in de breedte de max en de min aan te geven. Hierdoor wordt de breedte precies, zonder de padding van die preciese breedte weer wordt afgehaald.
.wrapper {
width: min( 100% - 3rem, 75ch );
margin-inline: auto;
}Wat is er mis met de wrapper?
“Waarom gebruiken we een wrapper?” vraagt Nils zich af. We maken met de wrapper helemaal niet goed gebruik van de hele schermbreedte en veel websites lijken door de wrapper hetzelfde. Volgens Nils komt het door de tools die we gebruiken. Vroeger werd Photoshop gebruikt en nu is er Figma. Figma is al iets beter omdat het meer op CSS lijkt met de auto-layout functie. Maar Figma is nog steeds gemaakt om die oude en dezelfde websites te ontwerpen. Alles is nog in pixels, hoewel CSS variabele eenheden heeft.
Veel gebruikte argument waarom we het nog steeds op de oude manier doen zijn: de twaalf kolommen in het design, het is niet mogelijk en tailwind. Tailwind is net als Figma heel goed in de zelfde websites ontwerpen.
De optionele kolom techniek
Nils heeft een andere oplossing voor het wrapper element die hij de optionele kolom techniek noemt. Hiermee maakt hij het mogelijk om uit die ene kolom te breken naar een van beide kanten op een bebaaplde breedte of naar de voledige breedte.
Hiervoor maakt Nils gebruik van de fr eenheid in CSS grid:
Op een breeder scherm kunnen er kolommen bij komen. Met grid-column kan je aangeven welke elementen in welke kolom mogen overlopen.
.container {
display: grid;
grid-template-columns: 2fr 3fr auto 1fr;
}
h1 {
grid-column: 2/4;
}
p {
grid-column: 3;
}Voorbeelden
Nils had nog een aantal voorbeelden van websites waar hij dit heeft toegepast.
dasruhrgebiet.de
Bij deze website komt op bredere schermen de navigatie aan de linker kant.
bryck.com
Bij deze website gaan de grote titels buiten de kolom waar de tekst in staat.
Nils sluit af met een quote waar ik het zeker mee eens ben:
Use the screen that is available.
We hebben allerlei grote schermen waar we heel weinig gebruik van maken op het web, waarvan ik vind dat het zeker meer kan. Natuurlijk is het ook erg lastig te gebruiken, omdat we ook juist hele kleine schermen hebben. Nils zijn techniek is volgens mij zeker een verbetering op hoe we die ruimte wel op een responsive manier kunnen gebruiken. Als denk ik wel dat het mogelijk is om hier nog veel verder in te gaan. Uiteindelijk is Nils zijn oplossing nog steeds een soort wrapper.