[refs #3] Refactor **everything** (I'm sorry!)

inuitcss · Feb 23, 2018 · 4043e14 · 4043e14
1 parent 6b1714b
commit 4043e14
Show file tree

Hide file tree

Showing 77 changed files with 365 additions and 883 deletions.
diff --git a/README.md b/README.md
@@ -2,12 +2,10 @@
 
 Writing blog posts is [default jekyll procedure](https://jekyllrb.com/docs/posts/).
 
-
-
 ## Docs
 
-All docs pages are contained in the `/docs` directory and get a "docs" category as YAML front matter. General documentation is stored directly in `/docs` and get the YAML front matter tag "general". When a page is in a layer subdirectory, it gets a tag with the respective layer name. E.g. `objects.media.md` gets a "objects" tag. If it's an layer overview page, e.g. `objects.md`, it gets the tags "general objects".
+All docs pages are contained in the `/docs` directory.
 
 ---
 
-Tested with jekyll 3.1.6
+Tested with jekyll 3.7.0
diff --git a/_config.yml b/_config.yml
@@ -24,3 +24,10 @@ collections:
   demo:
     output: true
     permalink: /:collection/:path/
+
+defaults:
+  - scope:
+      path: ""
+      type: docs
+    values:
+      layout: page
diff --git a/_demo/objects/block.html b/_demo/objects/block.html
@@ -1,8 +1,101 @@
 ---
 layout: demo
 permalink: /demo/block/
+handle: block
 ---
 
-<h3 class="u-margin-bottom-small" class="u-margin-bottom-small">.o-block</h3>
+<h3 class="u-margin-bottom-small" style="text-align: center;" class="u-margin-bottom-small">.o-block</h3>
+<div class="o-block">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
 
-<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>
+
+<br>
+
+
+<h3 class="u-margin-bottom-small" style="text-align: center;">.o-block--tiny</h3>
+<div class="o-block  o-block--tiny">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
+
+
+<br>
+
+
+<h3 class="u-margin-bottom-small" style="text-align: center;">.o-block--small</h3>
+<div class="o-block  o-block--small">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
+
+
+<br>
+
+
+<h3 class="u-margin-bottom-small" style="text-align: center;">.o-block--large</h3>
+<div class="o-block  o-block--large">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
+
+
+<br>
+
+
+<h3 class="u-margin-bottom-small" style="text-align: center;">.o-block--huge</h3>
+<div class="o-block  o-block--huge">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
+
+
+<br>
+
+
+<h3 class="u-margin-bottom-small" style="text-align: center;">.o-block--flush</h3>
+<div class="o-block  o-block--flush">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
+
+
+<br>
+
+
+<h3 class="u-margin-bottom-small" style="text-align: right;">.o-block--right</h3>
+<div class="o-block  o-block--right">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
+
+
+<br>
+
+
+<h3 class="u-margin-bottom-small" style="text-align: left;">.o-block--left</h3>
+<div class="o-block  o-block--left">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
+
+
+<br>
+<br>
diff --git a/_demo/objects/block/block--small.html b/_demo/objects/block/block--small.html
@@ -0,0 +1,16 @@
+---
+layout: demo
+permalink: /demo/block--small/
+handle: block--small
+---
+
+<div class="o-block  o-block--small">
+    <img class="o-block__img" src="http://placehold.it/250x150">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Quasi, nihil corrupti error, eius est architecto voluptatibus
+        totam necessitatibus explicabo consequatur impedit natus
+        maiores adipisci quidem autem nostrum quam eaque quisquam
+        fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
diff --git a/_demo/objects/block/block.html b/_demo/objects/block/block.html
@@ -0,0 +1,13 @@
+---
+layout: demo
+permalink: /demo/block/
+handle: block
+---
+
+<h3 class="u-margin-bottom-small" style="text-align: center;" class="u-margin-bottom-small">.o-block</h3>
+<div class="o-block">
+    <img class="o-block__img" src="http://placehold.it/250x150" alt="block image">
+    <div class="o-block__body">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, nihil corrupti error, eius est architecto voluptatibus totam necessitatibus explicabo consequatur impedit natus maiores adipisci quidem autem nostrum quam eaque quisquam fugit deleniti ullam, laboriosam, ipsa.
+    </div>
+</div>
diff --git a/_docs/conventions.md → _docs/00-getting-started/conventions.md b/_docs/conventions.md → _docs/00-getting-started/conventions.md
@@ -1,10 +1,7 @@
 ---
-layout: page
 title: "Conventions"
-group: getting-started
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Getting Started"
+order: 30
 ---
 
 inuitcss relies on a handful of conventions which might be useful to know about

diff --git a/_docs/directory-structure.md → ...00-getting-started/directory-structure.md b/_docs/directory-structure.md → ...00-getting-started/directory-structure.md
@@ -1,10 +1,7 @@
 ---
-layout: page
 title: "Directory Structure"
-group: getting-started
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Getting Started"
+order: 10
 ---
 
 inuitcss follows a specific folder structure, which you should follow as well in your own CSS directory:

diff --git a/_docs/index.md → _docs/00-getting-started/index.md b/_docs/index.md → _docs/00-getting-started/index.md
@@ -1,11 +1,9 @@
 ---
-layout: page
 title: "Introduction"
-group: getting-started
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Getting Started"
 permalink: /docs/
+root: true
+order: 1
 ---
 
 Get started with inuitcss.

diff --git a/_docs/modifying-inuitcss.md → .../00-getting-started/modifying-inuitcss.md b/_docs/modifying-inuitcss.md → .../00-getting-started/modifying-inuitcss.md
@@ -1,10 +1,7 @@
 ---
-layout: page
 title: "Modifying inuitcss"
-group: getting-started
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Getting Started"
+order: 20
 ---
 
 inuitcss is highly configurable, but **should not be edited directly**. The correct way to make changes to inuitcss is to pass in variables **before** you `@import` the specific file.

diff --git a/_docs/reading-these-docs.md → .../00-getting-started/reading-these-docs.md b/_docs/reading-these-docs.md → .../00-getting-started/reading-these-docs.md
@@ -1,10 +1,7 @@
 ---
-layout: page
 title: "Reading These Docs"
-group: getting-started
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Getting Started"
+order: 40
 ---
 
 Anything that is mandatory is written plainly, e.g.:

diff --git a/_docs/setup.md → _docs/00-getting-started/setup.md b/_docs/setup.md → _docs/00-getting-started/setup.md
@@ -1,10 +1,7 @@
 ---
-layout: page
 title: "Setup"
-group: getting-started
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Getting Started"
+order: 5
 ---
 
 Once you have got inuitcss into your project using one of the [methods outlined

diff --git a/_docs/settings/core.md → _docs/01-settings/core.md b/_docs/settings/core.md → _docs/01-settings/core.md
@@ -1,13 +1,10 @@
 ---
-layout: page
 title: "Core"
-group: settings
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Settings"
 filename: "_settings.core.scss"
 permalink: /docs/settings/core/
 requirement: required
+order: 1
 ---
 
 {% include file-info.html %}

diff --git a/_docs/tools/clearfix.md → _docs/02-tools/clearfix.md b/_docs/tools/clearfix.md → _docs/02-tools/clearfix.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Clearfix"
-group: tools
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Tools"
 filename: "_tools.clearfix.scss"
 requirement: required
+order: 1
 ---
 
 {% include file-info.html %}

diff --git a/_docs/tools/font-size.md → _docs/02-tools/font-size.md b/_docs/tools/font-size.md → _docs/02-tools/font-size.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Font-size"
-group: tools
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Tools"
 filename: "_tools.font-size.scss"
 requirement: required
+order: 10
 ---
 
 {% include file-info.html %}

diff --git a/_docs/tools/hidden.md → _docs/02-tools/hidden.md b/_docs/tools/hidden.md → _docs/02-tools/hidden.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Hidden"
-group: tools
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Tools"
 filename: "_tools.hidden.scss"
 requirement: required
+order: 30
 ---
 
 {% include file-info.html %}

diff --git a/_docs/generic/box-sizing.md → _docs/03-generic/box-sizing.md b/_docs/generic/box-sizing.md → _docs/03-generic/box-sizing.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Box-sizing"
-group: generic
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Generic"
 filename: "_generic.box-sizing.scss"
 requirement: required
+order: 1
 ---
 
 {% include file-info.html %}

diff --git a/_docs/generic/normalize.md → _docs/03-generic/normalize.md b/_docs/generic/normalize.md → _docs/03-generic/normalize.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Normalize.css"
-group: generic
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Generic"
 filename: "_generic.normalize.scss"
 requirement: recommended
+order: 10
 ---
 
 {% include file-info.html %}

diff --git a/_docs/generic/reset.md → _docs/03-generic/reset.md b/_docs/generic/reset.md → _docs/03-generic/reset.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Reset"
-group: generic
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Generic"
 filename: "_generic.reset.scss"
 requirement: recommended
+order: 20
 ---
 
 {% include file-info.html %}

diff --git a/_docs/generic/shared.md → _docs/03-generic/shared.md b/_docs/generic/shared.md → _docs/03-generic/shared.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Shared"
-group: generic
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Generic"
 filename: "_generic.shared.scss"
 requirement: recommended
+order: 30
 ---
 
 {% include file-info.html %}

diff --git a/_docs/elements/headings.md → _docs/04-elements/headings.md b/_docs/elements/headings.md → _docs/04-elements/headings.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Headings"
-group: elements
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Elements"
 filename: "_elements.headings.scss"
 requirement: optional
+order: 10
 ---
 
 {% include file-info.html %}

diff --git a/_docs/elements/images.md → _docs/04-elements/images.md b/_docs/elements/images.md → _docs/04-elements/images.md
@@ -1,12 +1,9 @@
 ---
-layout: page
 title: "Images"
-group: elements
-page-class: c-page--docs
-has-sub-content: true
-sub-content: docs
+group: "Elements"
 filename: "_elements.images.scss"
 requirement: optional
+order: 20
 ---
 
 {% include file-info.html %}