https://github.com/lbryio/components
Styling for shared components across LBRY properties...IN PROGRESS
https://github.com/lbryio/components
Last synced: 8 months ago
JSON representation
Styling for shared components across LBRY properties...IN PROGRESS
- Host: GitHub
- URL: https://github.com/lbryio/components
- Owner: lbryio
- License: bsd-3-clause
- Created: 2018-11-27T18:46:43.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-06-22T19:27:01.000Z (over 3 years ago)
- Last Synced: 2025-04-22T04:04:10.736Z (8 months ago)
- Language: CSS
- Homepage: https://lbryio.github.io/components
- Size: 4.52 MB
- Stars: 4
- Watchers: 13
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @lbry/components
> Styling for shared components across LBRY properties
### Installation
```bash
$ npm i @lbry/components sass -D
```
We recommend using this module with [Dart Sass](https://www.npmjs.com/package/sass) for its' focus on speed and low dependency count.
If you are using `@lbry/components`, you can safely remove [@lbry/color](https://github.com/lbryio/color) if you've already included it separately (this module includes it by default).
### Demo
[https://lbryio.github.io/components](https://lbryio.github.io/components)
### Usage
Your main Sass file:
```scss
@charset "utf-8";
@import "@lbry/components/sass/";
// ...your other Sass imports
```
In your watch scripts for Sass files, ensure you load the `node_modules` path in order to `import` this module in your project without silly prefixes like `../../../`. What a _mess_.
Example `package.json` scripts section:
```js
"scripts": {
...,
"sass:dev": "sass --load-path=node_modules --watch app/sass:app/dist --style compressed",
"sass:prod": "sass --load-path=node_modules --update app/sass:app/dist --style compressed",
...
}
```
They are nearly identical, save for `--watch` and `--update`. Please refer to the [Dart Sass README](https://github.com/sass/dart-sass/blob/master/README.md) for assistance on how to integrate it with your project. The [above example](https://github.com/lbryio/lbry.tech/blob/master/package.json) is taken from the `lbry.tech` repo.
### Note
To use with Webpack, you have to make use of the tilde character when referencing a file inside your `node_modules` folder. Like so:
```scss
@import "~@lbry/components/sass/";
```
### License
[BSD 3-Clause](LICENSE) Copyright © LBRY Inc.