improve docs, add spacing-px and spacing-05

README.md

@@ -7,17 +7,89 @@ An abstract baseline css framework
 
 Ghost is not a framework, it'S merely a set of css variables which provide a nice foundation for small css projects and constistent styling.
 
+The premise of ghost is that it should **not be visible** in your project. 
+
 ## What does it include?
 
 Ghost includes the following components:
 
-- Colors
-- Spacing
-- Flexbox
 - Font size
+- Spacing
+- Colors
+
+## Font size
+
+### Configuration
+
+The following values can be used to configure the font size:
+
+```css
+:root {
+	--text-scale: 1.2;
+}
+```
+
+Building on this value, these variables are available, where `--text-sm` is slightly less than `1em` and `--text-md` is slightly more.
+
+```css
+--text-xs
+--text-sm
+--text-md
+--text-lg
+--text-xl
+--text-xxl
+--text-xxxl
+```
+
+## Spacing
+
+Spacing is best show with the actual classes. The basic principle is, whenever the number in the name (eg. `--spacing-3`) doubles, the corresponding spacing should also double (`--spacing-6`).
+
+```css
+--spacing-0: 0;
+--spacing-px: 1px;
+--spacing-05: 0.125rem; 
+
+/* 1 */
+--spacing-1: 0.25rem;
+--spacing-2: 0.5rem;
+--spacing-3: 0.75rem;
+--spacing-4: 1rem;
+--spacing-5: 1.25rem;
+--spacing-6: 1.5rem;
+--spacing-7: 1.75rem;
+--spacing-8: 2rem;
+--spacing-9: 2.25rem;
+--spacing-10: 2.5rem;
+
+/* 2 */
+--spacing-12: 3rem;
+--spacing-14: 3.5rem;
+--spacing-16: 4rem;
+--spacing-18: 4.5rem;
+--spacing-20: 5rem;
+
+/* 4 */
+--spacing-24: 6rem;
+--spacing-28: 7rem;
+--spacing-32: 8rem;
+--spacing-36: 9rem;
+--spacing-40: 10rem;
+
+/* 8 */
+--spacing-48: 12rem;
+--spacing-56: 14rem;
+--spacing-64: 16rem;
+--spacing-80: 20rem;
+--spacing-96: 24rem;
+```
 
 ## Colors
 
+Colors are divided in a set of different grays, ranging from more cold colors to a neutral set (which is the default) to warmer colors, and a palette of colors.
+
+Every color has 10 values, `--<color>-50` and from `--<color>-100` and with `--<color>-900`.
+
 The included colors are taken from the great [Tailwind.css](https://tailwindcss.com).
 
 ![Tailwind Palette](./media/tailwind.png)

src/app.css

@@ -1,4 +1,7 @@
 import "modern-normalize";
 
-import "greys.css";
-import "colors.css";
+import "grays.css";
+import "colors.css";
+import "spacing.css";
+import "font-scale.css";
+

src/font-scale.css

@@ -0,0 +1,12 @@
+:root {
+	--font-size: 1rem;
+	--text-scale-ratio: var(--text-scale, 1.2);
+
+	--text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
+	--text-sm: calc(1em / var(--text-scale-ratio));
+	--text-md: calc(1em * var(--text-scale-ratio));
+	--text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
+	--text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
+	--text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
+	--text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
+}

src/spacing.css

@@ -0,0 +1,38 @@
+:root {
+	--spacing-0: 0;
+	--spacing-px: 1px;
+	--spacing-05: 0.125rem; 
+
+	/* 1 */
+	--spacing-1: 0.25rem;
+	--spacing-2: 0.5rem;
+	--spacing-3: 0.75rem;
+	--spacing-4: 1rem;
+	--spacing-5: 1.25rem;
+	--spacing-6: 1.5rem;
+	--spacing-7: 1.75rem;
+	--spacing-8: 2rem;
+	--spacing-9: 2.25rem;
+	--spacing-10: 2.5rem;
+
+	/* 2 */
+	--spacing-12: 3rem;
+	--spacing-14: 3.5rem;
+	--spacing-16: 4rem;
+	--spacing-18: 4.5rem;
+	--spacing-20: 5rem;
+
+	/* 4 */
+	--spacing-24: 6rem;
+	--spacing-28: 7rem;
+	--spacing-32: 8rem;
+	--spacing-36: 9rem;
+	--spacing-40: 10rem;
+
+	/* 8 */
+	--spacing-48: 12rem;
+	--spacing-56: 14rem;
+	--spacing-64: 16rem;
+	--spacing-80: 20rem;
+	--spacing-96: 24rem;
+}