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="//unpkg.com/darkbs/darkbs.css">

Top-Level API

className(options)

Object → String

• options <Object> | <String>
  • spacing
  • list <Object>
    • inline
    • unstyled
  • 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
  • active <Boolean>
  • 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}])

• color
• size
• outline
• block

tag([options])

• color
• pill

backdrop({active})

modal({active, dismiss, children})

Return a modal/backdrop.

• active: open state of the modal, pass false instead of removing modal to gain transition effects.
• dismiss: event handler for dismissing the modal, called when clicking outside the modal.
• children: modal content.