table-styles
v1.1.7
Published
Styles Repository === The styles repository includes both styles and react components.
Readme
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
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.