README.md

React Components Library Using Material-Design-Lite

This repository is a React scaffolding equipped with a library of premade components using the Material-Design-Lite project. The components are set up to be as customizable and reactive as possible.

• Installation
• Usage
• Components
  • Atoms
  • Molecules
  • Organisms
  • Template
• Creators

##Installation

Just install all of the dependencies.

sh installer.sh
[sudo] npm install

Pack the project using webpack.

webpack -w

And start your server. Enjoy.

node index

##Usage

Using a React component has never been this easy. Every part of your UI can be formed as follows: Import, Customize, and Assemble.

Components

The components are classified using atomic design by Brad Frost.

Atoms

The basic building blocks of our project i.e. html tags.

• CLButton
• CLCardMedia
• CLCardText
• CLCardTitle
• CLLogo
• CLMarkdownRenderer
• CLNavLink
• CLProgressBar
• CLSlider
• CLSnackbar
• CLSpacer
• CLSpinner
• CLTable
• CLTextField
• CLToggle
• CLTooltip

Molecules

Combinations of atoms. Such as links, logos, and buttons to form a Nav.

• CLCardAction
• CLCardMenu
• CLMarkdownEditor
• CLNav

Organisms

Combinations of atoms and molecules e.g. Headers and Drawers.

• CLBody
• CLCardClickableBody
• CLCardThumbnailBody
• CLCard
• CLDrawer
• CLForm
• CLHeaderRow
• CLHeader

Template

Groups of organisms that together forms a page. Templates maybe layouts or full page design.

• CLCenter
• CLGrid
• CLLayout
• CLSideContent

Creators

Toni-Jan Keith Monserrat @github.com/tjmonsi

Alexandre C. Gerona @github.com/altusgerona

Zydrick Jan M. Delima @github.com/zmdelima

Gauven Roy Pascua @github.com/rokuto