Rebass
v0.1.2

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
<Container>
  Hamburgers
</Container>

Row

Clearfix and negative-margin gutter compensation

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

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
<Row>
  <Col
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </Col>
  <Col
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </Col>
  <Col
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </Col>
  <Col
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </Col>
  <Col
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </Col>
  <Col
    sm={6}
    md={4}
    lg={3}>
    Col sm6 md4 lg3
  </Col>
</Row>

Media

Media object with vertical alignment options

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

FlexRow

Container set to display flex with gutters

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

Flex

Flexbox item container with default padding

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

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
<PageHeader
  title="Hamburger"
  description="Fries, onion rings, and shakes">
  <div>
    Medium Rare
  </div>
</PageHeader>

Footer with border top

Hamburger
<Footer>
  <div>
    Hamburger
  </div>
</Footer>

Section

Section element with vertical padding

Hamburger
<Section>
  Hamburger
</Section>

SectionHeader

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

Hamburger

Medium rare

Section inception

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

LinkBtn

Solid and outline button styled links

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

Button

Solid and outline buttons with color prop

<Button>
  Hamburger
</Button>

<Button>
  Hamburger
</Button>

<Button>
  Hamburger
</Button>

<Button>
  Hamburger
</Button>

Input

Wrapper for form label and input elements

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

Select

Wrapper for form label and select elements

<Select
  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

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

Radio

Wrapper for form label and radio input elements

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

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

Checkbox

Wrapper for form label and checkbox input elements

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

Range

Wrapper for form label and range input elements

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

Fieldset

Wrapper for fieldset and legend elements

Hamburger
<Fieldset legend="Hamburger">
  <Input
    label="Fries"
    name="demo-fries"/>
  <Input
    label="Pickles"
    name="demo-pickles"/>
  <Select
    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"}]}/>
</Fieldset>

Progress

Styled progress element

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

Toolbar

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

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

Inline block padded link

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

Styled box with white background and rounded borders

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

Block-level padded link

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

Message

Styled box with padding and background color for application flash messages

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

Badge

Styled inline-block element for displaying states

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

Arrow

Up and down arrow for use with clickable UI elements

<Arrow/>

<Arrow up={true}/>

<Button>
  Hamburger 
  <Arrow/>
</Button>

Panel

Styled box with header and footer components

PanelHeader

PanelFooter
<Panel>
  <PanelHeader title="PanelHeader"/>
  <PanelBody>
    <Input
      label="Hamburger"
      name="demo-username"/>
    <Input
      label="Hot Dog"
      name="demo-password"/>
    <Button>
      Shake
    </Button>
  </PanelBody>
  <PanelFooter text="PanelFooter"/>
</Panel>

Card

Styled box with image at the top

Nested Hamburger

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

Hero banner styled box with background image props

Hamburger

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

Hamburger with Background Image

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

Left Aligned Hamburger

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

Install Rebass Now

npm i rebass

Related