Merge pull request #114 from phuoc-ng/stamp-border

Add stamp border pattern

client/constants/Pattern.ts

@@ -70,6 +70,7 @@ enum Pattern {
     SplitNavigation = 'Split navigation',
     SplitScreen = 'Split screen',
     StackedCards = 'Stacked cards',
+    StampBorder = 'Stamp border',
     Statistic = 'Statistic',
     StatusLight = 'Status light',
     StepperInput = 'Stepper input',

client/pages/ExplorePage.tsx

@@ -176,6 +176,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Ribbon} />
                         <CoverCard pattern={Pattern.Separator} />
                         <CoverCard pattern={Pattern.StackedCards} />
+                        <CoverCard pattern={Pattern.StampBorder} />
                         <CoverCard pattern={Pattern.Statistic} />
                         <CoverCard pattern={Pattern.StatusLight} />
                         <CoverCard pattern={Pattern.StickyTableColumn} />

client/patterns/stamp-border/Cover.tsx

@@ -0,0 +1,48 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: '#ccc',
+                        backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
+                        backgroundPosition: '-5px -5px',
+                        backgroundRepeat: 'repeat',
+                        backgroundSize: '10px 10px',
+                        height: '100%',
+                        padding: '5px',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            backgroundColor: '#ccc',
+                            height: '100%',
+                            width: '100%',
+                        }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/stamp-border/Details.tsx

@@ -0,0 +1,81 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Stamp border">
+            <Helmet>
+                <meta name="description" content="Create stamp border with CSS" />
+                <meta name="keywords" content="css radial gradient, css stamp border" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: '#ccc',
+                                    backgroundImage: 'radial-gradient(#fff 50%, transparent 50%)',
+                                    backgroundPosition: '-5px -5px',
+                                    backgroundRepeat: 'repeat',
+                                    backgroundSize: '10px 10px',
+                                    height: '200px',
+                                    padding: '5px',
+                                    width: '200px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        backgroundColor: '#ccc',
+                                        height: '100%',
+                                        width: '100%',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Background */
+    background-color: #ccc;
+    background-image: radial-gradient(#fff 50%, transparent 50%);
+    background-position: -5px -5px;
+    background-repeat: repeat;
+    background-size: 10px 10px;
+
+    /* Spacing */
+    padding: 5px;
+">
+    <!-- Inner -->
+    <div style="
+        /* Background */
+        background-color: #ccc;
+    ">
+        <!-- Content -->
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

public/sitemap.xml

@@ -66,6 +66,7 @@
     <url><loc>https://csslayout.io/patterns/split-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
     <url><loc>https://csslayout.io/patterns/stacked-cards</loc></url>
+    <url><loc>https://csslayout.io/patterns/stamp-border</loc></url>
     <url><loc>https://csslayout.io/patterns/statistic</loc></url>
     <url><loc>https://csslayout.io/patterns/status-light</loc></url>
     <url><loc>https://csslayout.io/patterns/stepper-input</loc></url>