Merge pull request #116 from phuoc-ng/lined-paper

Add lined paper pattern

client/constants/Pattern.ts

@@ -37,9 +37,10 @@ enum Pattern {
     FloatingLabel = 'Floating label',
     FullScreenMenu = 'Full screen menu',
     HolyGrail = 'Holy grail',
-    KeyboardShortcut = 'Keyboard shortcut',
     InitialAvatar = 'Initial avatar',
     InputAddon = 'Input addon',
+    KeyboardShortcut = 'Keyboard shortcut',
+    LinedPaper = 'Lined paper',
     MediaObject = 'Media object',
     MegaMenu = 'Mega menu',
     Menu = 'Menu',

client/pages/ExplorePage.tsx

@@ -167,8 +167,9 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />
                         <CoverCard pattern={Pattern.FixedAtSide} />
-                        <CoverCard pattern={Pattern.KeyboardShortcut} />
                         <CoverCard pattern={Pattern.InitialAvatar} />
+                        <CoverCard pattern={Pattern.KeyboardShortcut} />
+                        <CoverCard pattern={Pattern.LinedPaper} />
                         <CoverCard pattern={Pattern.MediaObject} />
                         <CoverCard pattern={Pattern.OverlayPlayButton} />
                         <CoverCard pattern={Pattern.PricingTable} />

client/patterns/lined-paper/Cover.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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={{
+                        backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
+                        backgroundSize: '100% 8px',
+                        height: '100%',
+                        width: '100%',
+                    }}
+                />
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/lined-paper/Details.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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="Lined paper">
+            <Helmet>
+                <meta name="description" content="Create lined paper with CSS" />
+                <meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
+                                    backgroundPositionY: '24px',
+                                    backgroundSize: '100% 2em',
+                                    height: '200px',
+                                    lineHeight: '2em',
+                                    width: '75%',
+                                }}
+                            >
+                                <div>
+                                    Cascading Style Sheets (CSS) is a style sheet language used for
+                                    describing the presentation of a document written in a markup
+                                    language like HTML. CSS is a cornerstone technology of the World Wide Web,
+                                    alongside HTML and JavaScript.
+                                </div>
+                                <div style={{ textAlign: 'right' }}>— Wikipedia</div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Lined background */
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
+    background-size: 100% 2em;
+
+    /*
+    Display the content on top of the lines.
+    The line height must be the same as the background size defined above
+    */
+    background-position-y: 24px;
+    line-height: 2em;
+">
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

public/sitemap.xml

@@ -36,6 +36,7 @@
     <url><loc>https://csslayout.io/patterns/initial-avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/input-addon</loc></url>
     <url><loc>https://csslayout.io/patterns/keyboard-shortcut</loc></url>
+    <url><loc>https://csslayout.io/patterns/lined-paper</loc></url>
     <url><loc>https://csslayout.io/patterns/media-object</loc></url>
     <url><loc>https://csslayout.io/patterns/mega-menu</loc></url>
     <url><loc>https://csslayout.io/patterns/menu</loc></url>