21 stateless React UI components built with Basscss
Learn more about BasscssJust 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
<t>
Hamburgers
</t>
Row
Clearfix and negative-margin gutter compensation
<t>
<t sm={6}>
Col 6
</t>
<t sm={6}>
Col 6
</t>
</t>
Col
Responsive grid column with gutters
<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
<t image={ReactElement}>
Hamburger
</t>
<t
middle={true}
image={ReactElement}>
Hamburger
</t>
<t
bottom={true}
image={ReactElement}>
Hamburger
</t>
FlexRow
Container set to display flex with gutters
<t>
<t>
Hamburger
</t>
<t>
Hamburger
</t>
</t>
<t
wrap={true}
pad={false}>
<div>
Hamburger
</div>
<div>
Hamburger
</div>
</t>
Flex
Flexbox item container with default padding
<t>
<t auto={true}>
Hamburger
</t>
<t pad={false}>
Hamburger
</t>
<t noshrink={true}>
Hamburger
</t>
</t>
PageHeader
Heading and description for main page headers with border bottom. Child elements are displayed to the right.
Hamburger
Fries, onion rings, and shakes
<t
title="Hamburger"
description="Fries, onion rings, and shakes">
<div>
Medium Rare
</div>
</t>
Footer
Footer with border top
<t>
<div>
Hamburger
</div>
</t>
Section
Section element with vertical padding
<t>
Hamburger
</t>
SectionHeader
Header for sections with id linked heading. Child elements display to the right
Hamburger
Medium rareSection inception
<t>
<t title="Hamburger">
Medium rare
</t>
<p>
Section inception
</p>
</t>
LinkBtn
Solid and outline button styled links
<t href="#Link">
Hamburger
</t>
<t
href="#Link"
color="red">
Hamburger
</t>
<t
href="#Link"
outline={true}>
Hamburger
</t>
<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
<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
<t
value={32}
max={100}/>
<t
value={96}
max={100}
color="red"/>
Toolbar
Styled box with flexbox layout, padding, and reversed text on a color background
<t>
<t>
Hamburger
</t>
<t href="#Toolbar">
Hot Dog
</t>
<t href="#Toolbar">
Fries
</t>
<t auto={true}/>
<t>
Shake
</t>
</t>
Menu
Styled box with white background and rounded borders
<t>
<t
href="#Menu"
label="Hambuger"/>
<t
href="#Menu"
label="Hot Dog"/>
<t
href="#Menu"
label="Onion Rings"/>
</t>
Message
Styled box with padding and background color for application flash messages
<t>
Sumbitted hamburger request
</t>
<t color="green">
Hamburger successfully acquired
</t>
<t color="red">
Warning! Pickles missing from hamburger
</t>
<t
color="red"
outline={true}>
Warning! Onion has been carmelized
</t>
Badge
Styled inline-block element for displaying states
<t>
Hamburger
</t>
<t color="green">
Hamburger
</t>
<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
<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>
Banner
Hero banner styled box with background image props
Hamburger
<t>
<h1 className="m0">
Hamburger
</h1>
</t>
Hamburger with Background Image
<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