Grid component (#41)

Closes #3

src/lib/Spacing.stories.svelte

@@ -18,6 +18,7 @@
     <div class="w-f64 bg-teal">f64 - 64px</div>
     <div class="w-f80 bg-teal">f80 - 80px</div>
     <div class="w-f96 bg-teal">f96 - 96px</div>
+    <div class="w-f120 bg-teal">f120 - 120px</div>
     <div class="w-f128 bg-teal">f128 - 128px</div>
     <div class="w-f160 bg-teal">f160 - 160px</div>
     <div class="w-f192 bg-teal">f192 - 192px</div>

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:xs md: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-f16 md:m-f32 lg:m-f120 {$$restProps.class}">
+<div class="grid grid-cols-4 gap-f16 md:grid-cols-6 lg:grid-cols-12 lg:gap-f32">
+  <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 {
@@ -56,6 +57,7 @@ export default {
         f64: '64px',
         f80: '80px',
         f96: '96px',
+        f120: '120px',
         f128: '128px',
         f160: '160px',
         f192: '192px',
@@ -68,6 +70,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: [],
 };