In a world full of frontend frameworks, it can be tough sorting through all the options. But, if you’re a Sass lover then Sierra is the coolest new UI framework to watch.
Recommended Reading: A Simple And Easy Guide To Understand Sass
It’s fully customizable and runs entirely on SCSS code. This means it comes with dozens of SCSS partials and related libraries that all merge together into one powerful (and free) UI library.
When developers hear about a new Sass library it’s usually assumed to be a set of mixins. But Sierra is more than just variables and mixins. This library is a true-blue UI framework with custom styles for grids, typography, tables, buttons, forms, and pretty much anything you’d need to design a website.
In total, the library weighs about 34kb uncompressed, which can seem large. But considering everything you get, it’s a good size and far from the bulkiest out there (for reference, Bootstrap’s CSS measures about 115kb uncompressed).
Working in Sierra, you get fully customizable options for changing grids, padding, spacing, font sizes/families, colors, and so much more. It’s all controlled via SCSS and each library is split into different files for simpler organization.
The UI library comes with dozens of frontend styles for the most 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 the demo page which uses a darker color scheme. By default, Sierra is a dark UI library but since all colors are easy to change you can get it working for any style of website.
My only complaint is the lack of easily-accessible documentation. Sierra is currently in v2.0, yet even the main repo is sparse on install & customization tips.
Thankfully, the developers list all the main variables you can change in the _variables.scss file. These variables get imported for all other Sierra SCSS files, which means you only need to change colors in one place to get them working everywhere.
Sierra is far from perfect but it’s one of the few Sass-based UI libraries on the web.
If you wanna give it a try then check out the main website for demos & further details. And, if you’re really stuck you can try opening a question on the GitHub issues page or messaging the creator Joan Claret for more details.
Recommended Reading: Sass Best Practices: Tips And Tools For Developers
SOURCE:http://www.hongkiat.com/blog/sierra-dark-ui-library-sass/
