feat(demo): Improve demo descriptions and structure

- Add better descriptions and usage recommendations for buttons, colors, and icons
- Refactor typography section, close #231
- Combine all form elements into one FORMS item
- Touch up the card atom shadow again to improve cards in cards

docs/demo/assets/styles/partials/_item.scss

@@ -55,14 +55,14 @@
 
 h2.f-item-heading {
 	@extend .dc-h2;
-	// text-transform:uppercase;
+	margin-bottom: $dc-space150;
 }
 
 h3.f-item-heading {
 	@extend .dc-h3;
 	text-transform:uppercase;
 	border-bottom:1px solid $dc-gray60;
-	// margin-bottom: $dc-space50;
+	margin-bottom: $dc-space100;
   padding-bottom: 0.4rem;
 
 	.sg-section__title + &
@@ -71,6 +71,8 @@ h3.f-item-heading {
 	}
 }
 
+h4 { font-weight: 500; }
+
 
 .f-item-controls {
 	float: right;
@@ -111,12 +113,13 @@ h3.f-item-heading {
 }
 
 .f-item-notes {
-	margin-bottom: $dc-space150;
+	margin-bottom: $dc-space100;
 	font-size: $dc-font100;
 	color: $dc-gray20;
 
 	p {
-		margin-top: $dc-space50;
+		margin-top: 0;
+		max-width: 52em;
 	}
 
 	> * {

docs/demo/materials/01-core/01-typography.html

@@ -1,26 +1,20 @@
 ---
 notes: |
-  Use these and nothing else, your users will appreciate it.
+  Dress Code applications should use only the Ubuntu font family in two weights: 300 and 500.
 ---
 
 
-<h3 class="dc-h3 f-item-heading">Get the font</h3>
-<pre class="dc-pre"><code class="language-markup">&lt;link href=&quot;http://fonts.googleapis.com/css?family=Ubuntu:300,500&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;</code></pre>
-<p class="dc-p">Add this to your <code class="language-markup">&lt;head&gt;</code> tag.</p>
+<h3 class="dc-h3 f-item-heading">Getting the font</h3>
+<p>Ubuntu is a free open source font distributed trough <a href="https://fonts.google.com/specimen/Ubuntu">Google Fonts.</a>
+The simplest way to load the font in your project is to use the following code in your document's <code class="language-markup">&lt;head&gt;</code>:
+<pre class="dc-pre"><code class="language-markup">&lt;link href=&quot;https://fonts.googleapis.com/css?family=Ubuntu:300,500&quot; rel=&quot;stylesheet&quot;&gt;</code></pre>
 
-<h3 class="dc-h3 f-item-heading">Font Family</h3>
-<pre class="dc-pre"><code class="language-css">font-family: Ubuntu, Helvetica, sans-serif;</code></pre>
-<p class="dc-p">The one and only font declaration to be used.</p>
 
-<h3 class="dc-h3 f-item-heading">Default Font Weight</h3>
-<pre class="dc-pre"><code class="language-css">font-weight: 300;</code></pre>
-<p class="dc-p">Use this wherever you can, <strong class="dc-strong">it's the default.</strong></p>
-
-<h3 class="dc-h3 f-item-heading">Alternative Font Weight</h3>
-<pre class="dc-pre"><code class="language-css">font-weight: 500;</code></pre>
-<p class="dc-p">Use to <strong class="dc-strong">emphasize text</strong> in paragraphs using the <code class="language-markup">&lt;strong&gt;</code> tag and for <a href="/atoms.html#text-input" class="dc-link" title="Show inputs and labels">labels</a>.</p>
+<h3 class="dc-h3 f-item-heading">Font Weights</h3>
+<p class="dc-p">The default font weight for text is 300. Most of the default text styles will use this. The weight 500 is used for <strong class="dc-strong">emphasized text</strong> as well as table headers, form labels, and some other elements.</p>
 
 <h3 class="dc-h3 f-item-heading">Font sizes</h3>
+<p class="dc-p">These are the main heading and text sizes. Remember to use size to correctly hierarchize the information on the page.
 <h1 class="dc-h1">Headline H1 is 34px and the line-height is 48px</h1>
 <h2 class="dc-h2">Headline H2 is 27px and the line-height is 36px</h2>
 <h3 class="dc-h3">Headline H3 is 22px and the line-height is 36px</h3>

docs/demo/materials/01-core/02-colors.html

@@ -1,7 +1,9 @@
 
+<p class="dc-p">Color plays an important role in mantaining a cohesive look and feel between multiple apps. To ensure this, avoid using colors other than the ones below. All of these colors are available as SASS variables which should save you time when creating your application.
+
 {{#each toolkit.colors}}
 	<section class="color">
-		<h3 class="dc-h3 f-item-heading">{{@key}}</h1>
+		<h3 class="dc-h3 f-item-heading">{{@key}}</h3>
 		<div class="f-color-chips">
 		{{#each this}}
 			<div class="f-color-chip">

docs/demo/materials/03-atoms/buttons/01-button.html

@@ -2,9 +2,9 @@
 name: button
 title: button
 notes: |
-  Triggers an action and must not be used for navigation.
+  Buttons shold usually triggers an action on page, and not be used for navigation. Use labels that are explicit. Starting with an imperative verb is often a good choice.
 ---
-<a class="dc-btn" href="#" role="button">Anchor</a>
-<button class="dc-btn" type="submit">Button</button>
-<input class="dc-btn" type="button" value="Input">
-<input class="dc-btn" type="submit" value="Submit">
+<a class="dc-btn" href="#" role="button">Save File</a>
+<button class="dc-btn" type="submit">Edit Account</button>
+<input class="dc-btn" type="button" value="Create User">
+<input class="dc-btn" type="submit" value="Download">

docs/demo/materials/03-atoms/buttons/03-options.html

@@ -2,17 +2,17 @@
 name: button modifiers
 title: button modifiers
 notes: |
-  Buttons can have modifier classes applied to them. Different modifier classes have different meanings, use them wisely.
+  Buttons can have modifier classes applied to them, with different meanings.
 
-  `dc-btn--primary`: Triggers the primary action of the page it is placed on. Place only one primary button on each page/dialog.
+  `dc-btn--primary` The primary action of the page it is placed on. Place only one primary button on each page/dialog.
 
-  `dc-btn--destroy`: Triggers a destructive action which can't be undone and might involve loss of data.
+  `dc-btn--destroy` A destructive action which can't be undone and might involve loss of data.
 
-  `dc-btn--active`: When a button is active or toggled. Buttons using this modifier should not be clickable.
+  `dc-btn--active` Active or toggled. Buttons using this modifier should not be clickable.
 
-  `dc-btn--disabled`: When a button is disabled. Buttons using this modifier should not be clickable.
+  `dc-btn--disabled` Action is disabled. Buttons using this modifier should not be clickable.
 
-  `dc-btn--link`: Has the appearance of a link but the dimensions and modifiers of a button.
+  `dc-btn--link` Looks like a link but aligns and behaves like buttons. For secondary or tertiary actions.
 ---
 <button class="dc-btn dc-btn--primary">Primary Button</button>
 <button class="dc-btn dc-btn--destroy">Destroy Button</button>

docs/demo/materials/03-atoms/buttons/04-button--block.html

@@ -5,6 +5,6 @@
   Use the <code>dc-btn--block</code> modifier to force a button to fill its parent's width.
 ---
 
-<div class="container" style="display:block; width:60%; background-color: #fff; padding: 20px 20px 10px;">
+<div class="container" style="display:block; width:100%; background-color: #efefef; padding: 10px;">
   <button class="dc-btn dc-btn--block">Block Button</button>
 </div>

docs/demo/materials/03-atoms/card.html

@@ -4,7 +4,5 @@
 ---
 
 <div class="dc-card">
-    <h3 class="dc-h3">I am a basic card atom</h3>
-    <div class="dc-divider"></div>
-    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+    <p>Cards are the basic building blocks of a page. Usually all content should be inside one or more card. For example, in this demo, every section or element is inside a card. We don't recommend nesting cards, such as in this example, but it's technically possible.</p>
 </div>

docs/demo/materials/03-atoms/icons.html → docs/demo/materials/03-atoms/icons/01-icons.html

@@ -3,29 +3,6 @@
 title: Icons
 notes: |
     All Icons are included in one icon font for easy usage. Icons can be made hoverable by using of the <code>dc-icon--interactive</code> class.
-
-    #### Changing the icon font location
-
-    Dress-code assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files.
-    Moving or renaming those font files means updating the CSS in one of two ways:
-    - Change the <code>$dc-font-path</code> variable in the source SASS files.
-    - Change the <code>url()</code> path in the compiled CSS.
-
-    Use whatever option best suits your specific development setup.
-
-    #### Svg-icons
-
-    Together with the icon font, Dress-code distribute also the corresponding svg files. Those svg files are used in some components.
-
-    Dress-code assumes that the svg files will be located in the <code>../img/svg-icons/</code> directory, relative to the compiled CSS files.
-
-    Moving or renaming the image folder means updating the CSS in one of two ways:
-
-    - Change the <code>$dc-image-path</code> variable in the source SASS files.
-    - Change the <code>url()</code> path in the compiled CSS.
-
-    Use whatever option best suits your specific development setup.
-
 ---
 
 <div class="sg-icons">

docs/demo/materials/03-atoms/icons/02-changing-the-font-location.html

@@ -0,0 +1,11 @@
+---
+name: Icons
+title: Icons
+notes: |
+  Dress-code assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files.
+  Moving or renaming those font files means updating the CSS in one of two ways:
+  - Change the <code>$dc-font-path</code> variable in the source SASS files.
+  - Change the <code>url()</code> path in the compiled CSS.
+
+  Use whatever option best suits your specific development setup.
+---

docs/demo/materials/03-atoms/icons/03-svg-icons.html

@@ -0,0 +1,15 @@
+---
+name: Icons
+title: Icons
+notes: |
+    Together with the icon font, Dress Code distribute also the corresponding svg files. Those svg files are used in some components.
+
+    Dress-code assumes that the svg files will be located in the <code>../img/svg-icons/</code> directory, relative to the compiled CSS files.
+
+    Moving or renaming the image folder means updating the CSS in one of two ways:
+
+    - Change the <code>$dc-image-path</code> variable in the source SASS files.
+    - Change the <code>url()</code> path in the compiled CSS.
+
+    Use whatever option best suits your specific development setup.
+---

docs/demo/materials/04-molecules/06-tooltip/01-has-tooltip.html → docs/demo/materials/03-atoms/tooltip/01-adding-a-tooltip.html

@@ -1,9 +1,11 @@
 ---
+name: Adding a tooltip
+title: Adding tooltip
 notes: |
 
-    Apply the base ```dc--has-tooltip``` class and a positioning class (ex. ```dc--has-tooltip--left```) to show a nice tooltip when "hovering" the element.
+    Apply the class ```dc--has-tooltip``` class and a positioning class (ex. ```dc--has-tooltip--left```) to  any element show a tooltip when hovering.
 
-    The attribute ```data--dc-has-tooltip``` must be present and not empty, the value will be used as the content for the tooltip body.
+    The attribute ```data--dc-has-tooltip``` must be present and not empty: the value will be used as the content for the tooltip body.
 
     The tooltip implementation is based significantly on [hint.css](http://kushagragour.in/lab/hint/).
 ---
@@ -55,4 +57,3 @@
         </button>
     </div>
 </div>
-

docs/demo/views/index.html

@@ -5,7 +5,7 @@
 
 
 <h1 class="dc-h1">Dress Code</h1>
-
+<section class="dc-card">
 <p class="dc-p">Dress Code is a style guide and pattern library for building websites rapidly, designed for maintainability and modularity. It was initially conceived as a styleguide for <a href="https://tech.zalando.de/">Zalando</a>'s Brand Solutions applications.</p>
 <p class="dc-p">Component organization is based on atomic design. The style is written in SASS, class naming follows BEM, and properties are ordered according to SMACSS.</p>
 
@@ -58,3 +58,4 @@ <h3 class="dc-h3">If you're using Compass</h3>
 
   <pre class="dc-pre language-markup"><code class="language-markup">@import "dress-code/dist/sass/dress-code";</code></pre>
 </p>
+</section>

src/styles/atoms/_card.scss

@@ -2,7 +2,7 @@
     padding: 2.4rem;
     background-color: $dc-white;
     border-radius: 2px;
-    box-shadow: 0 2px 2px rgba($dc-black, .2);
+    box-shadow: 0 1px 3px 2px rgba($dc-black, .08);
 }
 
 @mixin dc-card-selectors {