Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sierra-library/sierra
Sierra SCSS library
https://github.com/sierra-library/sierra
css frontend gitter micro-library npm-package sass scss scss-framework scss-library sierra sierra-library
Last synced: 2 days ago
JSON representation
Sierra SCSS library
- Host: GitHub
- URL: https://github.com/sierra-library/sierra
- Owner: sierra-library
- License: gpl-2.0
- Created: 2015-12-10T15:37:53.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-01-28T21:17:40.000Z (almost 3 years ago)
- Last Synced: 2025-01-12T06:03:24.474Z (9 days ago)
- Topics: css, frontend, gitter, micro-library, npm-package, sass, scss, scss-framework, scss-library, sierra, sierra-library
- Language: CSS
- Homepage: https://sierra-library.github.io/
- Size: 1.1 MB
- Stars: 859
- Watchers: 35
- Forks: 73
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- Awesome-CSS-Resources - sierra:
README
The smallest and lightest scss library
[](https://gitter.im/sierra-library/sierra?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [](https://badge.fury.io/js/sierra-library) [](http://commitizen.github.io/cz-cli/)
#### Online demo
[Visit demo website](https://sierra-library.github.io/).
[Visit a theme customization example](https://sierra-library.github.io/examples/example1/index.html).
What's the difference with other SCSS libraries?
-----------
This is a micro SCSS library to help you build websites
✓ Only 32.9 kB (8.2 kB gzipped)
✓ Modular
✓ Customize colors, borders, radius & sizes
✓ Responsive
Quick install
-----------
Using npm
```bash
npm install sierra-library --save-dev
```
Import
-----------
In sass files (recommended)
```scss
@import 'sierra-library/lib/index';
```
or directly in your html
```html
```
Customize
-----------
If you want to customize Sierra library's theme, create your own `custom-settings` file and add it just **before** importing sierra files:
```scss
@import 'custom-settings';
@import 'sierra-library/lib/index';
```
This `custom-settings.scss` file should contain all those SCSS variables you want to overwrite:
```scss
$c-primary: #3498db;
$c-secondary: #2ecc71;
$fz-base: 18px;
```
#### Examples
[Theme customization example](https://sierra-library.github.io/examples/example1/index.html)
[Theme customization example code ](https://github.com/sierra-library/sierra-library.github.io/tree/master/examples/example1)
Contributing
-----------
#### Contributing rules
- Do not include unrelated commits in the same Pull Request.
- Use .editorconfig file located in the root folder. [More info](http://editorconfig.org/)
- Use the .scss-lint file located in the root folder.
- In case of doubt, join our chat [sierra-library gitter](https://gitter.im/sierra-library/sierra).
Who's Using This?
-----------
- [Appszoom](http://www.appszoom.com)
- [Appszoom developers](http://www.appszoom.com/developers)
Are you using Sierra Library in your awesome project too? [drop us](mailto:[email protected]) an email.
---
Made by [Joan Claret](https://joanclaret.github.io/) ([@dpam23](https://twitter.com/dpam23)) and [contributors](https://github.com/sierra-library/sierra/graphs/contributors) | This library is licensed under the [GNU General Public License v2.0](https://github.com/sierra-library/sierra/blob/master/LICENSE.md).