https://github.com/appnexus/lucid

A UI component library from Xandr.
https://github.com/appnexus/lucid

components jsx react

Last synced: 30 days ago
JSON representation

A UI component library from Xandr.

• Host: GitHub
• URL: https://github.com/appnexus/lucid
• Owner: appnexus
• License: other
• Created: 2016-02-17T19:59:27.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:21:01.000Z (almost 2 years ago)
• Last Synced: 2024-11-01T20:12:29.122Z (about 2 months ago)
• Topics: components, jsx, react
• Language: TypeScript
• Homepage: https://appnexus.github.io/lucid
• Size: 24.2 MB
• Stars: 201
• Watchers: 27
• Forks: 80
• Open Issues: 89
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lucid [![codecov](https://codecov.io/gh/appnexus/lucid/branch/master/graph/badge.svg)](https://codecov.io/gh/appnexus/lucid)

A UI component library from Xandr.

## Install

Lucid can be installed with npm

```sh

  npm install --save lucid-ui

```

## Usage

```js

import React from 'react';

import ReactDOM from 'react-dom';

import { Button } from 'lucid-ui';

ReactDOM.render(Hello World, 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`][dp] 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][lmv] 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:

```json

{

	"dependencies": {

		"lucid-ui": "^5.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.

[browserstack]: https://www.browserstack.com/

[travis ci]: https://travis-ci.org/

[codecov]: https://codecov.io

[bpi]: https://github.com/ant-design/babel-plugin-import

[dp]: https://webpack.js.org/plugins/define-plugin/

[lmv]: http://lesscss.org/usage/