Rebass
v0.1.4

GitHub
npm

21 stateless React UI components built with Basscss

Learn more about Basscss

Just Add State

Each component is a pure render function, ready to be hooked into any application.

Prototype and Build Faster

Quickly build out UI and stay focused on the design decisions that matter most. Wireframe, prototype, then ship to production.

Component-Centric CSS

Basscss is designed for component-based architecture and doesn’t add the bulky overhead found in other frameworks.

Common Styling API

Powerful CSS utilities offer the ability to extend and create custom UI without the need to manage component-specific styles.

Getting Started

Install

npm i rebass

Import CSS

In a CSS file using cssnext

@import 'rebass';

Or using cssnext-loader with webpack

import css from 'rebass/rebass.css'

Import & Use Components

import { Button } from 'rebass'
<Button>Button</Button>

Components

Container

Sets max-width, left and right padding, and centers elements

Hamburgers
<t>
  Hamburgers
</t>

Row

Clearfix and negative-margin gutter compensation

Col 6
Col 6
<t>
  <t sm={6}>
    Col 6
  </t>
  <t sm={6}>
    Col 6
  </t>
</t>

Col

Responsive grid column with gutters

Col sm6 md4 lg3
Col sm6 md4 lg3
Col sm6 md4 lg3
Col sm6 md4 lg3
Col sm6 md4 lg3
Col sm6 md4 lg3
<t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
  <t
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </t>
</t>

Media

Media object with vertical alignment options

Hamburger
<t image={ReactElement}>
  Hamburger
</t>
Hamburger
<t
  middle={true}
  image={ReactElement}>
  Hamburger
</t>
Hamburger
<t
  bottom={true}
  image={ReactElement}>
  Hamburger
</t>

FlexRow

Container set to display flex with gutters

Hamburger
Hamburger
<t>
  <t>
    Hamburger
  </t>
  <t>
    Hamburger
  </t>
</t>
Hamburger
Hamburger
<t
  wrap={true}
  pad={false}>
  <div>
    Hamburger
  </div>
  <div>
    Hamburger
  </div>
</t>

Flex

Flexbox item container with default padding

Hamburger
Hamburger
Hamburger
<t>
  <t auto={true}>
    Hamburger
  </t>
  <t pad={false}>
    Hamburger
  </t>
  <t noshrink={true}>
    Hamburger
  </t>
</t>

Heading and description for main page headers with border bottom. Child elements are displayed to the right.

Hamburger

Fries, onion rings, and shakes

Medium Rare
<t
  title="Hamburger"
  description="Fries, onion rings, and shakes">
  <div>
    Medium Rare
  </div>
</t>

Footer with border top

Hamburger
<t>
  <div>
    Hamburger
  </div>
</t>

Section

Section element with vertical padding

Hamburger
<t>
  Hamburger
</t>

SectionHeader

Header for sections with id linked heading. Child elements display to the right

Hamburger

Medium rare

Section inception

<t>
  <t title="Hamburger">
    Medium rare
  </t>
  <p>
    Section inception
  </p>
</t>

LinkBtn

Solid and outline button styled links

Hamburger
<t href="#Link">
  Hamburger
</t>
Hamburger
<t
  href="#Link"
  color="red">
  Hamburger
</t>
Hamburger
<t
  href="#Link"
  outline={true}>
  Hamburger
</t>
Hamburger
<t
  href="#Link"
  outline={true}
  color="blue">
  Hamburger
</t>

Button

Solid and outline buttons with color prop

<t>
  Hamburger
</t>

<t>
  Hamburger
</t>

<t>
  Hamburger
</t>

<t>
  Hamburger
</t>

Input

Wrapper for form label and input elements

<t
  label="Hamburger"
  name="demo-input"/>

Select

Wrapper for form label and select elements

<t
  label="Hamburger"
  name="demo-select"
  options={[{"value":1,"label":"One"},{"value":2,"label":"Two"},{"value":3,"label":"Three"}]}/>

Textarea

Wrapper for form label and textarea elements

<t
  label="Hamburger"
  name="demo-textarea"
  rows={4}/>

Radio

Wrapper for form label and radio input elements

<t
  label="Hamburger 1"
  value="1"
  name="demo-radio"/>

<div>
  <t
    label="Hamburger 2"
    value="2"
    name="demo-radio"/>
  <t
    label="Hamburger 3"
    value="3"
    name="demo-radio"/>
</div>

Checkbox

Wrapper for form label and checkbox input elements

<t
  label="Hamburger"
  value="checked"
  name="demo-checkbox"/>

Range

Wrapper for form label and range input elements

<t
  label="Hamburger"
  name="demo-range"/>

Fieldset

Wrapper for fieldset and legend elements

Hamburger
<t legend="Hamburger">
  <t
    label="Fries"
    name="demo-fries"/>
  <t
    label="Pickles"
    name="demo-pickles"/>
  <t
    label="Temperature"
    name="demo-temperature"
    options={[{"value":1,"label":"Rare"},{"value":2,"label":"Medium Rare"},{"value":3,"label":"Medium"},{"value":4,"label":"Medium Well"},{"value":5,"label":"Well Done"}]}/>
</t>

Progress

Styled progress element

32
<t
  value={32}
  max={100}/>
96
<t
  value={96}
  max={100}
  color="red"/>

Toolbar

Styled box with flexbox layout, padding, and reversed text on a color background

Hamburger
Hot DogFries
<t>
  <t>
    Hamburger
  </t>
  <t href="#Toolbar">
    Hot Dog
  </t>
  <t href="#Toolbar">
    Fries
  </t>
  <t auto={true}/>
  <t>
    Shake
  </t>
</t>
Hamburger
Hot DogFries
<t color="blue">
  <t>
    Hamburger
  </t>
  <t href="#Toolbar">
    Hot Dog
  </t>
  <t href="#Toolbar">
    Fries
  </t>
  <t auto={true}/>
  <t color="darken-3">
    Shake
  </t>
</t>

Inline block padded link

Hamburger
<t href="#NavItem">
  Hamburger
</t>
Hamburger
<t
  href="#NavItem"
  flush={true}>
  Hamburger
</t>

Styled box with white background and rounded borders

HambugerHot DogOnion Rings
<t>
  <t
    href="#Menu"
    label="Hambuger"/>
  <t
    href="#Menu"
    label="Hot Dog"/>
  <t
    href="#Menu"
    label="Onion Rings"/>
</t>

Block-level padded link

Hamburger
<t href="#MenuItem">
  Hamburger
</t>
Hamburger
<t
  href="#MenuItem"
  flush={true}>
  Hamburger
</t>
Hamburger
<t
  href="#MenuItem"
  compact={true}>
  Hamburger
</t>
Hamburger
<t
  href="#MenuItem"
  compact={true}
  flush={true}>
  Hamburger
</t>

Message

Styled box with padding and background color for application flash messages

Sumbitted hamburger request
<t>
  Sumbitted hamburger request
</t>
Hamburger successfully acquired
<t color="green">
  Hamburger successfully acquired
</t>
Warning! Pickles missing from hamburger
<t color="red">
  Warning! Pickles missing from hamburger
</t>
Warning! Onion has been carmelized
<t
  color="red"
  outline={true}>
  Warning! Onion has been carmelized
</t>

Badge

Styled inline-block element for displaying states

Hamburger
<t>
  Hamburger
</t>
Hamburger
<t color="green">
  Hamburger
</t>
Hamburger
<t color="red">
  Hamburger
</t>

Arrow

Up and down arrow for use with clickable UI elements

<t/>

<t up={true}/>

<t>
  Hamburger 
  <t/>
</t>

Panel

Styled box with header and footer components

PanelHeader

PanelFooter
<t>
  <t title="PanelHeader"/>
  <t>
    <t
      label="Hamburger"
      name="demo-username"/>
    <t
      label="Hot Dog"
      name="demo-password"/>
    <t>
      Shake
    </t>
  </t>
  <t text="PanelFooter"/>
</t>

Card

Styled box with image at the top

Nested Hamburger

<t>
  <t
    sm={6}
    md={4}>
    <t image={ReactElement}>
      <t
        middle={true}
        image={ReactElement}>
        <h3 className="h4 m0">
          Nested Hamburger
        </h3>
      </t>
    </t>
  </t>
</t>

Hero banner styled box with background image props

Hamburger

<t>
  <h1 className="m0">
    Hamburger
  </h1>
</t>
BannerHeader

Hamburger with Background Image

BannerFooter
<t
  header="BannerHeader"
  footer="BannerFooter"
  bgImage="url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1 className="m0">
    Hamburger with Background Image
  </h1>
</t>

Left Aligned Hamburger

<t
  left={true}
  bgImage="url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1 className="m0">
    Left Aligned Hamburger
  </h1>
</t>

Install Rebass Now

npm i rebass

Related