❤
npm
Sign UpSign In

table-styles

1.1.7 • Public • Published

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

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.

Readme

Keywords

none

Package Sidebar

Install

npm i table-styles

Weekly Downloads

0

Version

1.1.7

License

ISC

Last publish

Collaborators

  • haleyt
Try on RunKit
Report malware