Styling for shared components across LBRY properties...IN PROGRESS
Find a file
2018-12-11 11:39:32 -06:00
dist Text should be selectable in text fields 2018-12-11 11:39:32 -06:00
sass Text should be selectable in text fields 2018-12-11 11:39:32 -06:00
type/inter Added Inter UI typeface and a nifty mixin! 2018-12-03 16:47:48 -06: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 Text should be selectable in text fields 2018-12-11 11:39:32 -06:00
README.md Added styling to mixins and updated README 2018-12-03 15:05:48 -06: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).

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.

License

BSD-3-Clause Copyright © LBRY Inc.