1 |
|
2 | <img src='docs/logo.svg' width='128' height='128' />
|
3 |
|
4 | # Rebass
|
5 |
|
6 | React UI component library & design system,
|
7 | built with [styled-system][system],
|
8 | with support for
|
9 | [styled-components][sc] & [emotion][emotion].
|
10 |
|
11 | [![Build Status][badge]][travis]
|
12 | [![Coverage][coverage-badge]][coverage]
|
13 | [![Downloads][downloads-badge]][npm]
|
14 | [![Version][version-badge]][npm]
|
15 |
|
16 | [badge]: https://img.shields.io/travis/jxnblk/rebass.svg?style=flat-square
|
17 | [travis]: https://travis-ci.org/jxnblk/rebass
|
18 | [coverage-badge]: https://img.shields.io/codecov/c/github/jxnblk/rebass.svg?style=flat-square
|
19 | [coverage]: https://codecov.io/github/jxnblk/rebass
|
20 |
|
21 | [downloads-badge]: https://img.shields.io/npm/dw/rebass.svg?style=flat-square
|
22 | [version-badge]: https://img.shields.io/npm/v/rebass.svg?style=flat-square
|
23 | [npm]: https://npmjs.com/package/rebass
|
24 |
|
25 | https://rebassjs.org
|
26 |
|
27 | ```sh
|
28 | npm i rebass
|
29 | ```
|
30 |
|
31 | Rebass is a library of highly-composable, primitive UI components for React,
|
32 | built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application.
|
33 | Based upon a configurable design system,
|
34 | Rebass‘s props API makes building consistent, responsive web apps simpler and faster.
|
35 |
|
36 |
|
37 | ## Getting Started
|
38 |
|
39 | ```jsx
|
40 | import React from 'react'
|
41 | import { Provider, Heading, Button } from 'rebass'
|
42 |
|
43 | const App = props => (
|
44 | <Provider>
|
45 | <Heading>Hello</Heading>
|
46 | <Button>Rebass</Button>
|
47 | </Provider>
|
48 | )
|
49 | ```
|
50 |
|
51 | To use Rebass with [emotion][emotion], import from `rebass/emotion`:
|
52 |
|
53 | ```js
|
54 | import * as Rebass from 'rebass/emotion'
|
55 | ```
|
56 |
|
57 | ## Features
|
58 |
|
59 | - Kickstart your own React component library
|
60 | - Responsive style props from [styled-system][system]
|
61 | - Flexbox grid with [Rebass Grid][]
|
62 | - Support for [styled-components][sc] & [emotion][emotion]
|
63 | - Functional stateless UI components
|
64 | - Configurable theming
|
65 | - Extensible base components
|
66 | - Design-system based consistency
|
67 | - Built for responsive web design
|
68 |
|
69 |
|
70 | > "One of the best React component libs out there"
|
71 | > – [Max Stoiber](https://twitter.com/mxstbr/status/882657561111080960)
|
72 |
|
73 | > "Rebass is the Bootstrap of React."
|
74 | > – [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289)
|
75 |
|
76 | > "A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"
|
77 | > – [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210)
|
78 |
|
79 |
|
80 | ## Documentation
|
81 |
|
82 | - [Docs](https://jxnblk.com/rebass)
|
83 | - [Getting Started](https://jxnblk.com/rebass/getting-started)
|
84 | - [Props](https://jxnblk.com/rebass/props)
|
85 | - [Grid System](https://jxnblk.com/rebass/grid-system)
|
86 | - [Theming](https://jxnblk.com/rebass/theming)
|
87 | - [Extending](https://jxnblk.com/rebass/extending)
|
88 | - [Components](https://jxnblk.com/rebass/components)
|
89 | - [Server-Side Rendering](https://jxnblk.com/rebass/server-side-rendering)
|
90 |
|
91 | ## CodeSandbox
|
92 |
|
93 | Try it out:
|
94 |
|
95 | https://codesandbox.io/s/github/jxnblk/rebass/tree/master/examples/sandbox
|
96 |
|
97 | ### Architectural Approach
|
98 |
|
99 | Rebass is built around a component architectural approach inspired by Dan Abramov’s
|
100 | [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963),
|
101 | where presentational components are the only ones that encapsulate styles and contain no application logic,
|
102 | and container components do not contain any styles or DOM markup and handle all the application logic.
|
103 |
|
104 | Rebass only contains presentational components,
|
105 | which means controlling things like progressive disclosure mechanisms
|
106 | or dropdown menus should be handled at a higher level in container components.
|
107 | Therefore, Rebass itself does not require any client-side JavaScript,
|
108 | is well suited to server-side rendering,
|
109 | and can fit into virtually any higher level application architecture.
|
110 |
|
111 | See [Patterns for Style Composition in React](http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/)
|
112 | for more on some of the thought behind Rebass.
|
113 |
|
114 |
|
115 | ### Related
|
116 |
|
117 | - [styled-system][system]
|
118 | - [Rebass Grid][]
|
119 | - [styled-components][sc]
|
120 | - [emotion][emotion]
|
121 |
|
122 | [system]: https://github.com/jxnblk/styled-system
|
123 | [Rebass Grid]: https://github.com/rebassjs/grid
|
124 | [sc]: https://github.com/styled-components/styled-components
|
125 | [emotion]: https://github.com/emotion-js/emotion
|
126 |
|
127 | #### v1.0.7
|
128 |
|
129 | For the previous version of Rebass see the [v1.0.7](https://github.com/jxnblk/rebass/tree/v1.0.7) branch.
|
130 |
|
131 | ---
|
132 |
|
133 | [Contributing](.github/CONTRIBUTING.md)
|
134 | |
|
135 | [MIT License](.github/LICENSE.md)
|
136 |
|