Styling for shared components across LBRY properties...IN PROGRESS
Go to file
Sean Yesmunt 828bfbedb2 v4.2.5
2020-06-30 22:45:38 -04:00
dist more form style consistency improvements 2020-06-30 22:45:24 -04:00
docs fix demo 2020-03-05 17:54:17 -05:00
sass more form style consistency improvements 2020-06-30 22:45:24 -04:00
.editorconfig Initial commit 2018-11-27 16:41:30 -06:00
.gitignore Fixes and added some media styles 2018-11-28 17:36:23 -06:00
.npmrc Initial commit 2018-11-27 16:41:30 -06:00
LICENSE Slight fix 2018-11-27 16:42:56 -06:00
package.json v4.2.5 2020-06-30 22:45:38 -04:00
README.md Update README.md 2019-02-11 11:57:11 -06:00
yarn.lock accessible components - v3 2019-11-22 16:04:26 -05:00

@lbry/components

Styling for shared components across LBRY properties

Installation

$ npm i @lbry/components sass -D

We recommend using this module with Dart Sass for its' focus on speed and low dependency count.

If you are using @lbry/components, you can safely remove @lbry/color if you've already included it separately (this module includes it by default).

Demo

https://lbryio.github.io/components

Usage

Your main Sass file:

@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:

"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 for assistance on how to integrate it with your project. The above example 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:

@import "~@lbry/components/sass/";

License

BSD 3-Clause Copyright © LBRY Inc.