From f016b79765065b738fdea9b8f8c1ff4793555612 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 21 Sep 2022 13:45:37 +0700
Subject: [PATCH] feat: Simple grid

---
 contents/_includes/patterns/simple-grid.njk |  15 ++
 contents/index.njk                          |   1 +
 contents/simple-grid.md                     |  54 ++++++++
 pages/simple-grid/index.tsx                 | 145 --------------------
 patterns/simple-grid/Cover.tsx              |  56 --------
 styles/index.scss                           |   1 +
 styles/patterns/_simple-grid.scss           |  32 +++++
 7 files changed, 103 insertions(+), 201 deletions(-)
 create mode 100644 contents/_includes/patterns/simple-grid.njk
 create mode 100644 contents/simple-grid.md
 delete mode 100644 pages/simple-grid/index.tsx
 delete mode 100644 patterns/simple-grid/Cover.tsx
 create mode 100644 styles/patterns/_simple-grid.scss

diff --git a/contents/_includes/patterns/simple-grid.njk b/contents/_includes/patterns/simple-grid.njk
new file mode 100644
index 0000000..b363702
--- /dev/null
+++ b/contents/_includes/patterns/simple-grid.njk
@@ -0,0 +1,15 @@
+<div class="simple-grid">
+    <div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
+    <div class="simple-grid__cell simple-grid__cell--fill">{% rectangle "hor", "md", 100 %}</div>
+</div>
+<div class="simple-grid">
+    <div class="simple-grid__cell simple-grid__cell--1/3">{% rectangle "hor", "md", 100 %}</div>
+    <div class="simple-grid__cell simple-grid__cell--1/3">{% rectangle "hor", "md", 100 %}</div>
+    <div class="simple-grid__cell simple-grid__cell--1/3">{% rectangle "hor", "md", 100 %}</div>
+</div>
+<div class="simple-grid">
+    <div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
+    <div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
+    <div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
+    <div class="simple-grid__cell simple-grid__cell--1/4">{% rectangle "hor", "md", 100 %}</div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 4de1006..525b040 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -114,6 +114,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Masonry grid" %}{% include "patterns/masonry-grid.njk" %}{% endpattern %}
             {% pattern "Same height columns" %}{% include "patterns/same-height-columns.njk" %}{% endpattern %}
             {% pattern "Sidebar" %}{% include "patterns/sidebar.njk" %}{% endpattern %}
+            {% pattern "Simple grid" %}{% include "patterns/simple-grid.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/contents/simple-grid.md b/contents/simple-grid.md
new file mode 100644
index 0000000..8ae9235
--- /dev/null
+++ b/contents/simple-grid.md
@@ -0,0 +1,54 @@
+---
+layout: layouts/post.njk
+title: Simple grid
+description: Create a simple grid with CSS flexbox
+keywords: css flexbox, css flexbox grid, css grid, css layout
+---
+
+## HTML
+
+```html
+<!-- Row -->
+<div class="simple-grid">
+    <!--Cell with given width. Replace 25% with whatever you want -->
+    <div class="simple-grid__cell simple-grid__cell--1/4">25%</div>
+
+    <!-- Cell that takes remaining width -->
+    <div class="simple-grid__cell simple-grid__cell--fill">
+        ...
+    </div>
+</div>
+```
+
+## CSS
+
+```css
+.simple-grid {
+    display: flex;
+
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+}
+
+.simple-grid__cell {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+}
+
+.simple-grid__cell--fill {
+    flex: 1;
+}
+
+/* Cell with given width */
+.simple-grid__cell--1\/2 {
+    flex: 0 0 50%;
+}
+.simple-grid__cell--1\/3 {
+    flex: 0 0 33.3333333%;
+}
+.simple-grid__cell--1\/4 {
+    flex: 0 0 25%;
+}
+```
+
+{% demo %}{% include "patterns/simple-grid.njk" %}{% enddemo %}
diff --git a/pages/simple-grid/index.tsx b/pages/simple-grid/index.tsx
deleted file mode 100644
index 61d0d9e..0000000
--- a/pages/simple-grid/index.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.SimpleGrid}>
-            <Head>
-                <meta name="description" content="Create a simple grid with CSS flexbox" />
-                <meta name="og:description" content="Create a simple grid with CSS flexbox" />
-                <meta name="twitter:description" content="Create a simple grid with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
-            </Head>
-            <BrowserFrame
-                html={`
-<!-- Row -->
-<div class="row">
-    <!--Cell with given width. Replace 25% with whatever you want -->
-    <div class="row__cell row__cell--1/4">25%</div>
-
-    <!-- Cell that takes remaining width -->
-    <div class="row__cell row__cell--fill">
-        ...
-    </div>
-</div>
-`}
-                css={`
-                    .row {
-                        display: flex;
-
-                        margin-left: -8px;
-                        margin-right: -8px;
-                    }
-
-                    .row__cell {
-                        padding-left: 8px;
-                        padding-right: 8px;
-                    }
-
-                    /* Cell with given width. Replace 25% with whatever you want */
-                    .row__cell--1/4 {
-                        flex: 0 0 25%;
-                    }
-
-                    .row__cell--fill {
-                        flex: 1;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div style={{ width: '60%' }}>
-                        <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-
-                        <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
-                            <div style={{ flex: '0 0 50%', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-
-                        <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-
-                        <div style={{ display: 'flex', margin: '0 -8px 32px -8px' }}>
-                            <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-
-                        <div style={{ display: 'flex', margin: '0 -8px 8px -8px' }}>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-
-                        <div style={{ display: 'flex', margin: '0 -8px 0 -8px' }}>
-                            <div style={{ flex: '0 0 25%', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '1', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                            <div style={{ flex: '0 0 33.3333%', padding: '0 8px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <Spacer size="extraLarge" />
-            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.MasonryGrid]} />
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/simple-grid/Cover.tsx b/patterns/simple-grid/Cover.tsx
deleted file mode 100644
index 45e055f..0000000
--- a/patterns/simple-grid/Cover.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <div style={{ width: '80%' }}>
-                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                        <div style={{ flex: '0 0 50%', padding: '0 4px' }}>
-                            <Rectangle />
-                        </div>
-                        <div style={{ flex: '1', padding: '0 4px' }}>
-                            <Rectangle />
-                        </div>
-                    </div>
-                    <div style={{ alignItems: 'center', display: 'flex', marginBottom: '4px' }}>
-                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}>
-                            <Rectangle />
-                        </div>
-                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}>
-                            <Rectangle />
-                        </div>
-                        <div style={{ flex: '0 0 33%', padding: '0 4px' }}>
-                            <Rectangle />
-                        </div>
-                    </div>
-                    <div style={{ alignItems: 'center', display: 'flex' }}>
-                        <div style={{ flex: '0 0 25%', padding: '0 4px' }}>
-                            <Rectangle />
-                        </div>
-                        <div style={{ flex: '1', padding: '0 4px' }}>
-                            <Rectangle />
-                        </div>
-                        <div style={{ flex: '0 0 25%', padding: '0 4px' }}>
-                            <Rectangle />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index f8dea95..bb8d185 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -71,6 +71,7 @@
 @import './patterns/search-box';
 @import './patterns/separator';
 @import './patterns/sidebar';
+@import './patterns/simple-grid';
 @import './patterns/slider';
 @import './patterns/spin-button';
 @import './patterns/stacked-cards';
diff --git a/styles/patterns/_simple-grid.scss b/styles/patterns/_simple-grid.scss
new file mode 100644
index 0000000..fc55790
--- /dev/null
+++ b/styles/patterns/_simple-grid.scss
@@ -0,0 +1,32 @@
+.simple-grid {
+    display: flex;
+
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+
+    /* Demo */
+    margin-bottom: 0.25em;
+    margin-top: 0.25em;
+    height: 100%;
+    width: 100%;
+}
+
+.simple-grid__cell {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+}
+
+/* Cell with given width */
+.simple-grid__cell--1\/2 {
+    flex: 0 0 50%;
+}
+.simple-grid__cell--1\/3 {
+    flex: 0 0 33.3333333%;
+}
+.simple-grid__cell--1\/4 {
+    flex: 0 0 25%;
+}
+
+.simple-grid__cell--fill {
+    flex: 1;
+}
\ No newline at end of file