Merge 73f4eb7 into 5cc4575

helpscout · May 3, 2018 · 11c9114 · 11c9114
2 parents 5cc4575 + 73f4eb7
commit 11c9114
Show file tree

Hide file tree

Showing 7 changed files with 304 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 > A simple way to include CSS with React Components.
 
-* **Tiny**, at less than 850 bytes gzipped
+* **Tiny**, at less than 1 KB gzipped
 * **Only one dependency - ([Stylis](https://github.com/thysultan/stylis.js))**
 * **Write plain ol' CSS.** Period.
 * **Built-in pre-processing** when you need it. Powered by [Stylis](https://github.com/thysultan/stylis.js).
@@ -18,57 +18,11 @@ npm install --save @helpscout/fancy
 
 ## 🕹 Usage
 
-#### Step 1: Import `withStyles` from Fancy
+Here's a quick example of how you can compose regular CSS with your React components.
 
 ```jsx
 import React from 'react'
-import { withStyles } from '@helpscout/fancy'
-```
-
-
-#### Step 2: Define your styles
-
-Write your CSS styles as a string. This is default out-of-the-box CSS. Use things like `:hover`, `@media` queries, as you normally would!
-
-```jsx
-const css = `
-  .Button {
-    background: white;
-    border: 1px solid #eee;
-  }
-`
-```
-
-Note: You can of course use string interpolation. It's still JS after all!
-
-
-#### Step 3: Create your component
-
-Create your component as you normally would.
-
-```jsx
-const Button = props => (
-  <button className='Button' {...props} />
-)
-```
-
-Note: The reference the CSS `className` to match the CSS you wrote. Fancy does not generated uniquely hashed classNames for you. See [CSS Modules](https://github.com/css-modules/css-modules) for that feature.
-
-
-#### Step 4: Compose your CSS with your component
-
-When exporting your component, compose it with the `withStyles` higher-order component along with your CSS styles.
-
-```jsx
-export default withStyles(css)(Button)
-```
-
-
-#### Final code
-
-```jsx
-import React from 'react'
-import { withStyles } from '@helpscout/fancy'
+import fancy from '@helpscout/fancy'
 
 const css = `
   .Button {
@@ -81,48 +35,10 @@ const Button = props => (
   <button className='Button' {...props} />
 )
 
-export default withStyles(css)(Button)
+export default fancy(css)(Button)
 ```
 
-#### Results
 
-```html
-<html>
-  <head>
-    <style type='text/css'>
-    .Button {
-      background: white;
-      border: 1px solid #eee;
-    }
-    </style>
-  </head>
-  <body>
-    ...
-    <button class='Button'>Button</button>
-    ...
-  </body>
-</html>
-```
-
-That's it! You're done 🙌. You've created a CSS-ready component.
-
-
-### Dynamic styles
-
-You can define dynamic styles by passing a `function` into `withStyles`. It will have access to a component's `props`, allowing you to define custom rules for various `prop` values.
-
-#### Example
-
-```jsx
-const Card = props => (<div {...props} />)
-const css = (props) => `
-  div {
-    background: ${props.title ? 'red' : 'blue'};
-    position: relative;
-    border: 1px solid black;
-  }
-`
-const StyledCard = withStyles(css)(Card)
-```
+## 📘 Documentation
 
-This technique is similar to the ones found in [Styled Components](https://www.styled-components.com/).
+[View the docs](./docs/) to get started with Fancy!
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,5 @@
+# Documentation
+
+* [Getting Started](./getting-started.md)
+* [Dynamic Styles](./dynamic-styles.md)
+* [Nesting](./nesting.md)
diff --git a/docs/dynamic-styles.md b/docs/dynamic-styles.md
@@ -0,0 +1,26 @@
+# Dynamic styles
+
+In this guide, we're going to be making our CSS styles dynamic, based on your React component's props.
+
+This technique is similar to the ones found in [Styled Components](https://www.styled-components.com/).
+
+You can define dynamic styles by passing a `function` into `fancy`. It will have access to a component's `props`, allowing you to define custom rules for various `prop` values.
+
+### Example
+
+```jsx
+const Card = props => (<div {...props} />)
+const css = (props) => `
+  div {
+    background: ${props.title ? 'red' : 'blue'};
+    position: relative;
+    border: 1px solid black;
+  }
+`
+const StyledCard = fancy(css)(Card)
+```
+
+
+### 🤔 How does it work…
+
+Under the hood, Fancy does a `diff` check in it's virtual Stylesheet (not unlike how React handles VDOM diffing) every time a [component updates](https://reactjs.org/docs/react-component.html#componentdidupdate). If an update occurs, it regenerates the style rules and re-injects it into the document stylesheet.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -0,0 +1,91 @@
+# Getting Started
+
+In this guide, we're going to be "fancifying" a React component with some basic CSS styles.
+
+### Step 1: Import Fancy
+
+```jsx
+import React from 'react'
+import fancy from '@helpscout/fancy'
+```
+
+
+### Step 2: Define your styles
+
+Write your CSS styles as a string. This is default out-of-the-box CSS. Use things like `:hover`, `@media` queries, as you normally would!
+
+```jsx
+const css = `
+  .Button {
+    background: white;
+    border: 1px solid #eee;
+  }
+`
+```
+
+Note: You can of course use string interpolation. It's still JS after all!
+
+
+### Step 3: Create your component
+
+Create your component as you normally would.
+
+```jsx
+const Button = props => (
+  <button className='Button' {...props} />
+)
+```
+
+Note: The reference the CSS `className` to match the CSS you wrote. Fancy does not generated uniquely hashed classNames for you. See [CSS Modules](https://github.com/css-modules/css-modules) for that feature.
+
+
+### Step 4: Compose your CSS with your component
+
+When exporting your component, compose it with the `fancy` higher-order component along with your CSS styles.
+
+```jsx
+export default fancy(css)(Button)
+```
+
+
+### Final code
+
+```jsx
+import React from 'react'
+import fancy from '@helpscout/fancy'
+
+const css = `
+  .Button {
+    background: white;
+    border: 1px solid #eee;
+  }
+`
+
+const Button = props => (
+  <button className='Button' {...props} />
+)
+
+export default fancy(css)(Button)
+```
+
+### Results
+
+```html
+<html>
+  <head>
+    <style type='text/css'>
+    .Button {
+      background: white;
+      border: 1px solid #eee;
+    }
+    </style>
+  </head>
+  <body>
+    ...
+    <button class='Button'>Button</button>
+    ...
+  </body>
+</html>
+```
+
+That's it! You're done 🙌. You've created a CSS-ready component.
diff --git a/docs/nesting.md b/docs/nesting.md
@@ -0,0 +1,30 @@
+# Nesting
+
+Fancy comes with [stylis](https://github.com/thysultan/stylis.js), a tiny CSS pre-processor. This (amazing) little library provides nifty features like nesting, similar to what you'd get with Less or Sass.
+
+
+### Example
+
+```jsx
+const css = `
+  .Card {
+    background: white;
+    position: relative;
+    border: 1px solid black;
+
+    &__block {
+      padding: 20px;
+    }
+  }
+`
+
+const Card = props => (
+  <div className='Card'>
+    <div className='Card__block'>
+      {props.children}
+    </div>
+  </div>
+)
+
+const StyledCard = fancy(css)(Card)
+```