Sierra is a Beautiful Dark UI Library Built on Sass

In a universe full of frontend frameworks, it can be tough classification by all a options. But, if you’re a Sass partner afterwards Sierra is a coolest new UI framework to watch.

It’s wholly customizable and runs wholly on SCSS code. This means it comes with dozens of SCSS partials and related libraries that all combine together into one absolute (and free) UI library.

sierra form scss frameworksierra form scss framework

When developers hear about a new Sass library it’s customarily insincere to be a set of mixins. But Sierra is more than usually variables and mixins. This library is a true-blue UI horizon with custom styles for grids, typography, tables, buttons, forms, and flattering many anything you’d need to pattern a website.

sierra formssierra forms

In total, a library weighs about 34kb uncompressed, that can seem large. But deliberation all we get, it’s a good distance and distant from a bulkiest out there (for reference, Bootstrap’s CSS measures about 115kb uncompressed).

Working in Sierra, we get fully customizable options for changing grids, padding, spacing, rise sizes/families, colors, and so many more. It’s all tranquil around SCSS and any library is split into opposite files for easier organization.

The UI library comes with dozens of frontend styles for a many common page elements:

  • Paragraphs headers
  • Buttons
  • Form inputs(dropdowns, radios, etc)
  • Tables
  • Pagination
  • Left/right alignments
  • Custom loading bars

All these elements can be seen on a demo page that uses a darker tone scheme. By default, Sierra is a dark UI library though given all colors are easy to change we can get it operative for any character of website.

My usually censure is a lack of easily-accessible documentation. Sierra is now in v2.0, nonetheless even a main repo is meagre on implement customization tips.

Thankfully, a developers list all a categorical variables we can change in a _variables.scss file. These variables get alien for all other Sierra SCSS files, that means we only need to change colors in one place to get them operative everywhere.

Sierra is distant from ideal though it’s one of a few Sass-based UI libraries on a web.

If we wanna give it a try afterwards check out a main website for demos serve details. And, if you’re unequivocally stranded we can try opening a doubt on a GitHub issues page or messaging a creator Joan Claret for some-more details.

Add Comment