Creëer basislijngrids op het web met Sassline

Een groot deel van de online-inhoud is op tekst gebaseerd, maar mensen zijn niet geïnteresseerd in het lezen van de tekst op uw site tenzij de typografie goed is ontworpen.

Je zou kunnen werken met aangepaste kaders, maar die kunnen beperkend aanvoelen. Probeer in plaats daarvan Sassline, een gratis op Sass gebaseerde bibliotheek voor het maken van perfecte rasterlijnen op het web.

Deze gratis tool werkt op Sass, dus je moet eerst je weg weten in die voorbewerkingstaal. Als je nog niet bekend bent met webontwikkeling, is het een goed idee om dit te doen oefen je CSS en Sass voordat je Sassline oppakt.

Maar zodra je het hebt geleerd, ontwerp je nooit meer op dezelfde manier lay-outs.

Het maakt gebruik van rem-eenheden om te creëren aangepaste basislijnen die overal in uw tekst passen. Dit omvat alle headers, alinea's, blockquotes, alles.

En Sassline wordt geleverd met responsieve onderbrekingspunten, zodat u uw tekstgrootte (en regelhoogte) automatisch kunt aanpassen op basis van het Sassline-raster. Dit is afhankelijk van Sass-mixins die Sass-ervaring vereisen als je ermee wilt werken.

Dat is waarom ik deze tool specifiek aanbeveel voor ervaren webontwikkelaars op zoek naar verbetering van hun workflow.

De demopagina biedt een vrij duidelijk voorbeeld van hoe dit basislijnraster werkt, inclusief lijstitems, aanhalingstekens en verschillende kopgroottes.

Bovendien kun je dit toevoegen aan frontend frameworks zoals Bootstrap als je bereid bent om een ​​aantal kleine aanpassingen aan je code aan te brengen. De de hele Sassline-bibliotheek is super veelzijdig en het zou een hoofdbestanddeel moeten zijn voor Sass-liefhebbers overal.

Ga om te beginnen naar de hoofdrepos van GitHub en download een kopie van de bronbestanden.

Je vindt ook de installatie-instructies en een link naar dit geweldige blogbericht dat je door de Sassline-bibliotheekfunctie per functie leidt.