Sierra is een mooie donkere UI-bibliotheek die is gebouwd op Sass

In een wereld vol frontend raamwerken, het kan moeilijk zijn om alle opties te doorzoeken. Maar als je dan een Sass-liefhebber bent Sierra is de coolste nieuwe UI-framework kijken.

Het is volledig aanpasbaar en werkt volledig op SCSS-code. Dit betekent dat het met tientallen komt SCSS-partials en gerelateerde bibliotheken die allemaal samenkomen in één krachtige (en gratis) UI-bibliotheek.

Wanneer ontwikkelaars een nieuwe Sass-bibliotheek horen, wordt deze meestal als een verzameling mixins beschouwd. Maar Sierra is meer dan alleen variabelen en mixins. Deze bibliotheek is een echt-blauw UI-framework met aangepaste stijlen voor grids, typografie, tafels, toetsen, vormen, en vrijwel alles wat je nodig hebt om een website te ontwerpen.

In totaal weegt de bibliotheek ongeveer 34kb ongecomprimeerd, dat kan groot lijken. Maar gelet op alles wat je krijgt, is het een goede maat en ver van de meest uitgebreide daarbuiten (ter referentie, Bootstrap's CSS meet ongeveer 115kb ongecomprimeerd).

Werken in Sierra, krijg je volledig aanpasbare opties voor het wijzigen van rasters, vulling, afstand, lettergroottes / families, kleuren en nog veel meer. Het wordt allemaal beheerd via SCSS en elke bibliotheek is opgesplitst in verschillende bestanden voor eenvoudigere organisatie.

De UI-bibliotheek wordt geleverd met tientallen frontend-stijlen voor de meest voorkomende pagina-elementen:

Paragraphs & headers
Toetsen
Formulierinvoer (dropdowns, radio's, enz.)
tabellen
Paginering
Links / rechts uitlijningen
Aangepaste laadbalken

Al deze elementen zijn te zien op de demopagina met een donkerder kleurenschema. Sierra is standaard een donkere UI-bibliotheek maar omdat alle kleuren gemakkelijk te veranderen zijn, kun je het laten werken voor elke stijl van website.

Mijn enige klacht is het gebrek aan gemakkelijk toegankelijke documentatie. Sierra bevindt zich momenteel in v2.0, maar zelfs de hoofdrepository bevat weinig installeer- en aanpassingstips.

Gelukkig is de lijst met ontwikkelaars alle hoofdvariabelen je kunt veranderen in de _variables.scss het dossier. Deze variabelen worden geïmporteerd voor alle andere Sierra SCSS-bestanden, wat betekent dat u hoeven alleen maar op één plek van kleur te veranderen om ze overal aan het werk te krijgen.

Sierra is verre van perfect, maar het is een van de weinige op Sass gebaseerde UI-bibliotheken op het web.

Als je het eens probeert, kijk dan op de hoofdwebsite demo's en verdere details. En als je echt vastzit, kun je proberen een vraag te openen op de GitHub-problemenpagina of een bericht sturen naar de maker Joan Claret voor meer informatie.