grid component

Author: shannonwells

src/lib/consts.ts

@@ -0,0 +1 @@
+export const MAX_PAGE_WIDTH: number = 1700;

src/lib/features/Grid.stories.svelte

@@ -0,0 +1,31 @@
+<script>
+  import Grid from './Grid.svelte';
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  const content = [
+    'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s,',
+    'when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
+    'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
+    'It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,',
+    'and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
+    'Contrary to popular belief, Lorem Ipsum is not simply random text.',
+    'It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.',
+    'Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words:',
+    'consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.',
+    'Quisque vitae ipsum enim.',
+    'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ',
+    'Aliquam lobortis nisl mi, et ultrices mi gravida ac.',
+  ];
+</script>
+<Meta title="Design System/Grid" />
+Resize window or activate responsive sizing in the development panel to see grid changes.
+<Story name="Grid">
+  <Grid class="xs:text-xs md:text-sm">
+    {#each content as line, i}
+      <p><b>Paragraph {i+1}: </b>
+        {line}
+      </p>
+    {/each}
+  </Grid>
+  <p>Source: <a class="underline text-brightBlue hover:text-gray2" href="https://www.lipsum.com/">Lorem Ipsum</a></p>
+</Story>

src/lib/features/Grid.svelte

@@ -0,0 +1,7 @@
+<style>
+</style>
+<div class="m-4 md:m-8 lg:m-32 {$$restProps.class}">
+<div class="grid grid-cols-4 gap-4 sm:grid-cols-4 md:gap-8 md:grid-cols-6 lg:grid-cols-12 lg:gap-8">
+  <slot />
+</div>
+</div>

tailwind.config.ts

@@ -1,4 +1,5 @@
 import tailwindColors from './src/lib/styles/tailwindColors';
+import { MAX_PAGE_WIDTH } from './src/lib/consts';
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -68,6 +69,17 @@ export default {
         lg: '0px 4px 10px 0px #00000040',
       },
     },
+    screens: {
+      xs: '0',
+      sm: '320px',
+      md: '744px',
+      lg: '1300px',
+      xl: `${MAX_PAGE_WIDTH}px`,
+      'vertical-lg': { raw: '(max-height: 700px) and (min-width: 1300px)' },
+      'vertical-md': { raw: '(max-height: 700px) and (min-width: 900px)' },
+      vertical: { raw: '(max-height: 700px) or (min-width: 0px)' },
+      horizontal: { raw: '(min-height: 700px) and (min-width: 1300px)' },
+    },
   },
   plugins: [],
 };