Styles Repository
The styles repository includes both styles and react components.
Usage
First install
npm i --save https://github.com/TableCo/styles.git
Use as Middleware
// server.jsconst app = const production = false app app
Use Css Compiled Styles
<!-- development index.html --> <!-- production index.html -->
Use Less Styles
we will find a better way to do this
// server.js app
/* example.less */;
Import Components
{ return <div> <NavBar/> // ... </div> }
Development
Run Locally
in terminal type npm install
then npm start
in browser go to localhost:1234/example/main
Jade
We use Jade for displaying the style examples
Styles
Each style is defined by a style sheet.
- typography/fonts
- icons
- buttons
- forms/inputs
- lists/tables
- list-items
- badges
- colors
- cards
Less
We are using less as a precompiler for our css.
BEM
We use BEM (Block Element Modifier)
- block__element-of-block
- block--modifier
For example
// Block element .profile // Element of block profile .profile__background // Modifier to profile element for card .profile--card
For variables use only dashes
- namespace--variable-name
@font-size--header-lg: 30px;@color--white: #000;
Resources
- Get BEM
- CSS Tricks
- BEM.info (not highly recomended)
Components
Each component is a stand alone react component.
- nav-bar
- dropdowns
- tooltips
- loaders
- progress
- modals
- notification
- profile, table, project
- list-item
- card
- profile-header
- media viewer
- microapp shared components
Potential Components
- chips
- message
- messenger
ES6
We are using the ES6 version of Javascript.
StandardJS
We are using StandardJS to define our Javascript style.