darkbs

Dark color scheme & some functional Bootstrap components

Color Scheme

Black background color scheme, overrides colors only. Use this by loading the compiled css after Bootstrap.

<link rel="stylesheet" href="//npmcdn.com/darkbs/darkbs.css">

Top-Level API

className(options)

Object → String

• options <Object> | <String>
  • [ ] spacing
  • [ ] list <Object>
    • inline
    • unstyled
  • [x] text <Array> Add text- classes
  • [ ] text <Object>
    • [ ] align
    • [ ] transform
    • [ ] color
    • [ ] truncate
  • [ ] color
  • [ ] font
  • [ ] bg, background
  • [ ] w, width
  • [ ] d, display
  • [ ] pull
  • [ ] clearfix
  • [ ] pos, position
  • [ ] invisible
  • [ ] sr, readerOnly
  • [ ] embed, embedResponsive
  • [x] active <Boolean>
  • [x] hidden <String>
    • down, up Add .hidden-*-down and .hidden-*-up.

A structural way to use utilitiy classes, return Bootstrap class names.

element([{tagName='div', className}])

Object → ReactElement

• tagName <String> | <ReactClass> The first argument to pass to h() or createElement(), can be anything acceptable by that.
• className <Object> | <String> All options specified in className() are available.

Base component to create arbitrary elements.

Layout

container({[fluid=false]})

• fluid: Use true for a full width container

row()

col([{xs, sm, md, lg, xl}])

• xs, sm, md, lg, xl <Number> | <Object>
  • width Column width, valid values are 1..12 or 'auto'.
  • size Alias for width
  • offset, push, pull Column position

For the smallest viewport with options, if width or size is not set, col-* will be automatically added for it. Subject to change with Flexbox grid system.

Components

button([{color, size, outline, block}])

• [x] color
• [ ] size
• [ ] outline
• [ ] block