Merge pull request #187 from phuoc-ng/color-swatch

Pattern 100: Color swatch

.gitignore

@@ -3,5 +3,4 @@
 dist
 node_modules
 package-lock.json
-public/assets/patterns
 tslint.log

client/constants/Pattern.ts

@@ -17,6 +17,7 @@ enum Pattern {
     Chip = 'Chip',
     CircularNavigation = 'Circular navigation',
     CloseButton = 'Close button',
+    ColorSwatch = 'Color swatch',
     CookieBanner = 'Cookie banner',
     CornerRibbon = 'Corner ribbon',
     CurvedBackground = 'Curved background',

client/index.css

@@ -38,7 +38,7 @@ a {
 /* Layout */
 .container {
     margin: 0 auto;
-    max-width: 64rem;
+    max-width: 80rem;
     padding: 0 1rem;
 }
 .content {

client/pages/ExplorePage.tsx

@@ -119,6 +119,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.Card} />
                                 <CoverCard pattern={Pattern.Centering} />
                                 <CoverCard pattern={Pattern.CloseButton} />
+                                <CoverCard pattern={Pattern.ColorSwatch} />
                                 <CoverCard pattern={Pattern.CookieBanner} />
                                 <CoverCard pattern={Pattern.CornerRibbon} />
                                 <CoverCard pattern={Pattern.CurvedBackground} />

client/pages/homePage.css

@@ -6,13 +6,12 @@
 .home__features {
     display: flex;
     flex-wrap: wrap;
-    margin: 2.5rem auto;
+    margin: 1rem -1rem;
-    max-width: 48rem;
 }
 .home__feature {
     padding: 1rem;
     text-align: center;
-    width: 50%;
+    width: 100%;
 }
 .home__icon {
     color: var(--color-blue-6);
@@ -25,7 +24,7 @@
 }
 
 .home__patterns {
-    height: 60rem;
+    height: 80rem;
     overflow: hidden;
     position: relative;
 }
@@ -63,16 +62,13 @@
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
-    height: 180rem;
     opacity: 0.8;
 }
 .home__slide {
     animation: slide 20s linear infinite;
     display: flex;
     flex-wrap: wrap;
-    height: 60rem;
     justify-content: center;
-    width: 60rem;
     will-change: transform;
 }
 
@@ -92,3 +88,15 @@
         transform: translateY(-100%);
     }
 }
+
+/* Responsive */
+@media (min-width: 640px) {
+    .home__feature {
+        width: 50%;
+    }
+}
+@media (min-width: 1024px) {
+    .home__feature {
+        width: 33.333333%;
+    }
+}

client/patterns/avatar/Details.tsx

@@ -20,8 +20,7 @@ const Details: React.FC<{}> = () => {
                 <meta name="twitter:description" content="Create an avatar component with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
             </Helmet>
-            <div className='p-8 pb-20'>
+            <BrowserFrame
-                <BrowserFrame
 html={`
 <div class="avatar">
     <!-- Avatar image -->
@@ -45,48 +44,47 @@ css={`
     width: 100%;
 }
 `}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '8px',
+                    }}
                 >
                     <div
                         style={{
-                            alignItems: 'center',
+                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                            display: 'flex',
+                            borderRadius: '9999px',
-                            flexDirection: 'column',
+                            height: '64px',
-                            height: '100%',
-                            justifyContent: 'center',
                             padding: '8px',
+                            width: '64px',
                         }}
                     >
-                        <div
+                        <svg
+                            viewBox="0 0 24 24"
                             style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                fill: 'none',
-                                borderRadius: '9999px',
+                                height: '100%',
-                                height: '64px',
+                                stroke: "#FFF",
-                                padding: '8px',
+                                strokeLinecap: 'round',
-                                width: '64px',
+                                strokeLinejoin: 'round',
+                                strokeWidth: 1,
+                                width: '100%',
                             }}
                         >
-                            <svg
+                            <path
-                                viewBox="0 0 24 24"
+                                d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
-                                style={{
+                                M5,20.5
-                                    fill: 'none',
+                                c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
-                                    height: '100%',
+                            />
-                                    stroke: "#FFF",
+                        </svg>
-                                    strokeLinecap: 'round',
-                                    strokeLinejoin: 'round',
-                                    strokeWidth: 1,
-                                    width: '100%',
-                                }}
-                            >
-                                <path
-                                    d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
-                                    M5,20.5
-                                    c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
-                                />
-                            </svg>
-                        </div>
                     </div>
-                </BrowserFrame>
+                </div>
-            </div>
+            </BrowserFrame>
 
             <RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
         </DetailsLayout>

client/patterns/color-swatch/Cover.tsx

@@ -0,0 +1,42 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >   
+                {
+                    Array(4).fill(0).map((_, index) => (
+                        <div
+                            key={index}
+                            style={{
+                                backgroundColor: `rgba(0, 0, 0, 0.${index * 2 + 1})`,
+                                borderRadius: '9999px',                                
+                                height: '1.5rem',
+                                margin: '0.5rem',
+                                width: '1.5rem',
+                            }}
+                        />
+                    ))
+                }
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/color-swatch/Details.tsx

@@ -0,0 +1,84 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.ColorSwatch}>
+            <Helmet>
+                <meta name="description" content="Create a color swatch with CSS flexbox" />
+                <meta name="og:description" content="Create a color swatch with CSS flexbox" />
+                <meta name="twitter:description" content="Create a color swatch with CSS flexbox" />
+                <meta name="keywords" content="css color swatch, css flexbox" />
+            </Helmet>
+            <BrowserFrame
+html={`
+<div class="swatch">
+    <div class="swatch__item" style="background-color: ..."></div>
+
+    <!-- Repeat other items -->
+    ...
+</div>
+`}
+css={`
+.swatch {
+    /* Wrap the items */
+    display: flex;
+    flex-wrap: wrap;
+}
+.swatch__item {
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 1.5rem;
+    width: 1.5rem;
+
+    /* Space between items */
+    margin: 0.5rem;
+}
+`}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '0.5rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                        }}
+                    >
+                    {
+                        Array(9).fill(0).map((_, index) => (
+                            <div
+                                key={index}
+                                style={{
+                                    backgroundColor: `rgba(0, 0, 0, 0.${index + 1})`,
+                                    borderRadius: '9999px',
+                                    height: '1.5rem',
+                                    margin: '0.5rem',
+                                    width: '1.5rem',
+                                }}
+                            />
+                        ))
+                    }
+                    </div>
+                </div>
+            </BrowserFrame>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

package.json

@@ -9,7 +9,7 @@
         "deploy": "npm run build && netlify deploy --dir=dist --prod",
         "analyse": "NODE_ENV=analyse webpack --config webpack.config.js -p",
         "lint": "tslint -c tslint.json -o tslint.log 'client/**/*.{ts,tsx}'",
-        "screenshot": "rm -rf public/assets/patterns && mkdir public/assets/patterns && TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshots.ts"
+        "screenshot": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshots.ts"
     },
     "dependencies": {
         "@loadable/component": "^5.14.1",