Index: includes/styleguide/grid/2-column.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/grid/2-column.html
@@ -0,0 +1,5 @@
+
+
Index: includes/styleguide/grid/3-column.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/grid/3-column.html
@@ -0,0 +1,10 @@
+
+
+
Index: includes/styleguide/grid/4-column.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/grid/4-column.html
@@ -0,0 +1,11 @@
+
+
+
Index: includes/styleguide/grid/all-column-widths.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/grid/all-column-widths.html
@@ -0,0 +1,13 @@
+
+
+
+
Index: includes/styleguide/grid/index.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/grid/index.html
@@ -0,0 +1,16 @@
+
+Grid
+
+2-Column
+ include styleguide/grid/2-column ?>
+
+3-Column
+ include styleguide/grid/3-column ?>
+
+4-Column
+ include styleguide/grid/4-column ?>
+
+Reversed
+
+ include styleguide/grid/4-column ?>
+
Index: includes/styleguide/lists/description.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/lists/description.html
@@ -0,0 +1,11 @@
+
+
+ - Item title
+ - Item description
+
+ - Item title
+ - Item description
+
+ - Item title
+ - Item description
+
Index: includes/styleguide/lists/index.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/lists/index.html
@@ -0,0 +1,11 @@
+
+Lists
+
+Ordered lists
+ include styleguide/lists/ordered ?>
+
+Unordered lists
+ include styleguide/lists/unordered ?>
+
+Description lists
+ include styleguide/lists/description ?>
Index: includes/styleguide/lists/ordered.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/lists/ordered.html
@@ -0,0 +1,14 @@
+
+
+ - List item
+ - List item
+ -
+ List item
+
+ - List item
+ - List item
+ - List item
+
+
+ - List item
+
Index: includes/styleguide/lists/unordered.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/lists/unordered.html
@@ -0,0 +1,14 @@
+
+
+ - List item
+ - List item
+ -
+ List item
+
+ - List item
+ - List item
+ - List item
+
+
+ - List item
+
Index: includes/styleguide/typography/blockquotes.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/typography/blockquotes.html
@@ -0,0 +1,5 @@
+
+
+ We want to make the internet better for everyone. Purging bad ads is a good start.
+ Eyeo Gmbh
+
Index: includes/styleguide/typography/body.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/typography/body.html
@@ -0,0 +1,21 @@
+
+This is normal text
+
+This is emphasized text
+
+This is strong text
+
+This is a link
+
+This is an abbr
+
+This has a footnote
+
+
Index: includes/styleguide/typography/headings.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/typography/headings.html
@@ -0,0 +1,12 @@
+
+Heading 1
+
+Heading 2
+
+Heading 3
+
+Heading 4
+
+Heading 5
+
+Heading 6
Index: includes/styleguide/typography/index.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/styleguide/typography/index.html
@@ -0,0 +1,11 @@
+
+Typography
+
+Headings
+ include styleguide/typography/headings ?>
+
+Body content
+ include styleguide/typography/body ?>
+
+Blockquotes
+ include styleguide/typography/blockquotes ?>
Index: pages/content-styleguide.md
===================================================================
new file mode 100644
--- /dev/null
+++ b/pages/content-styleguide.md
@@ -0,0 +1,81 @@
+title=Content Styleguide
+
+# Content Styleguide
+
+A guide to writing content for eyeo websites.
+
+1. [Headings](#headings)
+1. [Body Content](#body-content)
+1. [Quotes](#quotes)
+1. [Lists](#lists)
+
+## Headings { #headings }
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+## Body Content { #body-content }
+
+This is normal text
+
+This is *emphasized* text
+
+This is **strong** text
+
+This is a [link](https://example.com/)
+
+This is an abbr
+
+*[abbr]: Abbreviation
+
+This has a footnote[^1]
+
+[^1]: This is a footnote content
+
+## Quotes { #quotes }
+
+> We want to **make the internet better** for everyone. Purging bad ads is a good start.
+>
+> Eyeo Gmbh
+
+## Lists { #lists }
+
+### Ordered Lists
+
+01. List item
+02. List item
+03. List item
+ 01. List item
+ 02. List item
+ 03. List item
+04. List item
+
+### Unordered Lists
+
+- List item
+- List item
+- List item
+ - List item
+ - List item
+ - List item
+- List item
+
+### Description Lists
+
+Item title
+: Item description
+
+Item title
+: Item description
+
+Item title
+: Item description
Index: pages/content.html
===================================================================
--- a/pages/content.html
+++ b/pages/content.html
@@ -6,65 +6,31 @@
- Headings
- Body content
- Lists
- Images
Headings
-Heading 1
-Heading 2
-Heading 3
-Heading 4
-Heading 5
-Heading 6
+ include styleguide/typography/headings ?>
Body content
-This is a normal.
-This is emphasized.
-This is strong.
-This is an abbr.
-This is a link.
-This has a footnote.
-This is a blockquote.
+ include styleguide/typography/body ?>
Lists
Ordered lists
-
- - This is a list item
- - This is a list item
-
- - This is a list item
- - This is a list item
-
-
- - This is a list item
-
+ include styleguide/lists/ordered ?>
Unordered lists
-
- - This is a list item
- - This is a list item
-
- - This is a list item
- - This is a list item
-
-
- - This is a list item
-
+ include styleguide/lists/unordered ?>
Description lists
-
- - This is a description title
- - This is a description detail.
- - This is a description title
- - This is a description detail.
-
+ include styleguide/lists/description ?>
Images
Index: pages/developer-styleguide.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/pages/developer-styleguide.html
@@ -0,0 +1,36 @@
+title=Developer Styleguide
+
+Developer Styleguide
+A guide to developing eyeo websites.
+
+
+ -
+ Typography
+
+ - Headings
+ - Body content
+ - Blockquotes
+
+
+ -
+ Lists
+
+ - Ordered lists
+ - Unordered lists
+ - Description lists
+
+
+ -
+ Grid
+
+ - 2-column grid
+ - 3-column grid
+ - 4-column grid
+ - Reversed grid
+
+
+
+
+ include styleguide/typography/index ?>
+ include styleguide/lists/index ?>
+ include styleguide/grid/index ?>
Index: pages/grid.html
===================================================================
--- a/pages/grid.html
+++ b/pages/grid.html
@@ -8,69 +8,34 @@
Tablet
Mobile
Reverse
Right-to-left
Reverse & right-to-left
Desktop
-
-
-
+ include styleguide/grid/all-column-widths ?>
Tablet
-
-
-
+ include styleguide/grid/all-column-widths ?>
Mobile
-
-
-
+ include styleguide/grid/all-column-widths ?>
Reverse
-
-
-
+
+ include styleguide/grid/2-column ?>
Right-to-left
-
+ include styleguide/grid/2-column ?>
Reverse & right-to-left
-
-
+
+ include styleguide/grid/2-column ?>
Index: pages/index.html
===================================================================
--- a/pages/index.html
+++ b/pages/index.html
@@ -3,9 +3,11 @@
Website defaults
Default resources for eyeo websites.
Components
- Content
- Grid
+ - Content Styleguide
+ - Developer Styleguide