Share
Op de 2014 CSSConf in Australië gaf Simurai een geweldige presentatie genaamd "Styling with Strings", waarbij hij een aantal technieken uitwerkte voor de ontwikkeling van de browser. De enige tip die me echt opviel, was dit: pad UI-componenten met EM's, maak er ruimte tussen met REM's. Of als vuistregel: EM voor padding, REMs voor marge.
De reden waarom dit zo interessant is, is omdat dit ons in staat stelt om onze hele site op en neer te schalen door simpelweg enkele te veranderen lettertypegrootte eigenschappen.
Wilt u dat uw UI-componenten allemaal wat groter zijn? Bots je body font-size: 13px; tot 15px. Wilt u een beetje meer witruimte tussen die componenten? Bots je html font-size: 15px; tot 17px.
Kijk hoe de witruimte tussen deze knoppen toeneemt terwijl ik de html-elementen draai lettertypegrootte (en dus het mondiale vulling) omhoog. De opvulling op de knoppen blijft resoluut ingesteld op opvulling: 1em 3em.
In dit voorbeeld bel ik de lettertypegrootte op het lichaamselement. Zoals je alles kunt zien, groeit de marges tussen de elementen evenredig.
Dit is een hele snelle, maar krachtige benadering om flexibele lay-outs te maken. Speel zelf met de demo:
Accentsconagua