revised logo, updated readme, added preview

README.md

@@ -1,4 +1,6 @@
-## 👟 rbx – The Comprehensive Bulma UI Framework for React
+## rbx
+
+### The Comprehensive Bulma UI Framework for React
 
 [![Build Status](https://travis-ci.org/dfee/rbx.svg?branch=master)](https://travis-ci.org/dfee/rbx)
 [![Coverage Status](https://coveralls.io/repos/github/dfee/rbx/badge.svg?branch=master)](https://coveralls.io/github/dfee/rbx?branch=master)
@@ -7,15 +9,25 @@
 
 `rbx` is a comprehensive library of React components for [Bulma 0.7.2](http://bulma.io).
 
-🔥 **[Read the docs](https://dfee.github.io/rbx/stories)**.
-
+👟 **[Read the docs](https://dfee.github.io/rbx)**.
 🙃 _I'll wait, go check them out!_
 
-### To Install
+![A quick look](src/__docs__/public/demo.png?raw=true "A quick look")
+
+### Features
+
+- up-to-date Bulma implementation (0.7.2)
+- written with TypeScript 3 for React 16
+- well tested and documented
+- extensive customization support
+- _quite unopinionated, if you ask me_
+- **very simple to get started**
+
+### To install
 
 `npm install rbx` or `yarn add rbx`
 
-### To Use
+### To use
 
 ```tsx
 import "rbx/index.css";
@@ -32,63 +44,14 @@ export const MyPage = () => (
 );
 ```
 
-To customize Bulma (including colors), follow the instructions below.
-
-### Library
-
-All components support ref-forwarding, and are able to render as any other React Component Type you want to provide, by using the special prop `as`.
-For example, to render a `Button` component as a `react-router` `Link`:
-
-```tsx
-import { Button } from "rbx";
-import { Link } from "react-router-dom";
-
-export const goHomeLink = (
-  <Button as={Link} to="/home" color="primary" text>
-    Go home
-  </Button>
-);
-```
-
-### Customize Bulma
-
-To override the variables set by Bulma, install Bulma (`npm install [email protected]`), and [follow the Bulma instructions](https://bulma.io/documentation/customize/variables/).
-
-You will also need to import `rbx/dist/rbx.sass` as it contains any pertinent bug fixes for Bulma.
-
-A minimal example of `App.sass` might look like:
-
-```sass
-$primary: #61dafb
-
-@import "~rbx/dist/index.sass"
-```
-
-Or, for further customization;
-
-```sass
-$primary: #61dafb
-
-@import "~bulma/bulma.sass" // alternatively, select which parts to include.
-@import "~rbx/dist/rbx.sass"
-```
-
-Then, import this file somewhere in your project.
-
-#### Create React App
+Documentation for all the components, information on customization, a defense of design, and more is available at the [canonical rbx documentation](https://dfee.github.io/rbx)
 
-Create React App 2 supports SASS compilation out of the box.
+### License
 
-To get started, please follow the [official instructions](https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet) to enable this feature.
+**rbx** is available under the [MIT License](https://opensource.org/licenses/MIT).
 
-Then, create a SASS file in your project (as described above):
-
-Finally, import this stylesheet somewhere in your CRA app.
-
-```js
-import "./App.sass";
-```
+The sneaker logo is a modified version of the [Twitter Twemoji](https://github.com/twitter/twemoji) _running shoe_ under the [Creative Commons Attribution License](https://creativecommons.org/licenses/by/4.0/).
 
-#### Prior Art
+### Prior Art
 
 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.

doczrc.js

@@ -1,17 +1,16 @@
-// https://www.docz.site/documentation/project-configuration
-
 const path = require("path");
 
+// https://www.docz.site/documentation/project-configuration
 export default {
   base: "/rbx",
   // unfortnately, "too-many-modules"
   // https://github.com/codesandbox/codesandboxer/blob/af013874f5a2f7bb6325c9608597883a8f5061ef/packages/codesandboxer-fs/src/assembleFiles.js#L120
   codeSandbox: false,
   description:
     "The Comprehensive Bulma UI Framework for React. This is a lightweight, yet robust, React framework that enables rapid, beautiful web development.",
-  files: "**/*(.docs)?*.mdx",
+  files: "**/[^_]*(.docs)?*.mdx",
   htmlContext: {
-    favicon: "/rbx/public/favicon.ico"
+    favicon: "/rbx/public/favicon.ico",
   },
   indexHtml: "src/__docs__/index.html",
   modifyBundlerConfig: config => {
@@ -20,7 +19,7 @@ export default {
     config.entry.app.push("src/index.sass");
     config.module.rules.push({
       test: /\.s[ac]ss$/,
-      use: ["style-loader", "css-loader", "sass-loader"]
+      use: ["style-loader", "css-loader", "sass-loader"],
     });
 
     return config;
@@ -40,20 +39,24 @@ export default {
       negative: "#121212",
       blue: "#3273dc",
       skyBlue: "#209cee",
-      primary: "#00d1b2",
+      primary: "#3273dc",
       codeColor: "#ff3860",
       codeBg: "#f5f5f5",
       sidebarBg: "#f5f5f5",
       text: "#4a4a4a",
-      link: "#3273dc"
+      link: "#3273dc",
+    },
+    logo: {
+      src: "/rbx/public/logo-wide.svg",
+      width: "150px",
     },
     styles: {
       code: {
         fontFamily: "monospace",
-        padding: "0.25em 0.5em"
-      }
-    }
+        padding: "0.25em 0.5em",
+      },
+    },
   },
-  title: "👟 rbx",
-  typescript: true
+  title: "rbx",
+  typescript: true,
 };

rbx.code-workspace

@@ -0,0 +1,7 @@
+{
+  "folders": [
+    {
+      "path": "."
+    }
+  ]
+}