removed module level sass in favor of bulma's sass

.size-snapshot.json

@@ -1,8 +1,8 @@
 {
   "dist/index.js": {
-    "bundled": 72221,
-    "minified": 45551,
-    "gzipped": 8795
+    "bundled": 73287,
+    "minified": 45857,
+    "gzipped": 8819
   },
   "dist/index.es.js": {
     "bundled": 71172,
@@ -24,16 +24,16 @@
     "gzipped": 8795
   },
   "es/index.js": {
-    "bundled": 71172,
-    "minified": 44647,
-    "gzipped": 8559,
+    "bundled": 72211,
+    "minified": 44928,
+    "gzipped": 8581,
     "treeshaked": {
       "rollup": {
-        "code": 34514,
+        "code": 34782,
         "import_statements": 72
       },
       "webpack": {
-        "code": 36947
+        "code": 37221
       }
     }
   }

.storybook/config.ts

@@ -1,4 +1,3 @@
-import { withInfo } from "@storybook/addon-info";
 import { withKnobs } from "@storybook/addon-knobs";
 import { setOptions } from "@storybook/addon-options";
 import {
@@ -7,15 +6,16 @@ import {
 } from "@storybook/addon-viewport";
 import { addDecorator, configure } from "@storybook/react";
 
-import "../src/index.module.sass";
+import "./storybook.sass";
 
 // addon-info is currently broken with prop types
-addDecorator(
-  withInfo({
-    // propTables: false,
-    source: false,
-  }),
-);
+// import { withInfo } from "@storybook/addon-info";
+// addDecorator(
+//   withInfo({
+//     // propTables: false,
+//     source: false,
+//   }),
+// );
 
 setOptions({
   name: "👟 rbx - Bulma UI",

.storybook/storybook.sass

@@ -0,0 +1,2 @@
+@import "~bulma/bulma.sass"
+@import "../src/index.sass"

README.md

@@ -21,25 +21,11 @@ Follow the instructions below for adding `sass` support to your webpack configur
 
 ```tsx
 import React from "react";
-/**
- * You can import directly from rbx
- * (you will need to include the css file dist/rbx.min.css)
- */
 import { Columns } from "rbx";
-
 /**
- * You can also include the js that also bundles the css
- * (does not work with server-side rendering)
+ * Alternatively, you can import only the components you need
  */
-import { Columns } from "rbx/lib/columns";
-
-/**
- * [RECOMENDED] Or import only the components you will use
- * (this will reduce your total bundle size)
- * If you use this approach and want to use the global Bulma styles,
- * import rbx/src/index.sass and configure webpack to handle sass files
- */
-import Columns from "rbx/lib/components/columns";
+import { Columns } from "rbx/grid/columns";
 
 export const MyPage = () => (
   <Columns>
@@ -130,98 +116,39 @@ While some components may slightly differ from the Bulma API, these changes are
 | Hero    | [Stories](https://dfee.github.io/rbx/?selectedKind=Layout%2FHero)    | [Documentation](http://bulma.io/documentation/layout/hero/)    |
 | Section | [Stories](https://dfee.github.io/rbx/?selectedKind=Layout%2FSection) | [Documentation](http://bulma.io/documentation/layout/section/) |
 
-### Overriding Bulma variables
+### Styling
 
-#### General
+#### SASS Support
 
-To override the variables set by Bulma you will need to create a sass file like this one (\_variable.sass):
+To override the variables set by Bulma, [follow the Bulma instructions](https://bulma.io/documentation/customize/variables/).
 
-```sass
-@import "~bulma/sass/utilities/initial-variables"
+You will also need to import `rbx/index.sass` as it contains any pertinent bug fixes for Bulma.
 
-// ADD HERE variables you want to override
-$primary: #f4f4f4
+A minimal example of `style.sass` might look like:
 
-@import "~bulma/sass/utilities/_all"
-```
-
-It may be necessary, depending on your project setup, to create this file, even if you do not intend on overriding default styles.
-
-After that you will need to add an alias pointing to the file to your webpack configuration
+```sass
+$primary: #61dafb
 
+@import "~bulma/bulma.sass"
+@import "../src/index.sass"
 ```
-resolve {
-  // Other resolve props
-  alias: {
-    // Other aliases
-    '_variables.sass': path.resolve(__dirname, 'relative/path/from/webpack/config/to/your/_variables.sass'),
-  },
-}
 
-```
+Then, import this file into the root of your project.
 
 #### Create React App
 
 Create React App 2 supports SASS compilation out of the box.
 
 To get started, please follow the [official instructions](https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet) to enable this feature.
 
-Then, create a SASS file in your project with the following code:
-
-```sass
-// Any Bulma variables I want to override go here...
-$family-sans-serif: 'Overpass', sans-serif
-
-@import '~rbx/src/index.module.sass'
-```
+Then, create a SASS file in your project (as described above):
 
 Finally, import this stylesheet somewhere in your CRA app.
 
 ```js
 import "./App.sass";
 ```
 
-#### Gatsby.js v1
-
-Add a `modifyWebpackConfig` export to your `gatsby-node.js` file:
-
-```
-exports.modifyWebpackConfig = ({config, env}) => {
-  config.merge({
-    resolve: {
-      alias: {
-        '_variables.sass': path.resolve(__dirname, 'relative/path/from/webpack/config/to/your/_variables.sass')
-      }
-    }
-  })
-  return config
-}
-```
-
-#### Gatsby.js v2
-
-Add a `onCreateWebpackConfig` export to your `gatsby-node.js` file:
-
-```
-const path = require('path')
-
-exports.onCreateWebpackConfig = ({
-  stage,
-  getConfig,
-  rules,
-  loaders,
-  actions,
-}) => {
-  actions.setWebpackConfig({
-    resolve: {
-      alias: {
-        '_variables.sass': path.resolve(__dirname, 'relative/path/from/webpack/config/to/your/_variables.sass'),
-      },
-    },
-  })
-}
-```
-
 #### Etc.
 
 This library was hard-forked from [`react-bulma-components`](https://github.com/couds/react-bulma-components) and has been rewritten in its entirety from scratch.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rbx",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "The Comprehensive Bulma UI Framework for React",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,10 +45,10 @@
   },
   "homepage": "https://github.com/dfee/rbx#readme",
   "dependencies": {
-    "bulma": "0.7.2",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
+    "bulma": "0.7.2",
     "react": "^16.3.0",
     "react-dom": "^16.3.0"
   },
@@ -81,6 +81,7 @@
     "@types/storybook__react": "^4.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.4",
+    "bulma": "0.7.2",
     "coveralls": "3.0.2",
     "cpx": "^1.5.0",
     "css-loader": "2.0.0",

src/components/breadcrumb/index.ts

@@ -1,3 +1 @@
-import "./breadcrumb.module.sass";
-
 export { Breadcrumb } from "./breadcrumb";

src/components/card/index.ts

@@ -1,3 +1 @@
-import "./card.module.sass";
-
 export { Card } from "./card";

src/components/dropdown/index.ts

@@ -1,3 +1 @@
-import "./dropdown.module.sass";
-
 export { Dropdown } from "./dropdown";

src/components/level/index.ts

@@ -1,3 +1 @@
-import "./level.module.sass";
-
 export { Level } from "./level";

src/components/list/index.ts

@@ -1,3 +1 @@
-import "./list.module.sass";
-
 export { List } from "./list";

src/components/media/index.ts

@@ -1,3 +1 @@
-import "./media.module.sass";
-
 export { Media } from "./media";

src/components/menu/index.ts

@@ -1,3 +1 @@
-import "./menu.module.sass";
-
 export { Menu } from "./menu";

src/components/message/index.ts

@@ -1,3 +1 @@
-import "./message.module.sass";
-
 export { Message } from "./message";

src/components/modal/index.ts

@@ -1,3 +1 @@
-import "./modal.module.sass";
-
 export { Modal } from "./modal";

src/components/navbar/index.ts

@@ -1,2 +1 @@
-import "./navbar.module.sass";
 export { Navbar } from "./navbar";

src/components/pagination/index.ts

@@ -1,3 +1 @@
-import "./pagination.module.sass";
-
 export { Pagination } from "./pagination";

src/components/panel/index.ts

@@ -1,3 +1 @@
-import "./panel.module.sass";
-
 export { Panel } from "./panel";

src/components/tabs/index.ts

@@ -1,3 +1 @@
-import "./tabs.module.sass";
-
 export { Tabs } from "./tabs";

src/elements/box/index.ts

@@ -1,3 +1 @@
-import "./box.module.sass";
-
 export { Box } from "./box";

src/elements/button/index.ts

@@ -1,3 +1 @@
-import "./button.module.sass";
-
 export { Button } from "./button";

src/elements/container/index.ts

@@ -1,3 +1 @@
-import "./container.module.sass";
-
 export { Container } from "./container";