Stylus files and React components for Cozy apps

by React

Cozy UI

CSS classes and React components designed to build Cozy apps.

If you plan to build a webapp to run on Cozy, you'll probably want to use a simple and elegant solution to build your interfaces without the mess of dealing with complex markup and CSS. Then Cozy UI is here for you!

View demo Download Source

Usage

As a Components library

Use yarn to add Cozy UI to a dependency to your project.

yarn add cozy-ui

You're now ready to use Cozy UI's (p)React components

As a Stylus plugin

[Stylus][stylus] is used as a preprocessor. You can add it as a library in your project to use it out-of-the-box.

Cozy UI can be distributed as a plugin.

$ yarn add -D cozy-ui

Then simply add it to your plugins stack:

var stylus  = require('stylus')
  , cozyui = require('cozy-ui/stylus');


function compile(str, path) {
return stylus(str)
  .set('filename', path)
  .set('compress', true)
  .use(cozyui());
}

Then, you just need to add a @import 'cozy-ui' statement at top of your main stylus file.

As a vanilla CSS library

The entire library is also available as a good ol’ CSS library. You can simply add it to your app by linking the distributed minified file.

<link media="all" rel="stylesheet" href=“cozy-ui/dist/cozy-ui.min.css" />

Develop on Cozy UI

If you want to customize or improve a Cozy UI Component, you need to clone a local version of the library, and declare it as a local symlink with yarn link.

git clone git@github.com:cozy/cozy-ui.git
cd cozy-ui
yarn link

Then in your application folder, you can link to your local Cozy UI

yarn link cozy-ui
yarn watch

All your modification in your local Cozy UI will now be visible in your application!

When sending a PR, if your changes have graphic impacts, it is useful for the reviewers if
you have deployed a version of the styleguidist containing your changes to your repository.

yarn build:doc:react
yarn deploy:doc --repo git@github.com:USERNAME/cozy-ui.git

GitHub