Merge branch 'release/1.0.0-alpha.6'

studiometa · Feb 3, 2020 · 8650ec2 · 8650ec2
2 parents 80a78f1 + b0412a9
commit 8650ec2
Show file tree

Hide file tree

Showing 9 changed files with 244 additions and 74 deletions.
diff --git a/docs/.vuepress/components/Preview.vue b/docs/.vuepress/components/Preview.vue
@@ -5,7 +5,7 @@
     </div>
     <div
       :style="{
-        height: `${iframeHeight * iframeScale}px`
+        height: `${iframeHeight}px`
       }">
       <div class="preview__loader" v-if="isLoading" />
       <iframe
@@ -68,14 +68,6 @@ import { log } from 'util';
         `;
       },
     },
-    watch: {
-      /**
-       * Update the iframe sizes when the iframe scale changes
-       */
-      iframeScale() {
-        this.setIframeHeight();
-      },
-    },
     async mounted() {
       // Get the content before anything
       this.styles = await this.getStyles();

diff --git a/docs/plugins/debug-outline.md b/docs/plugins/debug-outline.md
@@ -1,3 +1,75 @@
+---
+sidebar: auto
+prev: false
+next: ./grid.html
+---
+
 # Debug Outline
 
-@todo
+The debug outline plugins helps you visualise you HTML structure by adding colored outlines to all of them.
+
+## Configuration
+
+The plugin can be configured with the `theme.debugOutline` property:
+
+```js{3}
+module.exports = {
+  theme: {
+    debugOutline: false,
+  },
+};
+```
+
+### `debugOutline`
+
+- Type: `Boolean`
+- Default: `false`
+
+Whether the plugin is active or not.
+
+## Examples
+
+<Preview>
+  <div class="debug">
+    <div class="grid">
+      <div class="grid-row mb-2">
+        <div class="grid-col-3">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">3</div>
+        </div>
+        <div class="grid-col-3">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">3</div>
+        </div>
+        <div class="grid-col-3">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">3</div>
+        </div>
+        <div class="grid-col-3">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">3</div>
+        </div>
+      </div>
+      <div class="grid-row mb-2">
+        <div class="grid-col-4">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">4</div>
+        </div>
+        <div class="grid-col-4">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">4</div>
+        </div>
+        <div class="grid-col-4">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">4</div>
+        </div>
+      </div>
+      <div class="grid-row mb-2">
+        <div class="grid-col-6">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">6</div>
+        </div>
+        <div class="grid-col-6">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">6</div>
+        </div>
+      </div>
+      <div class="grid-row mb-2">
+        <div class="grid-col-12">
+          <div class="h-4 text-grey-600 bg-white flex items-center justify-center">12</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</Preview>
diff --git a/docs/plugins/grid.md b/docs/plugins/grid.md
@@ -1,14 +1,111 @@
 ---
 sidebar: auto
+prev: ./debug-outline.html
+next: ./typography.html
 ---
 
 # Grid
 
-@todo introduction
+The grid plugin creates component classes to easily work with a 12 columns layout.
+
+## Configuration
+
+The plugin can be configured with the `theme.gridPlugin` property:
+
+```js{3-7}
+module.exports = {
+  theme: {
+    gridPlugin: {
+      columns: 12,
+      gutterWidth: 1,
+      gutterUnit: 'rem',
+    },
+  },
+};
+```
+
+### `columns`
+
+- Type: `Number`
+- Default: `12`
+
+The total number of columns.
+
+### `gutterWidth`
+
+- Type: `[ Number, String, Object ]`
+- Default: `1`
+
+The width of the grid's gutters provided as a **unitless number**. You can configure different widths per breakpoint by providing an object with the following schema:
+
+```js
+{
+  default: <value>,
+  ...<screen>: <value,
+}
+```
+
+The following configuration...
+
+```js
+module.exports = {
+  theme: {
+    screens: {
+      s: '600px',
+      m: '1200px',
+      l: '1800px',
+    },
+    gridPlugin: {
+      gutterWidth: {
+        default: 2,
+        m: 4,
+      },
+    },
+  },
+};
+```
+...would generate a grid component with gutters of size `2` for viewports from `0` to `1200px` and of size `4` for viewports from `1200px` and up.
+
+### `gutterUnit`
+
+- Type: `String`
+- Default: `'rem'`
+
+The CSS unit used for the gutters.
 
 ## Classes
 
-@todo
+### Container
+
+|       Class       | Description | Variants |
+|-------------------|-------------|----------|
+| `.grid`           | @todo       | `[]`     |
+| `.grid-nested`    | @todo       | `[]`     |
+| `.grid-no-gutter` | @todo       | `[]`     |
+
+### Row
+
+|        Class        | Description |   Variants   |
+|---------------------|-------------|--------------|
+| `.grid-row`         | @todo       | `responsive` |
+| `.grid-row-start`   | @todo       | `responsive` |
+| `.grid-row-center`  | @todo       | `responsive` |
+| `.grid-row-end`     | @todo       | `responsive` |
+| `.grid-row-stretch` | @todo       | `responsive` |
+
+### Columns
+
+|        Class         | Description |   Variants   |
+|----------------------|-------------|--------------|
+| `.grid-pull-<count>` | @todo       | `responsive` |
+| `.grid-push-<count>` | @todo       | `responsive` |
+| `.grid-col-<count>`  | @todo       | `responsive` |
+| `.grid-col-center`   | @todo       | `responsive` |
+| `.grid-col-clear`    | @todo       | `responsive` |
+| `.grid-col-left`     | @todo       | `responsive` |
+| `.grid-col-no-clear` | @todo       | `responsive` |
+| `.grid-col-right`    | @todo       | `responsive` |
+
 
 ## Examples
 

diff --git a/docs/plugins/typography.md b/docs/plugins/typography.md
@@ -1,5 +1,7 @@
 ---
 sidebar: auto
+prev: ./grid.html
+next: false
 ---
 
 # Typography <Badge>Third party</Badge>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/tailwind-config",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "A custom Tailwind CSS config",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -16,6 +16,18 @@ module.exports = {
      */
     debugOutline: false,
 
+    /**
+     * Grid
+     */
+    gridPlugin: {
+      gutterWidth: {
+        default: 1,
+        s: 2,
+        l: 3,
+        xxl: 4,
+      },
+    },
+
     /**
      * Breakpoints
      */
@@ -167,17 +179,7 @@ module.exports = {
   },
   plugins: [
     require('./plugins/debug-outline')(),
-    require('./plugins/grid')({
-      gridGutters: {
-        default: '1',
-        xs: '1',
-        s: '2',
-        m: '2',
-        l: '3',
-        xl: '3',
-        xxl: '4',
-      },
-    }),
+    require('./plugins/grid')(),
     /**
      * Tailwind CSS typograpy plugin.
      * @see   https://github.com/benface/tailwindcss-typography

diff --git a/src/plugins/debug-outline.js b/src/plugins/debug-outline.js
@@ -3,9 +3,9 @@
  *
  * @package @studiometa/tailwind-config
  */
-module.exports = function debugOutline() {
-  return function addDebugOutlineBase({ addBase, theme }) {
-    if (theme('debugOutline')) {
+module.exports = function debugOutlinePluginFactory() {
+  return function debugOutlinePlugin({ addBase, theme }) {
+    if (theme('debugOutline', false)) {
       addBase([
         {
           '.debug': {