darkbs

0.0.2 • Public • Published

darkbs

Dark color scheme & some functional Bootstrap components

NPM version build status

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)

ObjectString

  • 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}])

ObjectReactElement

  • 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

Package Sidebar

Install

npm i darkbs

Weekly Downloads

3

Version

0.0.2

License

Unlicense

Last publish

Collaborators

  • dk00