{"version":3,"sources":["components/Example.js","App.js","reportWebVitals.js","index.js"],"names":["Example","example","colors","useState","selectedTab","setSelectedTab","cssDynamic","css","setCss","html","setHtml","srcDoc","cssStatic","class","className","title","data-testid","width","height","frameBorder","style","backgroundColor","cursor","onClick","value","onBeforeChange","editor","data","options","lineWrapping","lint","mode","lineNumbers","theme","examples","App","map","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.ee864865.chunk.js","sourcesContent":["import React, { useState } from \"react\";\nimport \"codemirror/lib/codemirror.css\";\nimport \"codemirror/theme/material.css\";\nimport \"codemirror/mode/xml/xml\";\nimport \"codemirror/mode/javascript/javascript\";\nimport \"codemirror/mode/css/css\";\nimport { Controlled as CodeMirror } from \"react-codemirror2\";\n\nconst htmlStyle = `\nhtml {\n overflow: hidden;\n font-family: sans-serif;\n}\n`;\n\nexport default function Example({ example, colors }) {\n const [selectedTab, setSelectedTab] = useState(\"css\");\n const [css, setCss] = useState(example.cssDynamic);\n const [html, setHtml] = useState(example.html);\n\n const srcDoc = `\n ${html}\n\t\t\n\t\n `;\n\n const handleCssChange = (editor, data, value) => {\n setCss(value);\n };\n const handleHtmlChange = (editor, data, value) => {\n setHtml(value);\n };\n return (\n
\n
\n
\n

{example.title}

\n
details
\n
\n
\n
\n \n
\n
\n
\n setSelectedTab(\"html\")}>\n html\n \n setSelectedTab(\"css\")}>\n css\n \n
\n {selectedTab === \"html\" && (\n \n )}\n {selectedTab === \"css\" && (\n \n )}\n
Edit CSS to see changes
\n
\n
\n
\n
\n );\n}\n","import \"./App.css\";\nimport Example from \"./components/Example\";\n\nexport const colors = `\n.coral {\n background-color: #ffa07d;\n}\n\n.lightskyblue {\n background-color: lightskyblue;\n}\n\n.palegreen {\n background-color: palegreen;\n}\n\n.moccasin {\n background-color: moccasin;\n}\n\n.pink {\n background-color: pink;\n}`;\n\nexport const examples = [\n {\n title: \"Centered\",\n html: `
\n
(^ڡ^)
\n
`,\n cssStatic: `\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n }\n \n .box {\n padding: 1em;\n border-radius: 10px;\n font-size: 1.3rem;\n display: grid;\n place-items: center;\n }`,\n cssDynamic: `.container {\n height: 100vh;\n width: 100vw;\n display: grid;\n place-items: center;\n background-color: #eee;\n }`,\n },\n {\n title: \"Tiled List - Grid\",\n html: `
\n
1
\n
2
\n
3
\n
4
\n
`,\n cssStatic: `\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n max-height: 100vh;\n }\n \n .box {\n border-radius: 1rem;\n display: grid;\n place-items: center;\n }`,\n cssDynamic: `.container {\n background-color: white;\n padding: .5rem;\n height: 100vh;\n width: 100vw;\n display: grid;\n gap: 1rem;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n }`,\n },\n {\n title: \"Tiled List - Flex\",\n html: `
\n
1
\n
2
\n
3
\n
4
\n
`,\n cssStatic: `\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n max-height: 100vh;\n }\n \n .box {\n border-radius: 1rem;\n display: grid;\n place-items: center;\n }`,\n cssDynamic: `.container {\n background-color: white;\n padding: .5rem;\n height: 100vh;\n width: 100vw;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 10px;\n }\n \n .box {\n /* flex shorthand */\n /* change values to see change */\n /* flex-grow flex-shrink flex-basis */\n flex: 1 0 200px;\n\n }\n `,\n },\n {\n title: \"Holy Grail\",\n html: `
\n
Header
\n
Left Sidebar
\n
Main Content
\n
Right Sidebar
\n
Footer
\n
`,\n cssStatic: `\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n }\n\n .container * {\n padding: 1rem;\n }\n `,\n cssDynamic: `\n .container {\n height: 100vh;\n width: 100vw;\n display: grid;\n grid-template: auto 1fr auto / auto 1fr auto;\n background: white;\n }\n \n .header{\n grid-column: 1 / 4;\n }\n \n .left-sidebar {\n grid-column: 1 / 2;\n }\n\n .main-content {\n grid-column: 2 / 3;\n }\n\n .right-sidebar {\n grid-column: 3 / 4;\n }\n\n .footer {\n grid-column: 1 / 4;\n }\n `,\n },\n {\n title: \"Cards List\",\n html: `
\n
\n
\n
\n
\n
\n
\n
\n
\n
`,\n cssStatic: ` \n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n }\n\n .box {\n width: 125px;\n height: 125px;\n border-radius: 1rem;\n background-color: grey;\n }\n `,\n cssDynamic: `\n .container {\n height: 100vh;\n width: 100vw;\n overflow-y: scroll;\n padding: 1rem;\n background: white;\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n align-content: flex-start;\n }\n\n `,\n },\n {\n title: \"Clamped Card Size\",\n html: `
\n
\n

TITLE

\n
\n

Pariatur nulla nisi excepteur ad aliquip magna esse culpa sint adipisicing et consectetur proident.

\n

\n
`,\n cssStatic: ` \n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n }\n .container {\n height: 100vh;\n width: 100vw;\n overflow-y: scroll;\n padding: 1rem;\n background: white;\n display: grid;\n place-items: center;\n }\n\n .container div {\n border-radius: .3rem;\n }\n\n h4 {\n font-size: 1.4rem;\n margin: 1rem;\n }\n\n p {\n font-size: 1rem;\n font-weight: 300;\n }\n \n `,\n cssDynamic: `\n .card {\n width: clamp(25ch, 50%, 40ch);\n height: 350px;\n display: flex;\n flex-direction: column;\n padding: .5rem;\n }\n\n .pic {\n height: 125px;\n width: 100%;\n }\n `,\n },\n {\n title: \"Maintain Image Aspect Ratio\",\n html: `
\n
\n

TITLE

\n
\n

Pariatur nulla nisi excepteur ad aliquip magna esse culpa sint adipisicing et consectetur proident.

\n

\n
`,\n cssStatic: ` \n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n }\n .container {\n height: 100vh;\n width: 100vw;\n overflow-y: scroll;\n padding: 1rem;\n background: white;\n display: grid;\n place-items: center;\n }\n\n .container div {\n border-radius: .3rem;\n }\n\n h4 {\n font-size: 1.4rem;\n margin: 1rem;\n }\n\n p {\n font-size: 1rem;\n font-weight: 300;\n }\n \n `,\n cssDynamic: `\n .card {\n width: clamp(25ch, 50%, 40ch);\n height: 350px;\n display: flex;\n flex-direction: column;\n padding: .5rem;\n }\n\n .pic {\n width: 100%;\n aspect-ratio: 16/9;\n }\n `,\n },\n {\n title: \"Masonry\",\n html: `
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
`,\n cssStatic: ` \n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n }\n\n .box:nth-child(n) {\n height: 130px;\n background-color: #ffa07d;\n }\n .box:nth-child(3n) {\n height: 100px;\n background-color: pink;\n }\n .box:nth-child(2n) {\n height: 80px;\n background-color: lightskyblue;\n }\n `,\n cssDynamic: `\n .container {\n height: 100vh;\n width: 100vw;\n padding: 1rem;\n background: white;\n columns: auto;\n column-width: 100px;\n column-gap: 1rem;\n }\n \n .box {\n width: 100px;\n border-radius: 1rem;\n display: inline-block;\n }\n `,\n },\n {\n title: \"Tree\",\n html: `
\n \n
`,\n cssStatic: ` \n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n }\n\n .container {\n height: 100vh;\n width: 100vw;\n background: white;\n display: grid;\n place-items: center;\n\n }\n\n .box {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 3px;\n background-color: #64A664;\n }\n `,\n cssDynamic: ` \n /* tree level */\n ul {\n position: relative;\n display: flex;\n justify-content: center;\n list-style-type: none;\n margin: 0;\n padding: 2rem 1rem 0rem 1rem;\n \n\n }\n\n /* node */\n li {\n padding: 2rem 1rem 0rem 1rem;\n position: relative;\n\n /* Center the content */\n align-items: center;\n display: flex;\n flex-direction: column;\n }\n\n /* vertical line before node */\n li::before {\n border-right: 1px solid rgba(0, 0, 0, 0.3);\n border-top: 1px solid rgba(0, 0, 0, 0.3);\n content: '';\n\n /* Position */\n position: absolute;\n top: 0;\n right: 50%;\n\n /* Size */\n height: 2rem;\n width: 50%;\n }\n\n /* vertical line after node */\n ul::before {\n border-right: 1px solid #000;\n content: '';\n\n /* size */\n width: 50%;\n height: 2rem;\n\n /* postition */\n position: absolute;\n top: 0;\n right: 50%;\n }\n\n /* horizontal line */\n li::after {\n border-top: 1px solid rgba(0, 0, 0, 0.3);\n content: '';\n\n /* Position */\n position: absolute;\n top: 0;\n right: 0;\n\n /* Size */\n width: 50%;\n }\n\n li:first-child::before,\n li:last-child::after {\n /* Remove the top of border from the first and last items */\n border-top: none;\n }\n\n /* Add a root item if you want */\n li_root::before {\n border-right: none;\n }\n `,\n },\n];\n\nfunction App() {\n return (\n
\n
\n

CSS Design Patterns

\n

CSS patterns that I find useful and you may too. :)

\n
\n {examples.map((example) => (\n \n ))}\n
\n );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}