Grid documentation for the Styleguide

styleguide.config.js

@@ -4,6 +4,11 @@ const fileExistsCaseInsensitive = require('react-styleguidist/scripts/utils/find
 
 module.exports = {
   assetsDir: 'styleguide',
+  compilerConfig: {
+    transforms: {
+      dangerousTaggedTemplateString: true,
+    },
+  },
   getExampleFilename(componentPath) {
     const examplePath = path.join(__dirname, 'styleguide', 'examples', `${path.parse(componentPath).name}.md`);
     const existingFile = fileExistsCaseInsensitive(examplePath);
@@ -12,10 +17,41 @@ module.exports = {
     }
     return false;
   },
+  pagePerSection: true,
+  sections: [
+    {
+      name: 'UI',
+      content: 'styleguide/pages/UI.md',
+      components: 'src/components/*.js',
+    },
+    {
+      name: 'Grid',
+      content: 'styleguide/pages/Grid.md',
+      sections: [
+        {
+          name: 'Box',
+          content: 'styleguide/examples/Box.md',
+        },
+        {
+          name: 'Flex',
+          content: 'styleguide/examples/Flex.md',
+        },
+      ],
+    },
+  ],
   skipComponentsWithoutExample: true,
   styleguideComponents: {
     Wrapper: path.join(__dirname, 'styleguide/ThemeWrapper'),
   },
+  styles: {
+    Blockquote: {
+      blockquote: {
+        borderLeft: '3px solid grey',
+        margin: '16px 0',
+        padding: '0 32px',
+      },
+    },
+  },
   title: 'Open Collective Frontend Style Guide',
   usageMode: 'expand',
   webpackConfig: createConfig([babel()]),

styleguide/examples/Box.md

@@ -0,0 +1,76 @@
+[See `@rebass/grid` docs for more info](https://www.npmjs.com/package/@rebass/grid#box)
+
+Using fractions to set percentage width:
+
+```js
+const { default: styled } = require('styled-components');
+const { Box } = require('@rebass/grid');
+const { P } = require('../../src/components/Text');
+const Block = styled(Box)`
+  border: 1px solid black;
+`;
+
+<React.Fragment>
+  <Block width={1/4} mb={3} p={2}>
+    <P>width: 25%;</P>
+  </Block>
+  <Block width={1/3} mb={3} p={2}>
+    <P>width: 33%;</P>
+  </Block>
+  <Block width={1/2} mb={3} p={2}>
+    <P>width: 50%;</P>
+  </Block>
+  <Block width={3/4} mb={3} p={2}>
+    <P>width: 75%;</P>
+  </Block>
+</React.Fragment>
+```
+
+Using fixed pixel width:
+```js
+const { default: styled } = require('styled-components');
+const { Box } = require('@rebass/grid');
+const { P } = require('../../src/components/Text');
+const Block = styled(Box)`
+  border: 1px solid black;
+`;
+
+<React.Fragment>
+  <Block width={200} mx="auto" p={2}>
+    <P>width: 200px; margin: 0 auto;</P>
+  </Block>
+</React.Fragment>
+```
+
+Using relative unit widths:
+```js
+const { default: styled } = require('styled-components');
+const { Box } = require('@rebass/grid');
+const { P } = require('../../src/components/Text');
+const Block = styled(Box)`
+  border: 1px solid black;
+`;
+
+<React.Fragment>
+  <Block width="20rem" mx="auto" p={2}>
+    <P>width: 20rem; margin: 0 auto;</P>
+  </Block>
+</React.Fragment>
+```
+
+Set responsive width using an array of values, works for padding and margin props as well:
+
+```js
+const { default: styled } = require('styled-components');
+const { Box } = require('@rebass/grid');
+const { P } = require('../../src/components/Text');
+const Block = styled(Box)`
+  border: 1px solid black;
+`;
+
+<React.Fragment>
+  <Block width={[1, 1/2, 1/4]} mx="auto" p={2}>
+    <P>width: responsive; margin: 0 auto;</P>
+  </Block>
+</React.Fragment>
+```

styleguide/examples/Flex.md

@@ -0,0 +1,81 @@
+[See `@rebass/grid` docs for more info](https://www.npmjs.com/package/@rebass/grid#flex)
+
+
+The `<Flex />` component extends the `<Box />` with `display: flex` on by default;
+```js
+const { Box, Flex } = require('@rebass/grid');
+const { default: styled } = require('styled-components');
+const { P } = require('../../src/components/Text');
+const Block = styled(Box)`
+  border: 1px solid black;
+`;
+
+<Flex>
+  <Block width={1} p={2}>
+    <P>width: 100%;</P>
+  </Block>
+  <Block width={1} p={2}>
+    <P>width: 100%;</P>
+  </Block>
+</Flex>
+```
+
+Use any of the flexbox style props: `alignItems`, `justifyContent`, `flexDirection`, `flexWrap`:
+
+```js
+const { Box, Flex } = require('@rebass/grid');
+const { default: styled } = require('styled-components');
+const { P } = require('../../src/components/Text');
+const Block = styled(Box)`
+  border: 1px solid black;
+`;
+
+
+<React.Fragment>
+  <P>flexDirection: column</P>
+  <Flex flexDirection="column" mb={5}>
+    <Block width={1} p={2}>
+      <P>width: 100%;</P>
+    </Block>
+    <Block width={1} p={2}>
+      <P>width: 100%;</P>
+    </Block>
+  </Flex>
+
+  <P>flexWrap: wrap</P>
+  <Flex flexWrap="wrap" mb={5}>
+    <Block width={1/2} p={2}>
+      <P>width: 25%;</P>
+    </Block>
+    <Block width={1/2} p={2}>
+      <P>width: 25%;</P>
+    </Block>
+    <Block width={1/2} p={2}>
+      <P>width: 25%;</P>
+    </Block>
+    <Block width={1/2} p={2}>
+      <P>width: 25%;</P>
+    </Block>
+  </Flex>
+
+  <P>alignItems: center</P>
+  <Flex alignItems="center" mb={5}>
+    <Block width={1/2} p={4}>
+      <P>width: 25%; padding: 32px;</P>
+    </Block>
+    <Block width={1/2} p={2}>
+      <P>width: 25%;</P>
+    </Block>
+  </Flex>
+
+  <P>justifyContent: space-between</P>
+  <Flex justifyContent="space-between">
+    <Block width={1/4} p={2}>
+      <P>width: 25%;</P>
+    </Block>
+    <Block width={1/4} p={2}>
+      <P>width: 25%;</P>
+    </Block>
+  </Flex>
+</React.Fragment>
+```

styleguide/pages/Grid.md

@@ -0,0 +1,11 @@
+For the layout of our pages and components, we use responsive grid system from [`@rebass/grid`](https://www.npmjs.com/package/@rebass/grid).
+
+> All @rebass/grid components use [styled-system](https://github.com/jxnblk/styled-system) for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.
+
+The [margin and padding props](https://www.npmjs.com/package/@rebass/grid#margin-and-padding-props) used the default spacing values (in pixels) from `@rebass/grid`:
+
+```md
+const spacing = [0, 4, 8, 16, 32, 64, 128, 256, 512];
+```
+
+

styleguide/pages/UI.md

@@ -0,0 +1 @@
+These are the core UI components.