From 15397d858c7d07079e74002f4a26d6437c585aba Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 25 Dec 2019 17:30:03 +0700
Subject: [PATCH 1/2] Tweak explore page

---
 client/components/CoverCard.tsx |  2 +-
 client/pages/ExplorePage.tsx    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx
index bacd873..1c34fd5 100644
--- a/client/components/CoverCard.tsx
+++ b/client/components/CoverCard.tsx
@@ -20,7 +20,7 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
                 justifyContent: 'flex-start',
                 padding: '16px',
                 textDecoration: 'none',
-                width: '150px',
+                width: '16.666666666666668%',
             }}
         >
             <CoverLoader pattern={pattern} />
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 6af58bb..0925bd5 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -81,7 +81,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Layout" />
 
-                    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
                         <CoverCard pattern={Pattern.HolyGrail} />
                         <CoverCard pattern={Pattern.SameHeightColumns} />
                         <CoverCard pattern={Pattern.Sidebar} />
@@ -96,7 +96,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Navigation" />
 
-                    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.CircularNavigation} />
                         <CoverCard pattern={Pattern.DotNavigation} />
@@ -115,7 +115,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Input" />
 
-                    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
                         <CoverCard pattern={Pattern.Chip} />
                         <CoverCard pattern={Pattern.CustomCheckboxButton} />
@@ -138,7 +138,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Display" />
 
-                    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
                         <CoverCard pattern={Pattern.Accordion} />
                         <CoverCard pattern={Pattern.Avatar} />
                         <CoverCard pattern={Pattern.AvatarList} />
@@ -174,7 +174,7 @@ const ExplorePage = () => {
                 <section>
                     <Heading title="Feedback" />
 
-                    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
                         <CoverCard pattern={Pattern.Modal} />
                         <CoverCard pattern={Pattern.Notification} />
                         <CoverCard pattern={Pattern.PopoverArrow} />

From 00674cef0418795370e2ed5740bff2ddfdd48d71 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 25 Dec 2019 18:14:06 +0700
Subject: [PATCH 2/2] Add card layout

---
 client/constants/Pattern.ts             |  1 +
 client/pages/ExplorePage.tsx            |  1 +
 client/patterns/card-layout/Cover.tsx   | 35 +++++++++++
 client/patterns/card-layout/Details.tsx | 83 +++++++++++++++++++++++++
 client/patterns/card/Details.tsx        |  4 ++
 client/patterns/simple-grid/Details.tsx |  4 ++
 public/sitemap.xml                      |  1 +
 7 files changed, 129 insertions(+)
 create mode 100644 client/patterns/card-layout/Cover.tsx
 create mode 100644 client/patterns/card-layout/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 9060930..a031695 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -6,6 +6,7 @@ enum Pattern {
     Breadcrumb = 'Breadcrumb',
     ButtonWithIcon = 'Button with icon',
     Card = 'Card',
+    CardLayout = 'Card layout',
     Centering = 'Centering',
     Chip = 'Chip',
     CircularNavigation = 'Circular navigation',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 0925bd5..3529f0b 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -82,6 +82,7 @@ const ExplorePage = () => {
                     <Heading title="Layout" />
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
+                        <CoverCard pattern={Pattern.CardLayout} />
                         <CoverCard pattern={Pattern.HolyGrail} />
                         <CoverCard pattern={Pattern.SameHeightColumns} />
                         <CoverCard pattern={Pattern.Sidebar} />
diff --git a/client/patterns/card-layout/Cover.tsx b/client/patterns/card-layout/Cover.tsx
new file mode 100644
index 0000000..b3ddc35
--- /dev/null
+++ b/client/patterns/card-layout/Cover.tsx
@@ -0,0 +1,35 @@
+import 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={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
+                    {
+                        Array(9).fill(0).map((_, index) => {
+                            return (
+                                <div key={index} style={{ flexBasis: '33%', padding: '4px' }}>
+                                    <Rectangle height={20} />
+                                </div>
+                            );
+                        })
+                    }
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/card-layout/Details.tsx b/client/patterns/card-layout/Details.tsx
new file mode 100644
index 0000000..b2268bc
--- /dev/null
+++ b/client/patterns/card-layout/Details.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Card layout">
+            <Helmet>
+                <meta name="description" content="Create a card layout with CSS flexbox" />
+                <meta name="keywords" content="css card layout, css flexbox, css layout" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    flexWrap: 'wrap',
+                                    margin: '0 -8px',
+                                    width: '60%',
+                                }}
+                            >
+                                {
+                                    Array(10).fill(0).map((_, index) => {
+                                        return (
+                                            <div key={index} style={{ flexBasis: '25%', marginBottom: '24px', padding: '0 8px' }}>
+                                                <Rectangle height={80} />
+                                            </div>
+                                        );
+                                    })
+                                }
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    display: flex;
+
+    /* Put a card in the next row when previous cards take all width */
+    flex-wrap: wrap;
+
+    margin-left: -8px;
+    margin-right: -8px;
+">
+    <!-- A card with given width -->
+    <div style="
+        /* There will be 4 cards per row */
+        flex-basis: 25%;
+
+        padding-left: 8px;
+        padding-right: 8px;
+    ">
+        ...
+    </div>
+
+    <!-- Repeat other cards -->
+    ...
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.Card, Pattern.SimpleGrid]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index 1ee33bf..cd72c06 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -70,6 +72,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.CardLayout]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index 596d3a3..82dabca 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Rectangle from '../../placeholders/Rectangle';
@@ -124,6 +126,8 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+
+            <RelatedPatterns patterns={[Pattern.CardLayout]} />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 78b6543..b34314c 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -7,6 +7,7 @@
     <url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>
     <url><loc>https://csslayout.io/patterns/button-with-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/card</loc></url>
+    <url><loc>https://csslayout.io/patterns/card-layout</loc></url>
     <url><loc>https://csslayout.io/patterns/centering</loc></url>
     <url><loc>https://csslayout.io/patterns/chip</loc></url>
     <url><loc>https://csslayout.io/patterns/circular-navigation</loc></url>