Styling for shared components across LBRY properties...IN PROGRESS

Find a file

Sean Yesmunt cdcbbbe9ef fix spacing on buttons		2020-05-14 16:56:13 -04:00
dist	fix spacing on buttons	2020-05-14 16:56:13 -04:00
docs	fix demo	2020-03-05 17:54:17 -05:00
sass	fix spacing on buttons	2020-05-14 16:56:13 -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.0	2020-05-14 12:21:21 -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

README.md

@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/";