Git Product home page Git Product logo

lucid-fork's Introduction

Lucid codecov

A UI component library from AppNexus. Forked to UX-Rex-Organization 07/02/2020

Install

Lucid can be installed with npm

npm install --save lucid-ui

or yarn

yarn add lucid-ui

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'lucid-ui';

ReactDOM.render(
  <Button>Hello World</Button>,
  mountNode
);

Lucid uses less for its stylesheets. If you use less, you can include the styles like so:

@import "node_modules/lucid-ui/src/index.less";

If you don't use less, you can use the precompiled css file node_modules/lucid-ui/dist/lucid.css.

Custom CSS Scope

There are some very rare situations where you might need to customize the prefix for all the css class names emitted by the library and less. If you find yourself in that unenviable position, you can do the following:

In your webpack config use the DefinePlugin to specify LUCID_CSS_NAMESPACE like so:

new webpack.DefinePlugin({
  LUCID_CSS_NAMESPACE: "'something-custom'",
});

When you render the less, make sure to set the prefix variable to the same thing you set in in your webpack config. E.g.

lessc node_modules/lucid-ui/src/index.less --modify-var='prefix=something-custom'

Dependencies

lucid-ui has several React peer dependencies. This means your application is responsible for declaring dependencies on compatible versions. Currently we support React 15 and 16.

Example package.json:

{
  "dependencies": {
    "lucid-ui": "^2.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
  }
}

To contribute to lucid, please see CONTRIBUTING.md.

Credits

  • BrowserStack for providing cross-browser testing infrastructure.
  • Travis CI for providing continuous integration infrastructure.
  • CodeCov for providing code coverage analysis infrastructure.

lucid-fork's People

Contributors

jondlm avatar sodiumjoe avatar miloofcroton avatar mute avatar ogupte avatar nathaniellee avatar alisonailea avatar liliematia avatar dsusskind avatar rsadres avatar njlg avatar danhahn avatar tsantef avatar kyle-mcguire avatar strunkandwhite avatar oliveiraddb avatar dreidn avatar jhsu avatar yasskin avatar trippygif avatar tarun avatar jonahgeorge avatar lancempoe avatar joelgriffith avatar beyonddream avatar e-anderson avatar reddyesha avatar indraneel avatar isaacgluck avatar glitteringkatie avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.