@cubex/recoil
v0.5.50
Published
Powerful react powered front-end framework.
Downloads
12
Maintainers
Keywords
Readme
Recoil
Rapidly create React websites.
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