[refs #3] Add demo content for all modules

inuitcss · Oct 20, 2016 · f9f3f32 · f9f3f32
1 parent a48a0a7
commit f9f3f32
Show file tree

Hide file tree

Showing 46 changed files with 720 additions and 4 deletions.
diff --git a/_demo/components/example.html b/_demo/components/example.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/components.example/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">Example</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/block.html b/_demo/objects/block.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/block/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-block</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/box.html b/_demo/objects/box.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/box/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-box</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/crop.html b/_demo/objects/crop.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/crop/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-crop</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/layout.html b/_demo/objects/layout.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/layout/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-layout</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/list-bare.html b/_demo/objects/list-bare.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/list-bare/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-list-bare</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/list-inline.html b/_demo/objects/list-inline.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/list-inline/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-list-inline</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/pack.html b/_demo/objects/pack.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/pack/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-pack</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/ratio.html b/_demo/objects/ratio.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/ratio/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-ratio</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/tables.html b/_demo/objects/tables.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/tables/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-table</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/objects/wrapper.html b/_demo/objects/wrapper.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/wrapper/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-wrapper</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/utilities/clearfix.html b/_demo/utilities/clearfix.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/clearfix/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.u-clearfix</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/utilities/headings.html b/_demo/utilities/headings.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/headings/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">Headings</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/utilities/hide.html b/_demo/utilities/hide.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/hide/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">Hide</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/utilities/spacing.html b/_demo/utilities/spacing.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/spacing/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">Spacing</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_demo/utilities/widths.html b/_demo/utilities/widths.html
@@ -0,0 +1,8 @@
+---
+layout: demo
+permalink: /demo/widths/
+---
+
+<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">Widths</h3>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, asperiores, iure! Sequi dicta vitae, sed ea molestiae libero velit corporis suscipit, minima. Doloremque maiores sit ea molestias beatae, totam ad!</p>
diff --git a/_docs/components/example.md b/_docs/components/example.md
@@ -0,0 +1,16 @@
+---
+layout: page
+title: "Example"
+group: components
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_example.components.buttons.scss"
+demo: "components.example"
+---
+
+{% include file-info.html %}
+
+
+
+{% include demo-iframe.html %}
diff --git a/_docs/elements/headings.md b/_docs/elements/headings.md
@@ -0,0 +1,13 @@
+---
+layout: page
+title: "Headings"
+group: elements
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_elements.headings.scss"
+---
+
+{% include file-info.html %}
+
+Headings
diff --git a/_docs/elements/images.md b/_docs/elements/images.md
@@ -0,0 +1,13 @@
+---
+layout: page
+title: "Images"
+group: elements
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_elements.images.scss"
+---
+
+{% include file-info.html %}
+
+Images
diff --git a/_docs/elements/page.md b/_docs/elements/page.md
@@ -0,0 +1,13 @@
+---
+layout: page
+title: "Page"
+group: elements
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_elements.page.scss"
+---
+
+{% include file-info.html %}
+
+Page
diff --git a/_docs/elements/tables.md b/_docs/elements/tables.md
@@ -0,0 +1,13 @@
+---
+layout: page
+title: "Tables"
+group: elements
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_elements.tables.scss"
+---
+
+{% include file-info.html %}
+
+Tables
diff --git a/_docs/generic/box-sizing.md b/_docs/generic/box-sizing.md
@@ -0,0 +1,13 @@
+---
+layout: page
+title: "Box-sizing"
+group: generic
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_generic.box-sizing.scss"
+---
+
+{% include file-info.html %}
+
+[css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice)
diff --git a/_docs/generic/normalize.md b/_docs/generic/normalize.md
@@ -0,0 +1,13 @@
+---
+layout: page
+title: "Normalize.css"
+group: generic
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_generic.normalize.scss"
+---
+
+{% include file-info.html %}
+
+[Normalize.css](https://necolas.github.io/normalize.css/)
diff --git a/_docs/generic/reset.md b/_docs/generic/reset.md
@@ -0,0 +1,13 @@
+---
+layout: page
+title: "Reset"
+group: generic
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_generic.reset.scss"
+---
+
+{% include file-info.html %}
+
+Reset
diff --git a/_docs/generic/shared.md b/_docs/generic/shared.md
@@ -0,0 +1,13 @@
+---
+layout: page
+title: "Shared"
+group: generic
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_generic.shared.scss"
+---
+
+{% include file-info.html %}
+
+Shared
diff --git a/_docs/objects/block.md b/_docs/objects/block.md
@@ -0,0 +1,28 @@
+---
+layout: page
+title: "Block object"
+group: objects
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_objects.block.scss"
+demo: "block"
+classes: [
+    "o-block",
+    "o-block--tiny",
+    "o-block--small",
+    "o-block--large",
+    "o-block--huge",
+    "o-block--flush",
+    "o-block--right",
+    "o-block--left"
+]
+---
+
+{% include file-info.html %}
+
+{% include class-list.html %}
+
+
+
+{% include demo-iframe.html %}
diff --git a/_docs/objects/box.md b/_docs/objects/box.md
@@ -0,0 +1,26 @@
+---
+layout: page
+title: "Box object"
+group: objects
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_objects.box.scss"
+demo: "box"
+classes: [
+    "o-box",
+    "o-box--tiny",
+    "o-box--small",
+    "o-box--large",
+    "o-box--huge",
+    "o-box--flush"
+]
+---
+
+{% include file-info.html %}
+
+{% include class-list.html %}
+
+
+
+{% include demo-iframe.html %}
diff --git a/_docs/objects/crop.md b/_docs/objects/crop.md
@@ -0,0 +1,27 @@
+---
+layout: page
+title: "Crop object"
+group: objects
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_objects.crop.scss"
+demo: "crop"
+classes: [
+    "o-crop",
+    "o-crop--2:1",
+    "o-crop--4:3",
+    "o-crop--16:9",
+    "o-crop__content--right",
+    "o-crop__content--bottom",
+    "o-crop__content--center"
+]
+---
+
+{% include file-info.html %}
+
+{% include class-list.html %}
+
+
+
+{% include demo-iframe.html %}
diff --git a/_docs/objects/layout.md b/_docs/objects/layout.md
@@ -0,0 +1,26 @@
+---
+layout: page
+title: "Layout object"
+group: objects
+page-class: c-page--docs
+has-sub-content: true
+sub-content: docs
+filename: "_objects.layout.scss"
+demo: "layout"
+classes: [
+    "o-layout",
+    "o-layout--tiny",
+    "o-layout--small",
+    "o-layout--large",
+    "o-layout--huge",
+    "o-layout--flush"
+]
+---
+
+{% include file-info.html %}
+
+{% include class-list.html %}
+
+
+
+{% include demo-iframe.html %}