Add CSS code for layout patterns

client/patterns/card-layout/Details.tsx

@@ -22,23 +22,9 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
-
-    /* Put a card in the next row when previous cards take all width */
-    flex-wrap: wrap;
-
-    margin-left: -8px;
-    margin-right: -8px;
-">
     <!-- A card with given width -->
-    <div style="
+    <div class="card">
-        /* There will be 4 cards per row */
-        flex-basis: 25%;
-
-        padding-left: 8px;
-        padding-right: 8px;
-    ">
         ...
     </div>
 
@@ -46,7 +32,24 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+
+    /* Put a card in the next row when previous cards take all width */
+    flex-wrap: wrap;
+
+    margin-left: -8px;
+    margin-right: -8px;
+}
+.card {
+    /* There will be 4 cards per row */
+    flex-basis: 25%;
+
+    padding-left: 8px;
+    padding-right: 8px;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/holy-grail/Details.tsx

@@ -22,45 +22,49 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
-    flex-direction: column;
-">
     <header>
         ...
     </header>
-    <main style="
+    <main class="main">
-        /* Take the remaining height */
-        flex-grow: 1;
-
-        /* Layout the left sidebar, main content and right sidebar */
-        display: flex;
-        flex-direction: row;
-    ">
         <!-- Left sidebar -->
-        <aside style="
+        <aside class="left">...</aside>
-            width: 25%;
-        ">...</aside>
 
         <!-- Main content -->
-        <article style="
+        <article class="middle">...</article>
-            /* Take the remaining width */
-            flex-grow: 1;
-        ">
-            ...
-        </article>
 
         <!-- Right sidebar -->
-        <nav style="
+        <nav class="right">...</nav>
-            width: 20%;
-        ">...</nav>
     </main>
     <footer>
         ...
     </footer>
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+    flex-direction: column;
+}
+.main {
+    /* Take the remaining height */
+    flex-grow: 1;
+
+    /* Layout the left sidebar, main content and right sidebar */
+    display: flex;
+    flex-direction: row;
+}
+.left {
+    width: 25%;
+}
+.middle {
+    /* Take the remaining width */
+    flex-grow: 1;
+}
+.right {
+    width: 20%;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/same-height-columns/Details.tsx

@@ -22,25 +22,14 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="display: flex;">
+<div class="container">
     <!-- Column -->
-    <div style="
+    <div class="column">
-        flex: 1;
-        /* Space between columns */
-        margin: 0 8px;
-
-        /* Layout each column */
-        display: flex;
-        flex-direction: column;
-    ">
         <!-- Cover -->
         ...
 
         <!-- Content -->
-        <div style="
+        <div class="content">
-            /* Take available height */
-            flex: 1;
-        ">
             ...
         </div>
 
@@ -52,7 +41,24 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+}
+.column {
+    flex: 1;
+    /* Space between columns */
+    margin: 0 8px;
+
+    /* Layout each column */
+    display: flex;
+    flex-direction: column;
+}
+.content {
+    /* Take available height */
+    flex: 1;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/sidebar/Details.tsx

@@ -22,25 +22,33 @@ const Details: React.FC<{}> = () => {
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
                 <BrowserFrame
 html={`
-<div style="display: flex;">
+<div class="container">
     <!-- Sidebar -->
-    <aside style="width: 30%;">
+    <aside class="sidebar">
         ...
     </aside>
 
     <!-- Main -->
-    <main style="
+    <main class="main">
+        ...
+    </main>
+</div>
+`}
+css={`
+.container {
+    display: flex;
+}
+.sidebar {
+    width: 30%;
+}
+.main {
     /* Take the remaining width */
     flex: 1;
 
     /* Make it scrollable */
     overflow: auto;
-    ">
+}
-        ...
-    </main>
-</div>
 `}
-css={``}
                 >
                     <div style={{ display: 'flex', height: '100%' }}>
                         <div

client/patterns/simple-grid/Details.tsx

@@ -23,30 +23,36 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame                    
 html={`
 <!-- Row -->
-<div style="
+<div class="row">
-    display: flex;
-
-    margin-left: -8px;
-    margin-right: -8px;
-">
     <!--Cell with given width. Replace 25% with whatever you want -->
-    <div style="
+    <div class="cell width-1/4">25%</div>
-        flex: 0 0 25%;
-        padding-left: 8px;
-        padding-right: 8px;
-    ">25%</div>
 
     <!-- Cell that takes remaining width -->
-    <div style="
+    <div class="cell width-fill">
-        flex: 1;
-        padding-left: 8px;
-        padding-right: 8px;
-    ">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.row {
+    display: flex;
+
+    margin-left: -8px;
+    margin-right: -8px;
+}
+.cell {
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+/* Cell with given width. Replace 25% with whatever you want */
+.cell.width-1/4 {
+    flex: 0 0 25%;
+}
+.cell.width-fill {
+    flex: 1;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/split-screen/Details.tsx

@@ -23,19 +23,26 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="display: flex;">
+<div class="container">
     <!-- Left content -->
-    <div style="flex: 1;">
+    <div class="half">
         ...
     </div>
 
     <!-- Right content -->
-    <div style="flex: 1;">
+    <div class="half">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+}
+.half {
+    flex: 1;
+}
+`}
                 >
                     <div style={{ display: 'flex', height: '100%' }}>
                         <div

client/patterns/sticky-footer/Details.tsx

@@ -25,23 +25,32 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
+    <header class="header">
-    flex-direction: column;
-    height: 100%;
-">
-    <header style="flex-shrink: 0;">
         ...
     </header>
-    <main style="flex-grow: 1;">
+    <main class="main">
         ...
     </main>
-    <footer style="flex-shrink: 0;">
+    <footer class="footer">
         ...
     </footer>
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+.header,
+.footer {
+    flex-shrink: 0;
+}
+.main {
+    flex-grow: 1;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/sticky-header/Details.tsx

@@ -27,11 +27,7 @@ const Details: React.FC<{}> = () => {
                 <BrowserFrame
 html={`
 <div>
-    <header style="
+    <header class="header">
-        /* Stick to the top */
-        position: sticky;
-        top: 0;
-    ">
         ...
     </header>
     <main>
@@ -39,7 +35,13 @@ html={`
     </main>
 </div>
 `}
-css={``}
+css={`
+.header {
+    /* Stick to the top */
+    position: sticky;
+    top: 0;
+}
+`}
                 >
                     <div>
                         <div

client/patterns/sticky-sections/Details.tsx

@@ -24,19 +24,8 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    height: 100%;
+    <section class="section">
-    overflow: scroll;
-">
-    <section style="
-        /* Take full size */
-        height: 100%;
-        width: 100%;
-
-        /* Stick to the top */
-        position: sticky;
-        top: 0;
-    ">
         ...
     </section>
 
@@ -44,7 +33,21 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    height: 100%;
+    overflow: scroll;
+}
+.section {
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Stick to the top */
+    position: sticky;
+    top: 0;
+}
+`}
                 >
                     <div
                         style={{