Table-styles NPM

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.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

<!-- development index.html -->
<head>
  <link rel="stylesheet" href="https://rawgit.com/TableCo/styles/gh-pages/styles/table-styles.css"/>
</head>

<!-- production index.html -->
<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/TableCo/styles/gh-pages/styles/table-styles.css"/>
</head>

Use Less Styles

we will find a better way to do this

// server.js
import serve from 'koa-static'

app.use(serve('node_modules/table-styles'))

/* example.less */
@import "colors.less";

.example {
  color: @color--gray;
}

Import Components

import React, {Component} from 'react'
import {NavBar} from 'table-styles'

export class App extends Component {
  render () {
    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

Jade 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.

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.

ES6 Features

StandardJS

We are using StandardJS to define our Javascript style.