77
88` rbx ` is a comprehensive library of React components for [ Bulma 0.7.2] ( http://bulma.io ) .
99
10- π₯ ** All components have exhaustive ** [ storybook examples ] ( https://dfee.github.io/rbx ) .
10+ π₯ ** [ Read the docs ] ( https://dfee.github.io/rbx/stories ) ** .
1111
1212π _ I'll wait, go check them out!_
1313
@@ -50,76 +50,13 @@ export const goHomeLink = (
5050);
5151```
5252
53- For styling, each component imports its own sass file.
54- Thus, you can reduce your css total file size by only including the styles that you will use.
55- To enable this, configure your [ Webpack] ( https://webpack.github.io/ ) to handle sass files.
56-
57- While some components may slightly differ from the Bulma API, these changes are usually minimal.
58-
59- #### Base
60-
61- | Item | Storybook | Bulma Documentation |
62- | ------- | -------------------------------------------------------------------- | ------------------- |
63- | Generic | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Extras%2FGeneric ) | N/A |
64-
65- #### Components
66-
67- | Item | Storybook | Bulma Documentation |
68- | ---------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
69- | Breadcrumb | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FBreadcrumb ) | [ Documentation] ( http://bulma.io/documentation/components/breadcrumb/ ) |
70- | Card | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FCard ) | [ Documentation] ( http://bulma.io/documentation/components/card/ ) |
71- | Dropdown | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FDropdown ) | [ Documentation] ( http://bulma.io/documentation/components/dropdown/ ) |
72- | Level | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FLevel ) | [ Documentation] ( http://bulma.io/documentation/layout/level/ ) |
73- | List | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FList ) | [ Documentation] ( http://bulma.io/documentation/components/list/ ) |
74- | Media | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FMedia ) | [ Documentation] ( http://bulma.io/documentation/layout/media-object/ ) |
75- | Menu | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FMenu ) | [ Documentation] ( http://bulma.io/documentation/components/menu/ ) |
76- | Message | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FMessage ) | [ Documentation] ( http://bulma.io/documentation/components/message/ ) |
77- | Modal | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FModal ) | [ Documentation] ( http://bulma.io/documentation/components/modal/ ) |
78- | Navbar | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FNavbar ) | [ Documentation] ( https://bulma.io/documentation/components/navbar/ ) |
79- | Pagination | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FPagination ) | [ Documentation] ( https://bulma.io/documentation/components/pagination/ ) |
80- | Panel | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FPanel ) | [ Documentation] ( https://bulma.io/documentation/components/panel/ ) |
81- | Tabs | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Components%2FTabs ) | [ Documentation] ( https://bulma.io/documentation/components/tabs/ ) |
82-
83- #### Elements
84-
85- | Item | Storybook | Bulma Documentation |
86- | ------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------- |
87- | Box | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FBox ) | [ Documentation] ( http://bulma.io/documentation/elements/box/ ) |
88- | Button | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FButton ) | [ Documentation] ( http://bulma.io/documentation/elements/button/ ) |
89- | Container | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FContainer ) | [ Documentation] ( http://bulma.io/documentation/layout/container/ ) |
90- | Content | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FContent ) | [ Documentation] ( http://bulma.io/documentation/elements/content/ ) |
91- | Form | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FForm ) | [ Documentation] ( http://bulma.io/documentation/form/general/ ) |
92- | Icon | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FIcon ) | [ Documentation] ( http://bulma.io/documentation/elements/icon/ ) |
93- | Image | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FImage ) | [ Documentation] ( http://bulma.io/documentation/elements/image/ ) |
94- | Notification | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FNotification ) | [ Documentation] ( http://bulma.io/documentation/elements/notification/ ) |
95- | Other | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FOther ) | N/A |
96- | Progress | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FProgress ) | [ Documentation] ( http://bulma.io/documentation/elements/progress/ ) |
97- | Table | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FTable ) | [ Documentation] ( http://bulma.io/documentation/elements/table/ ) |
98- | Tag | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FTag ) | [ Documentation] ( http://bulma.io/documentation/elements/tag/ ) |
99- | Title | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Elements%2FTitle ) | [ Documentation] ( http://bulma.io/documentation/elements/title/ ) |
100-
101- #### Grid
102-
103- | Item | Storybook | Bulma Documentation |
104- | ------- | ------------------------------------------------------------------ | ------------------------------------------------------------ |
105- | Columns | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Grid%2FColumns ) | [ Documentation] ( http://bulma.io/documentation/columns/ ) |
106- | Tiles | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Grid%2FTiles ) | [ Documentation] ( http://bulma.io/documentation/layout/tiles/ ) |
107-
108- #### Layout
109-
110- | Item | Storybook | Bulma Documentation |
111- | ------- | -------------------------------------------------------------------- | -------------------------------------------------------------- |
112- | Footer | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Layout%2FFooter ) | [ Documentation] ( http://bulma.io/documentation/layout/footer/ ) |
113- | Hero | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Layout%2FHero ) | [ Documentation] ( http://bulma.io/documentation/layout/hero/ ) |
114- | Section | [ Stories] ( https://dfee.github.io/rbx/?selectedKind=Layout%2FSection ) | [ Documentation] ( http://bulma.io/documentation/layout/section/ ) |
115-
11653### Customize Bulma
11754
11855To override the variables set by Bulma, install Bulma (` npm install bulma@0.7.2 ` ), and [ follow the Bulma instructions] ( https://bulma.io/documentation/customize/variables/ ) .
11956
12057You will also need to import ` rbx/rbx.sass ` as it contains any pertinent bug fixes for Bulma.
12158
122- A minimal example of ` style .sass` might look like:
59+ A minimal example of ` App .sass` might look like:
12360
12461``` sass
12562$primary: #61dafb
@@ -128,7 +65,7 @@ $primary: #61dafb
12865@import "../src/index.sass"
12966```
13067
131- Then, import this file into the root of your project.
68+ Then, import this file somewhere in your project.
13269
13370#### Create React App
13471
@@ -143,3 +80,7 @@ Finally, import this stylesheet somewhere in your CRA app.
14380``` js
14481import " ./App.sass" ;
14582```
83+
84+ #### Prior Art
85+
86+ This package was forked from [ ` react-bulma-components ` ] ( https://github.com/couds/react-bulma-components` ) , and re-written in its entirety to support the latest version of Bulma, use TypeScript, and fix many outstanding bugs.
0 commit comments