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__
```javascript
// server.js
import {tableStyles} from 'table-styles'
import express from 'express'
const app = express()
const production = false
app.use(tableStyles(production))
app.listen(process.env.PORT || 5000)
```
__Use Css Compiled Styles__
```html
```
__Use Less Styles__
we will find a better way to do this
```javascript
// server.js
import serve from 'koa-static'
app.use(serve('node_modules/table-styles'))
```
```css
/* example.less */
@import "colors.less";
.example {
color: @color--gray;
}
```
__Import Components__
```javascript
import React, {Component} from 'react'
import {NavBar} from 'table-styles'
export class App extends Component {
render () {
return
// ...
}
}
```
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
* [Jade Reference](http://jade-lang.com/reference/)
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.
* [Getting Started with less](http://lesscss.org/)
* [Features](http://lesscss.org/features)
### BEM
We use BEM (Block Element Modifier)
- *block*__*element-of-block*
- *block*--*modifier*
For example
```less
// 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*
```less
@font-size--header-lg: 30px;
@color--white: #000;
```
**Resources**
* [Get BEM](http://getbem.com/introduction/)
* [CSS Tricks](https://css-tricks.com/bem-101/)
* [BEM.info](https://en.bem.info/method/) (_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.
* [ES6 Features](http://es6-features.org/#Constants)
### StandardJS
We are using StandardJS to define our Javascript style.
* [StandardJS Rules](http://standardjs.com/rules.html)
* [StandardJS Home](http://standardjs.com/index.html)