Added missing 11 and 12 column grid documentation

aptuitiv · Dec 16, 2024 · d7f69b7 · d7f69b7
1 parent aab4e8a
commit d7f69b7
Show file tree

Hide file tree

Showing 3 changed files with 263 additions and 0 deletions.
diff --git a/docs/docs/styles/grid-column/eleven-column.mdx b/docs/docs/styles/grid-column/eleven-column.mdx
@@ -0,0 +1,126 @@
+---
+title: Grid columns - eleven column
+---
+
+This provides styles for an eleven-column grid.
+
+The following sizes are available:
+
+- col-1-11
+- col-2-11
+- col-3-11
+- col-4-11
+- col-5-11
+- col-6-11
+- col-7-11
+- col-8-11
+- col-9-11
+- col-10-11
+- col-11-11
+
+Each column size has a class to go with each of the [media query viewport sizes](/styles/media#viewport-media-queries). For example:
+
+```css
+col-1-11-3xs
+col-1-11-2xs
+col-1-11-xs
+col-1-11-sm
+col-1-11-md
+col-1-11-lg
+col-1-11-xl
+col-1-11-2xl
+col-1-11-3xl
+col-1-11-4xl
+col-1-11-5xl
+```
+
+## How to import into your CSS
+
+Import this into your CSS with:
+
+```css
+@import 'cacao-css/dist/grid-column/col-11.css';
+```
+
+Imports are available for all [media query viewport sizes](/styles/media#viewport-media-queries).
+
+```css
+@import 'cacao-css/dist/grid-column/3xs/col-11.css';
+@import 'cacao-css/dist/grid-column/2xs/col-11.css';
+@import 'cacao-css/dist/grid-column/xs/col-11.css';
+@import 'cacao-css/dist/grid-column/sm/col-11.css';
+@import 'cacao-css/dist/grid-column/md/col-11.css';
+@import 'cacao-css/dist/grid-column/lg/col-11.css';
+@import 'cacao-css/dist/grid-column/xl/col-11.css';
+@import 'cacao-css/dist/grid-column/2xl/col-11.css';
+@import 'cacao-css/dist/grid-column/3xl/col-11.css';
+@import 'cacao-css/dist/grid-column/4xl/col-11.css';
+@import 'cacao-css/dist/grid-column/5xl/col-11.css';
+```
+
+See [Import Cacao CSS](/import) for more information.
+
+## Source CSS
+
+<!-- markdownlint-disable -->
+import CodeBlock from '@theme/CodeBlock';
+import ImportsSource from '!!raw-loader!../../../../dist/grid-column/col-11.css';
+import ImportsSource3xs from '!!raw-loader!../../../../dist/grid-column/3xs/col-11.css';
+import ImportsSource2xs from '!!raw-loader!../../../../dist/grid-column/2xs/col-11.css';
+import ImportsSourceXs from '!!raw-loader!../../../../dist/grid-column/xs/col-11.css';
+import ImportsSourceSm from '!!raw-loader!../../../../dist/grid-column/sm/col-11.css';
+import ImportsSourceMd from '!!raw-loader!../../../../dist/grid-column/md/col-11.css';
+import ImportsSourceLg from '!!raw-loader!../../../../dist/grid-column/lg/col-11.css';
+import ImportsSourceXl from '!!raw-loader!../../../../dist/grid-column/xl/col-11.css';
+import ImportsSource2xl from '!!raw-loader!../../../../dist/grid-column/2xl/col-11.css';
+import ImportsSource3xl from '!!raw-loader!../../../../dist/grid-column/3xl/col-11.css';
+import ImportsSource4xl from '!!raw-loader!../../../../dist/grid-column/4xl/col-11.css';
+import ImportsSource5xl from '!!raw-loader!../../../../dist/grid-column/5xl/col-11.css';
+
+### Default styles
+
+<CodeBlock language="css" title="grid-column/col-11.css">{ImportsSource}</CodeBlock>
+
+### 3xs styles
+
+<CodeBlock language="css" title="grid-column/3xs/col-11.css">{ImportsSource3xs}</CodeBlock>
+
+### 2xs styles
+
+<CodeBlock language="css" title="grid-column/2xs/col-11.css">{ImportsSource2xs}</CodeBlock>
+
+### xs styles
+
+<CodeBlock language="css" title="grid-column/xs/col-11.css">{ImportsSourceXs}</CodeBlock>
+
+### sm styles
+
+<CodeBlock language="css" title="grid-column/sm/col-11.css">{ImportsSourceSm}</CodeBlock>
+
+### md styles
+
+<CodeBlock language="css" title="grid-column/md/col-11.css">{ImportsSourceMd}</CodeBlock>
+
+### lg styles
+
+<CodeBlock language="css" title="grid-column/lg/col-11.css">{ImportsSourceLg}</CodeBlock>
+
+### xl styles
+
+<CodeBlock language="css" title="grid-column/xl/col-11.css">{ImportsSourceXl}</CodeBlock>
+
+### 2xl styles
+
+<CodeBlock language="css" title="grid-column/2xl/col-11.css">{ImportsSource2xl}</CodeBlock>
+
+### 3xl styles
+
+<CodeBlock language="css" title="grid-column/3xl/col-11.css">{ImportsSource3xl}</CodeBlock>
+
+### 4xl styles
+
+<CodeBlock language="css" title="grid-column/4xl/col-11.css">{ImportsSource4xl}</CodeBlock>
+
+### 5xl styles
+
+<CodeBlock language="css" title="grid-column/5xl/col-11.css">{ImportsSource5xl}</CodeBlock>
diff --git a/docs/docs/styles/grid-column/twelve-column.mdx b/docs/docs/styles/grid-column/twelve-column.mdx
@@ -0,0 +1,127 @@
+---
+title: Grid columns - twelve column
+---
+
+This provides styles for a twelve-column grid.
+
+The following sizes are available:
+
+- col-1-12
+- col-2-12
+- col-3-12
+- col-4-12
+- col-5-12
+- col-6-12
+- col-7-12
+- col-8-12
+- col-9-12
+- col-10-12
+- col-11-12
+- col-12-12
+
+Each column size has a class to go with each of the [media query viewport sizes](/styles/media#viewport-media-queries). For example:
+
+```css
+col-1-12-3xs
+col-1-12-2xs
+col-1-12-xs
+col-1-12-sm
+col-1-12-md
+col-1-12-lg
+col-1-12-xl
+col-1-12-2xl
+col-1-12-3xl
+col-1-12-4xl
+col-1-12-5xl
+```
+
+## How to import into your CSS
+
+Import this into your CSS with:
+
+```css
+@import 'cacao-css/dist/grid-column/col-12.css';
+```
+
+Imports are available for all [media query viewport sizes](/styles/media#viewport-media-queries).
+
+```css
+@import 'cacao-css/dist/grid-column/3xs/col-12.css';
+@import 'cacao-css/dist/grid-column/2xs/col-12.css';
+@import 'cacao-css/dist/grid-column/xs/col-12.css';
+@import 'cacao-css/dist/grid-column/sm/col-12.css';
+@import 'cacao-css/dist/grid-column/md/col-12.css';
+@import 'cacao-css/dist/grid-column/lg/col-12.css';
+@import 'cacao-css/dist/grid-column/xl/col-12.css';
+@import 'cacao-css/dist/grid-column/2xl/col-12.css';
+@import 'cacao-css/dist/grid-column/3xl/col-12.css';
+@import 'cacao-css/dist/grid-column/4xl/col-12.css';
+@import 'cacao-css/dist/grid-column/5xl/col-12.css';
+```
+
+See [Import Cacao CSS](/import) for more information.
+
+## Source CSS
+
+<!-- markdownlint-disable -->
+import CodeBlock from '@theme/CodeBlock';
+import ImportsSource from '!!raw-loader!../../../../dist/grid-column/col-12.css';
+import ImportsSource3xs from '!!raw-loader!../../../../dist/grid-column/3xs/col-12.css';
+import ImportsSource2xs from '!!raw-loader!../../../../dist/grid-column/2xs/col-12.css';
+import ImportsSourceXs from '!!raw-loader!../../../../dist/grid-column/xs/col-12.css';
+import ImportsSourceSm from '!!raw-loader!../../../../dist/grid-column/sm/col-12.css';
+import ImportsSourceMd from '!!raw-loader!../../../../dist/grid-column/md/col-12.css';
+import ImportsSourceLg from '!!raw-loader!../../../../dist/grid-column/lg/col-12.css';
+import ImportsSourceXl from '!!raw-loader!../../../../dist/grid-column/xl/col-12.css';
+import ImportsSource2xl from '!!raw-loader!../../../../dist/grid-column/2xl/col-12.css';
+import ImportsSource3xl from '!!raw-loader!../../../../dist/grid-column/3xl/col-12.css';
+import ImportsSource4xl from '!!raw-loader!../../../../dist/grid-column/4xl/col-12.css';
+import ImportsSource5xl from '!!raw-loader!../../../../dist/grid-column/5xl/col-12.css';
+
+### Default styles
+
+<CodeBlock language="css" title="grid-column/col-12.css">{ImportsSource}</CodeBlock>
+
+### 3xs styles
+
+<CodeBlock language="css" title="grid-column/3xs/col-12.css">{ImportsSource3xs}</CodeBlock>
+
+### 2xs styles
+
+<CodeBlock language="css" title="grid-column/2xs/col-12.css">{ImportsSource2xs}</CodeBlock>
+
+### xs styles
+
+<CodeBlock language="css" title="grid-column/xs/col-12.css">{ImportsSourceXs}</CodeBlock>
+
+### sm styles
+
+<CodeBlock language="css" title="grid-column/sm/col-12.css">{ImportsSourceSm}</CodeBlock>
+
+### md styles
+
+<CodeBlock language="css" title="grid-column/md/col-12.css">{ImportsSourceMd}</CodeBlock>
+
+### lg styles
+
+<CodeBlock language="css" title="grid-column/lg/col-12.css">{ImportsSourceLg}</CodeBlock>
+
+### xl styles
+
+<CodeBlock language="css" title="grid-column/xl/col-12.css">{ImportsSourceXl}</CodeBlock>
+
+### 2xl styles
+
+<CodeBlock language="css" title="grid-column/2xl/col-12.css">{ImportsSource2xl}</CodeBlock>
+
+### 3xl styles
+
+<CodeBlock language="css" title="grid-column/3xl/col-12.css">{ImportsSource3xl}</CodeBlock>
+
+### 4xl styles
+
+<CodeBlock language="css" title="grid-column/4xl/col-12.css">{ImportsSource4xl}</CodeBlock>
+
+### 5xl styles
+
+<CodeBlock language="css" title="grid-column/5xl/col-12.css">{ImportsSource5xl}</CodeBlock>
diff --git a/docs/sidebars.ts b/docs/sidebars.ts
@@ -198,6 +198,16 @@ const sidebars: SidebarsConfig = {
                             id: 'styles/grid-column/ten-column',
                             label: '10 column',
                         },
+                        {
+                            type: 'doc',
+                            id: 'styles/grid-column/eleven-column',
+                            label: '11 column',
+                        },
+                        {
+                            type: 'doc',
+                            id: 'styles/grid-column/twelve-column',
+                            label: '12 column',
+                        },
                         {
                             type: 'doc',
                             id: 'styles/grid-column/fill-column',