@cubex/recoil

Powerful react powered front-end framework.

Stats

StarsIssuesVersionUpdatedCreatedSize
@cubex/recoil
000.5.504 years ago4 years agoMinified + gzip package size for @cubex/recoil in KB

Readme

Recoil

npm version

Rapidly create React websites.

Alt text

Recoil is a react powered UI framework.

The main goal of Recoil was to build a front end framework that allows developers to rapidly create mobile first web applications

NPM Module

If you're using npm, you'll need to set up your project to build recoil. Assuming you're using Webpack, first install

npm install css-loader less less-loader style-loader --save-dev

Then in your Webpack configuration, include in the loaders array

{
    test: /\.less$/,
    loader: 'style-loader!css-loader!less-loader'
}

Then include the following CSS files in your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.css" />

In order to add the styles, you'll need to include in one file of your project

import '@cubex/recoil/src/index.less';

Now, on your project you can destructure the components you want.

import { Toolbar, Button } from '@cubex/recoil';

An example of how to use them in your app.

<Toolbar spacing block>
    <Button icon="home" />
    <Button icon="user">
        Users
    </Button>
</Toolbar>

Documentation

First run these commands

git clone https://github.com/cubex30/recoil.git
cd recoil
npm install
npm run build

Then open recoil/docs/index.html in your browser.

Videos

Helpful videos on how to use each component can be found here:

  • [Align]
  • [Button]
  • [Card]
  • [Checkbox]
  • [Door]
  • [Dropdown]
  • [Emerge]
  • [Grid]
  • [Input]
  • [Layer]
  • [Loading]
  • [Modal]
  • [Pane]
  • [Selectable]
  • [Shrink]
  • [Toolbar]
  • [Transform]
  • [Wizard]

Todos

  • Write Tests
  • Rethink Github Save
  • Add Code Comments
  • Rename Door to Open
  • Rename Pane to SlideIn

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.