Merge pull request #188 from phuoc-ng/inverted-corners

Pattern 101: Inverted corners

bin/generateScreenshot.ts

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+// Run this script from the root folder
+// $ npm run screenshot slug-of-pattern-here
+
+const puppeteer = require('puppeteer');
+
+const main = () => {
+    const args = process.argv;
+    if (!args || !Array.isArray(args) || args.length < 2) {
+        console.log('Please specific the pattern: npm run screenshot slug-of-pattern-here');
+        return;
+    }
+
+    const pattern = args[2];
+    
+    (async () => {
+        const browser = await puppeteer.launch();    
+           
+        const page = await browser.newPage();
+        await page.goto(`http://localhost:1234/patterns/${pattern}`);
+
+        await page.waitForSelector('.demo__live');
+        const element = await page.$('.demo__live');
+        await element.screenshot({
+            path: `public/assets/patterns/${pattern}.png`
+        });
+        await page.close();
+        
+        await browser.close();
+    })();
+};
+
+main();

bin/generateScreenshots.ts

@@ -1,29 +0,0 @@
-#!/usr/bin/env node
-
-const puppeteer = require('puppeteer');
-
-import Pattern from '../client/constants/Pattern';
-import slug from '../client/helpers/slug';
-
-process.setMaxListeners(0);
-
-(async () => {
-    const browser = await puppeteer.launch();    
-
-    await Promise.all(
-        Object.entries(Pattern).map(async ([_, patternName]) => {            
-            const page = await browser.newPage();
-            const pattern = slug(patternName);
-            await page.goto(`http://localhost:1234/patterns/${pattern}`);
-
-            await page.waitForSelector('.demo');
-            const element = await page.$('.demo');
-            await element.screenshot({
-                path: `public/assets/patterns/${pattern}.png`
-            });
-            await page.close();
-        })
-    );
-    
-    await browser.close();
-})();

client/constants/Pattern.ts

@@ -43,6 +43,7 @@ enum Pattern {
     HolyGrail = 'Holy grail',
     InitialAvatar = 'Initial avatar',
     InputAddon = 'Input addon',
+    InvertedCorners = 'Inverted corners',
     KeyboardShortcut = 'Keyboard shortcut',
     LayeredCard = 'Layered card',
     LinedPaper = 'Lined paper',

client/index.css

@@ -41,20 +41,18 @@ a {
     max-width: 80rem;
     padding: 0 1rem;
 }
-.content {
-    display: flex;
-    margin: 4rem 0;
-}
 .main {
     flex: 1;
-    overflow: auto;
+    overflow: hidden;
+    padding: 4rem 0;
 }
 .sidebar {
     display: none;
+    padding: 4rem 0;
 }
 
 /* Sidebar */
-.sidebar__inner {
+.sidebar__inner {    
     position: sticky;
     top: 1rem;
 }
@@ -80,7 +78,7 @@ a {
     font-size: 2rem;
     line-height: 1.5;
     text-align: center;
-    text-transform: capitalize;
+    text-transform: uppercase;
 }
 .hero__subheading {
     color: var(--color-gray-9);
@@ -101,11 +99,11 @@ pre {
     color: #FFF;
     font-family: "Source Code Pro", monospace;
     font-size: 1rem;
-    height: 100%;
     line-height: 1.5;
     margin: 0px;
-    overflow: auto;
+    overflow-x: auto;
     padding: 1rem;
+    white-space: pre;
 }
 
 .token.tag,
@@ -158,6 +156,9 @@ pre {
 
 /* Responsive */
 @media (min-width: 640px) {
+    .content {
+        display: flex;
+    }
     .sidebar {
         display: block;
         flex: 0 0 8rem;

client/pages/ExplorePage.tsx

@@ -136,6 +136,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.FolderStructure} />
                                 <CoverCard pattern={Pattern.FullBackground} />
                                 <CoverCard pattern={Pattern.InitialAvatar} />
+                                <CoverCard pattern={Pattern.InvertedCorners} />
                                 <CoverCard pattern={Pattern.KeyboardShortcut} />
                                 <CoverCard pattern={Pattern.LayeredCard} />
                                 <CoverCard pattern={Pattern.LinedPaper} />

client/patterns/inverted-corners/Cover.tsx

@@ -0,0 +1,43 @@
+/** * 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={{
+                    height: '100%',
+                    padding: '1.5rem',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: '#52525B',
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: 'transparent',
+                            borderTopLeftRadius: '1rem',
+                            bottom: '-2rem',
+                            boxShadow: '0 -1rem 0 0 #52525B',
+                            height: '2rem',
+                            position: 'absolute',
+                            width: '1rem',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/inverted-corners/Details.tsx

@@ -0,0 +1,101 @@
+/**
+ * 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 Heading from '../../components/Heading';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+import './inverted-corners.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.InvertedCorners}>
+            <Helmet>
+                <meta name="description" content="Create inverted corners with CSS" />
+                <meta name="og:description" content="Create inverted corners with CSS" />
+                <meta name="twitter:description" content="Create inverted corners with CSS" />
+                <meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
+            </Helmet>
+            <BrowserFrame
+html={`
+<div class="inverted-corners">
+    ...
+</div>
+`}
+css={`
+:root {
+    --inverted-corners-background: #52525B;
+    --inverted-corners-size: 2rem;
+}
+
+.inverted-corners {
+    background-color: var(--inverted-corners-background);
+
+    /* Used to position the corner */
+    position: relative;
+}
+
+.inverted-corners::before {
+    content: '';
+
+    /* Absolute position */
+    bottom: calc(-2 * var(--inverted-corners-size));
+    left: 0;
+    position: absolute;
+
+    /* Size */
+    height: calc(2 * var(--inverted-corners-size));
+    width: var(--inverted-corners-size);
+
+    /* Border */
+    background-color: transparent;
+    border-top-left-radius: var(--inverted-corners-size);
+    box-shadow: var(--inverted-corners-background)
+                0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
+}
+`}
+            >
+                <div
+                    style={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        justifyContent: 'center',
+                        padding: '1rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            height: '8rem',
+                            width: '16rem',
+                        }}
+                    >
+                        <div className='inverted-corners'></div>
+                    </div>
+                </div>
+            </BrowserFrame>
+
+            <section>
+                <Heading title="Use case" />
+
+                <div
+                    style={{
+                        height: '8rem',
+                        width: '16rem',
+                    }}
+                >
+                    <div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
+                </div>
+            </section>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/inverted-corners/inverted-corners.css

@@ -0,0 +1,53 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --inverted-corners-background: #52525B;
+    --inverted-corners-size: 2rem;
+}
+
+.inverted-corners {
+    background-color: var(--inverted-corners-background);
+    
+    /* Used to position the corner */
+    position: relative;
+
+    /* Misc */
+    height: 100%;
+}
+
+.inverted-corners::before {
+    content: '';
+
+    /* Absolute position */
+    bottom: calc(-2 * var(--inverted-corners-size));
+    left: 0;
+    position: absolute;
+
+    /* Size */
+    height: calc(2 * var(--inverted-corners-size));
+    width: var(--inverted-corners-size);
+
+    /* Border */
+    background-color: transparent;
+    border-top-left-radius: var(--inverted-corners-size);
+    box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
+}
+
+/* Use case */
+.inverted-corners--speech {
+    /* Border radius */
+    border-bottom-right-radius: var(--inverted-corners-size);
+    border-top-left-radius: var(--inverted-corners-size);
+    border-top-right-radius: var(--inverted-corners-size);
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Misc */
+    color: #FFF;
+}

client/placeholders/BrowserFrame.tsx

@@ -15,17 +15,13 @@ interface BrowserFrameProps {
 
 const BrowserFrame: React.FC<BrowserFrameProps> = ({ children, css, html }) => {
     return (
-        <div className="demo">
-            <div className="demo__html">
-                <SampleCode fullHeight={true} lang="html" code={html} />
-            </div>
-            <div className="demo__css">
-                <SampleCode fullHeight={true} lang="css" code={css} />
-            </div>
+        <>
+            <SampleCode fullHeight={true} lang="html" code={html} />
+            <SampleCode fullHeight={true} lang="css" code={css} />
             <div className="demo__live">
                 {children}
             </div>
-        </div>
+        </>
     );
 };
 

client/placeholders/browserFrame.css

@@ -3,20 +3,8 @@
  * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-.demo {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 0.5rem;
-    overflow: hidden;
-}
-
 .demo__live {
+    border: 1px solid rgba(0, 0, 0, 0.2);
     height: 32rem;
     overflow: auto;
-}
-
-.demo__css,
-.demo__html {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
-    height: 16rem;
-    overflow: auto;
 }

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": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshots.ts"
+        "screenshot": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node bin/generateScreenshot.ts"
     },
     "dependencies": {
         "@loadable/component": "^5.14.1",