fix(display): docs update

ZopaPublic · Feb 9, 2023 · a4962f2 · a4962f2
1 parent 513013f
commit a4962f2
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 10 deletions.
diff --git a/src/content/Display/Display.md b/src/content/Display/Display.md
@@ -0,0 +1,25 @@
+### Summary
+
+This library exports **Tailwind** flavoured [atomic classes](https://css-tricks.com/lets-define-exactly-atomic-css/) for dealing with spacing within components.
+
+Here's a guide on how to use them:
+
+- [https://night-tailwindcss.vercel.app/docs/display](https://night-tailwindcss.vercel.app/docs/display)
+
+The avalible properties are:
+
+- `.{displayProperty}`
+- `.{s|m|l|xl}:{displayProperty}`
+
+### Examples
+
+```tsx static
+// Some examples
+
+<>
+  <div className="hidden m:block">I am hidden at mobile but visible on desktop</div>
+  <div className="hidden m:block l:hidden">I am hidden at mobile but visible on tablet and hidden on desktop</div>
+  <div className="flex">I am a flexible div</div>
+  <div className="hidden m:flex">I am hidden at mobile but a flexible div at tablet and desktop</div>
+</>
+```
diff --git a/src/content/Spacing/Spacing.md b/src/content/Spacing/Spacing.md
@@ -4,22 +4,69 @@ This library exports **Tailwind** flavoured [atomic classes](https://css-tricks.
 
 Here's a guide on how to use them:
 
-- [https://night-tailwindcss.vercel.app/docs/display](https://night-tailwindcss.vercel.app/docs/display)
+- [margin](https://tailwindcss.com/docs/margin/#add-margin-to-a-single-side)
+- [padding](https://tailwindcss.com/docs/padding/#add-padding-to-a-single-side)
 
-The avalible properties are:
+This is our available spacing scale which is made out of **multiples of 4**:
 
-- `.{displayProperty}`
-- `.{s|m|l|xl}:{displayProperty}`
+```tsx static
+const spacingScale = {
+  'auto': 'auto', //Only available with margin
+  '0': '0',
+  '1': '4px',
+  '2': '8px',
+  '3': '12px',
+  '4': '16px',
+  '5': '20px',
+  '6': '24px',
+  '7': '32px',
+  '8': '40px',
+  '9': '56px',
+  '10': '64px',
+  '11': '104px',
+};
 
-### Examples
+/**
+ * Using the indexes on the spacing scale above:
+ */
+<div className='mr-10' /> // margin-right: 64px
+<div className='mx-5' /> // margin-left: 20px margin-right: 20px
+<div className='pt-2' /> // padding-top: 8px
+```
+
+You can also specify **breakpoints** at which to start applying the spacing:
 
 ```tsx static
-// Some examples
+// available breakpoints
+const breakpoints: {
+  l: 992;
+  m: 768;
+  s: 576;
+  xl: 1300;
+  xs: 0;
+};
+
+<div className='l:mr-10' /> // apply `margin-right: 64px` for screens wider than 992px
+<div className='s:pt-2' /> // apply `padding-top: 8px` for screens wider than 576px
+```
+
+### Examples
 
+```tsx
+// `<Spacing />` is NOT available in the library. It is used for documentation only.
 <>
-  <div className="hidden m:block">I am hidden at mobile but visible on desktop</div>
-  <div className="hidden m:block l:hidden">I am hidden at mobile but visible on tablet and hidden on desktop</div>
-  <div className="flex">I am a flexible div</div>
-  <div className="hidden m:flex">I am hidden at mobile but a flexible div at tablet and desktop</div>
+  <div className="mb-5">
+    <Spacing className="mr-6 p-3">margin-right 24px</Spacing>
+    <Spacing className="p-3">Block</Spacing>
+  </div>
+  <div>
+    <Spacing className="l:mr-9 p-3">margin-right 56px on screens wider than 992px</Spacing>
+    <Spacing className="p-3">Block</Spacing>
+  </div>
+  <div>
+    <Spacing className="l:mx-auto" style={{ display: 'block', width: '70%' }}>
+      margin-left auto margin-right auto on screens wider than 992px
+    </Spacing>
+  </div>
 </>
 ```