Merge pull request #256 from whiteout-io/dev/styleguide

Dev/styleguide
2024-12-22 15:28:49 -05:00 · 2015-04-09 15:12:06 +02:00 · 2015-04-09 15:12:06 +02:00 · 2828771c2b
commit 2828771c2b
parent 2148d06d49 dca2f4ead9
44 changed files with 815 additions and 7 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -97,6 +97,11 @@ module.exports = function(grunt) {
                    'src/css/read-sandbox.css': 'src/sass/read-sandbox.scss',
                    'src/css/all.css': 'src/sass/all.scss'
                }
+            },
+            styleguide: {
+                files: {
+                    'src/css/styleguide.css': 'src/sass/styleguide.scss'
+                }
            }
        },
        autoprefixer: {
@ -108,6 +113,11 @@ module.exports = function(grunt) {
                    'src/css/read-sandbox.css': 'src/css/read-sandbox.css',
                    'src/css/all.css': 'src/css/all.css'
                }
+            },
+            styleguide: {
+                files: {
+                    'src/css/styleguide.css': 'src/css/styleguide.css'
+                }
            }
        },
        csso: {
@ -119,6 +129,11 @@ module.exports = function(grunt) {
                    'dist/css/read-sandbox.min.css': 'src/css/read-sandbox.css',
                    'dist/css/all.min.css': 'src/css/all.css'
                }
+            },
+            styleguide: {
+                files: {
+                    'dist/styleguide/css/styleguide.min.css': 'src/css/styleguide.css'
+                }
            }
        },

@ -453,6 +468,30 @@ module.exports = function(grunt) {
            }
        },

+        // Styleguide
+
+        assemble: {
+            options: {
+                assets: 'dist',
+                layoutdir: 'src/styleguide/layouts',
+                layout: 'default.hbs',
+                partials: ['src/styleguide/blocks/**/*.hbs'],
+                helpers: [
+                    'handlebars-helper-compose',
+                    'src/styleguide/helpers/**/*.js'
+                ],
+                data: [
+                    'dist/manifest.json'
+                ],
+                flatten: true
+            },
+            styleguide: {
+                files: [{
+                    'dist/styleguide/': ['src/styleguide/*.hbs']
+                }]
+            }
+        },
+
        // Development

        connect: {
@ -476,10 +515,14 @@ module.exports = function(grunt) {
        watch: {
            css: {
                files: ['src/sass/**/*.scss'],
-                tasks: ['dist-css', 'manifest']
+                tasks: ['dist-css', 'manifest', 'dist-styleguide']
+            },
+            styleguide: {
+                files: ['src/styleguide/**/*.hbs', 'src/styleguide/**/*.js'],
+                tasks: ['dist-styleguide']
            },
            jsApp: {
-                files: ['src/js/**/*.js', 'src/**/*.html'],
+                files: ['src/js/**/*.js', 'src/*.html', 'src/tpl/**/*.html'],
                tasks: ['dist-js-app']
            },
            jsUnitTest: {
@ -492,14 +535,14 @@ module.exports = function(grunt) {
            },
            icons: {
                files: ['src/index.html', 'src/img/icons/*.svg', '!src/img/icons/all.svg'],
-                tasks: ['svgmin', 'svgstore', 'string-replace', 'manifest']
+                tasks: ['svgmin', 'svgstore', 'string-replace', 'dist-styleguide', 'manifest']
            },
            lib: {
                files: ['src/lib/**/*.js'],
                tasks: ['copy:lib', 'manifest']
            },
            app: {
-                files: ['src/*.js', 'src/**/*.html', 'src/**/*.json', 'src/manifest.*', 'src/img/**/*', 'src/font/**/*'],
+                files: ['src/*.js', 'src/*.html', 'src/tpl/**/*.html', 'src/**/*.json', 'src/manifest.*', 'src/img/**/*', 'src/font/**/*'],
                tasks: ['copy:app', 'copy:tpl', 'copy:img', 'copy:font', 'manifest-dev', 'manifest']
            }
        },
@ -610,9 +653,10 @@ module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-svgstore');
    grunt.loadNpmTasks('grunt-shell');
    grunt.loadNpmTasks('grunt-angular-templates');
+    grunt.loadNpmTasks('assemble');

    // Build tasks
-    grunt.registerTask('dist-css', ['sass', 'autoprefixer', 'csso']);
+    grunt.registerTask('dist-css', ['sass:dist', 'autoprefixer:dist', 'csso:dist']);
    grunt.registerTask('dist-js', ['browserify', 'exorcise', 'ngtemplates', 'concat', 'uglify']);
    grunt.registerTask('dist-js-app', [
        'browserify:app',
@ -640,7 +684,9 @@ module.exports = function(grunt) {
    ]);
    grunt.registerTask('dist-copy', ['copy']);
    grunt.registerTask('dist-assets', ['svgmin', 'svgstore', 'string-replace']);
-    grunt.registerTask('dist', ['clean:dist', 'shell', 'dist-css', 'dist-js', 'dist-assets', 'dist-copy', 'manifest']);
+    grunt.registerTask('dist-styleguide', ['sass:styleguide', 'autoprefixer:styleguide', 'csso:styleguide', 'assemble:styleguide']);
+    // generate styleguide after manifest to forward version number to styleguide
+    grunt.registerTask('dist', ['clean:dist', 'shell', 'dist-css', 'dist-js', 'dist-assets', 'dist-copy', 'manifest', 'dist-styleguide']);

    // Test/Dev tasks
    grunt.registerTask('dev', ['connect:dev']);
--- a/package.json
+++ b/package.json
@ -74,6 +74,8 @@
    "sinon": "~1.7.3",
    "tcp-socket": "~0.5.0",
    "time-grunt": "^1.0.0",
-    "wo-smtpclient": "~0.6.0"
+    "wo-smtpclient": "~0.6.0",
+    "assemble": "~0.4.42",
+    "handlebars-helper-compose": "~0.2.12"
  }
 }
--- a/src/sass/styleguide.scss
+++ b/src/sass/styleguide.scss
@ -0,0 +1,18 @@
+// Third party libs
+@import "lib/scut";
+
+// Config
+@import "base/config"; // Modify this for custom colors, font-sizes, etc
+
+// Mixins
+@import "mixins/responsive";
+@import "mixins/scrollbar";
+
+// Styleguide specific blocks
+// Namespaced with "sg-"
+// (BEM-like Naming, see http://cssguidelin.es/#bem-like-naming)
+
+@import "styleguide/layout";
+@import "styleguide/typo";
+@import "styleguide/sections";
+@import "styleguide/icon-list";
--- a/src/sass/styleguide/_icon-list.scss
+++ b/src/sass/styleguide/_icon-list.scss
@ -0,0 +1,20 @@
+.sg-icon-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    & > li {
+        display: inline-block;
+        padding: 0 10px;
+        margin-bottom: 20px;
+        text-align: center;
+        color: $color-text-light;
+        width: 10em;
+        & > svg {
+            display: block;
+            margin: 0 auto 10px;
+            width: 2em;
+            height: 2em;
+            fill: $color-text;
+        }
+    }
+}
--- a/src/sass/styleguide/_layout.scss
+++ b/src/sass/styleguide/_layout.scss
@ -0,0 +1,82 @@
+// Styleguide layout
+
+.sg-layout {
+    height: 100%;
+    overflow-y: auto;
+    // allow scrolling on iOS
+    -webkit-overflow-scrolling: touch;
+
+    &__canvas {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+        background: $color-bg;
+        color: $color-text;
+    }
+
+    &__header {
+        padding: 50px 20px;
+        background: $color-bg-dark;
+        border-bottom: 1px solid darken($color-bg-dark, 10%);
+        img {
+            display: block;
+            width: 100%;
+            max-width: 300px;
+            max-height: 4em;
+            margin: 0 auto 10px;
+        }
+    }
+
+    &__main {
+        flex-grow: 1;
+        width: 100%;
+        padding: 10px 20px;
+        margin: 0 auto;
+        max-width: 1150px;
+    }
+
+    &__footer {
+        width: 100%;
+        text-align: center;
+        font-size: $font-size-small;
+        color: $color-text-light;
+        line-height: 1.5;
+        padding: 10px 20px;
+
+        nav {
+            ul {
+                list-style: none;
+                margin: 0;
+                padding: 0;
+            }
+            li {
+                display: inline;
+                &:after {
+                    display: inline-block;
+                    content: ' | ';
+                    margin: 0 0.5em;
+                }
+                &:last-child:after {
+                    display: none;
+                }
+            }
+            a {
+                color: inherit;
+                text-decoration: none;
+                &:hover,
+                &:focus {
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        @include respond-to(md) {
+            text-align: left;
+            nav {
+                float: right;
+            }
+        }
+    }
+}
+
+
--- a/src/sass/styleguide/_sections.scss
+++ b/src/sass/styleguide/_sections.scss
@ -0,0 +1,33 @@
+.sg-section {
+    margin: 50px 0;
+}
+
+.sg-block {
+    margin: 20px 0;
+    padding-top: 20px;
+    border-top: 1px solid $color-border-light;
+
+    &:last-of-type {
+        border-bottom: 1px solid $color-border-light;
+    }
+
+    &__description {
+        margin-bottom: 20px;
+    }
+    &__example {
+        margin-bottom: 20px;
+    }
+
+    @include respond-to(lg) {
+        @include scut-clearfix;
+
+        &__description {
+            float: left;
+            width: 25%;
+            padding-right: 30px;
+        }
+        &__example {
+            margin-left: 25%;
+        }
+    }
+}
--- a/src/sass/styleguide/_typo.scss
+++ b/src/sass/styleguide/_typo.scss
@ -0,0 +1,42 @@
+// Styleguide typography
+
+.sg-typo-title {
+    text-transform: uppercase;
+    font-weight: normal;
+    text-align: center;
+    font-size: $font-size-bigger;
+    color: $color-main;
+    margin: 0;
+
+    @include respond-to(md) {
+        font-size: $font-size-huge;
+    }
+}
+
+.sg-typo-section-title {
+    font-size: $font-size-bigger;
+    font-weight: normal;
+    color: $color-text;
+    margin: 0 0 20px;
+
+    @include respond-to(md) {
+        font-size: $font-size-huge;
+    }
+}
+
+.sg-typo-description-title {
+    font-size: $font-size-big;
+    font-weight: bold;
+    color: $color-text;
+    margin: 0;
+}
+
+.sg-typo-code {
+    font-family: monospace;
+    font-weight: bold;
+    border-radius: 0.2em;
+    font-size: $font-size-small;
+    background: $color-bg-dark;
+    color: $color-text;
+    padding: 0.1em 0.3em;
+}
--- a/src/styleguide/helpers/strip-file-extension.js
+++ b/src/styleguide/helpers/strip-file-extension.js
@ -0,0 +1,11 @@
+'use strict';
+
+module.exports.register = function(Handlebars) {
+
+  // Customize this helper
+  Handlebars.registerHelper('stripFileExtension', function(str) {
+    var content = str.replace(/\.[^\.]*$/, '');
+    return new Handlebars.SafeString(content);
+  });
+
+};
--- a/src/styleguide/index.hbs
+++ b/src/styleguide/index.hbs
@ -0,0 +1,66 @@
+---
+title: Styleguide
+sections:
+  - title: Typography
+    src: src/styleguide/sections/typo/*.hbs
+  - title: Buttons
+    src: src/styleguide/sections/buttons/*.hbs
+  - title: Forms
+    src: src/styleguide/sections/form/*.hbs
+  - title: Labels
+    src: src/styleguide/sections/labels.hbs
+  - title: Spinners
+    src: src/styleguide/sections/spinner/*.hbs
+  - title: Attachments
+    src: src/styleguide/sections/attachments.hbs
+  - title: Dropdowns
+    src: src/styleguide/sections/dropdown.hbs
+  - title: Tooltips
+    src: src/styleguide/sections/Tooltip.hbs
+  - title: Mail addresses
+    src: src/styleguide/sections/mail_addresses.hbs
+  - title: Tags input
+    src: src/styleguide/sections/tags_input.hbs
+  - title: Toolbars
+    src: src/styleguide/sections/toolbars/*.hbs
+---
+
+<section class="sg-section">
+  <h2 class="sg-typo-section-title">Icons</h2>
+  <div class="sg-block">
+    <div class="sg-block__description">
+      <h3 class="sg-typo-description-title">Available icons</h3>
+      <p class="typo-paragraph">
+        All icons are available via inline svg and the <code class="sg-typo-code">xlink:href</code>
+        attribute of the <code class="sg-typo-code">&lt;use&gt;</code> tag.
+      </p>
+    </div>
+    <div class="sg-block__example">
+      <ul class="sg-icon-list">
+        {{#compose src="src/img/icons/[!all]*.svg"}}
+          <li>
+            <svg role="presentation"><use xlink:href="#icon-{{stripFileExtension @filename}}" /></svg>
+            {{@filename}}
+          </li>
+        {{/compose}}
+      </ul>
+    </div>
+  </div>
+</section>
+
+{{#each sections}}
+  <section class="sg-section">
+    <h2 class="sg-typo-section-title">{{title}}</h2>
+    {{#compose src=src}}
+      <div class="sg-block">
+        <div class="sg-block__description">
+          <h3 class="sg-typo-description-title">{{@title}}</h3>
+          <p class="typo-paragraph">{{{@description}}}</p>
+        </div>
+        <div class="sg-block__example">
+          {{{@content}}}
+        </div>
+      </div>
+    {{/compose}}
+  </section>
+{{/each}}
--- a/src/styleguide/layouts/default.hbs
+++ b/src/styleguide/layouts/default.hbs
@ -0,0 +1,47 @@
+---
+version: foobar
+currentDate: <%= new Date() %>
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>{{ title }} | Whiteout Mail</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+
+  <link rel="stylesheet" media="all" href="{{assets}}/css/all.min.css" type="text/css">
+  <link rel="stylesheet" media="all" href="{{assets}}/styleguide/css/styleguide.min.css" type="text/css">
+</head>
+<body>
+
+  <!-- inline icons have to come first, hide immediately with inline styles -->
+  <div style="width: 0; height: 0; visibility: hidden;">
+    {{glob "src/img/icons/all.svg"}}
+  </div>
+
+  <div class="sg-layout">
+    <header class="sg-layout__header">
+      <img src="{{assets}}/img/whiteout_logo.svg" alt="whiteout.io">
+      <h1 class="sg-typo-title">{{ title }}</h1>
+    </header>
+    <main class="sg-layout__main">
+      {{> body}}
+    </main>
+    <footer class="sg-layout__footer">
+      <nav>
+        <ul>
+          <li><a href="https://whiteout.io/imprint.html" target="_blank">Imprint</a></li>
+          <li><a href="https://whiteout.io/privacy-service.html" target="_blank">Privacy</a></li>
+          <li><a href="https://whiteout.io/terms.html" target="_blank">Terms</a></li>
+          <li><a href="https://github.com/whiteout-io/mail-html5/blob/master/README.md#license" target="_blank">License</a></li>
+          <li>Version: {{manifest.version}}</li>
+        </ul>
+      </nav>
+      &copy; {{formatDate currentDate "%Y"}} Whiteout Networks GmbH
+    </footer>
+  </div>
+
+</body>
+</html>
--- a/src/styleguide/sections/attachments.hbs
+++ b/src/styleguide/sections/attachments.hbs
@ -0,0 +1,21 @@
+---
+title: List of attachments
+description: List of attached files with optional delete button.
+---
+
+<ul class="attachments">
+  <li>
+    <svg><use xlink:href="#icon-attachment" /></svg>
+    file1.txt
+    <button class="attachments__delete">
+      <svg><use xlink:href="#icon-close_circle" /><title>Delete</title></svg>
+    </button>
+  </li>
+  <li>
+    <svg><use xlink:href="#icon-attachment" /></svg>
+    file1.txt
+    <button class="attachments__delete">
+      <svg><use xlink:href="#icon-close_circle" /><title>Delete</title></svg>
+    </button>
+  </li>
+</ul>
--- a/src/styleguide/sections/buttons/btn.hbs
+++ b/src/styleguide/sections/buttons/btn.hbs
@ -0,0 +1,16 @@
+---
+title: Regular button
+description: >
+  There are various button types. All button types support to be disabled
+  via attribute <code class="sg-typo-code">disabled</code> or
+  <code class="sg-typo-code">aria-disabled="true"</code>.
+---
+
+<button class="btn">
+  <svg><use xlink:href="#icon-close" /><title>Delete</title></svg>
+  Regular
+</button>
+<button class="btn" disabled>
+  <svg><use xlink:href="#icon-close" /><title>Delete</title></svg>
+  Disabled regular
+</button>
--- a/src/styleguide/sections/buttons/btn_big.hbs
+++ b/src/styleguide/sections/buttons/btn_big.hbs
@ -0,0 +1,9 @@
+---
+title: Big button
+description:
+---
+
+<button class="btn btn--big">
+  <svg><use xlink:href="#icon-close" /><title>Delete</title></svg>
+  Big
+</button>
--- a/src/styleguide/sections/buttons/btn_icon.hbs
+++ b/src/styleguide/sections/buttons/btn_icon.hbs
@ -0,0 +1,8 @@
+---
+title: Icon button
+description:
+---
+
+<button class="btn-icon">
+  <svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
+</button>
--- a/src/styleguide/sections/buttons/btn_icon_light.hbs
+++ b/src/styleguide/sections/buttons/btn_icon_light.hbs
@ -0,0 +1,8 @@
+---
+title: Light icon button
+description:
+---
+
+<button class="btn-icon-light">
+  <svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
+</button>
--- a/src/styleguide/sections/buttons/btn_icon_very_light.hbs
+++ b/src/styleguide/sections/buttons/btn_icon_very_light.hbs
@ -0,0 +1,8 @@
+---
+title: Very light icon button
+description:
+---
+
+<button class="btn-icon-very-light">
+  <svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
+</button>
--- a/src/styleguide/sections/buttons/btn_invalid.hbs
+++ b/src/styleguide/sections/buttons/btn_invalid.hbs
@ -0,0 +1,10 @@
+---
+title: Invalid button
+description: >
+  Use to show invalid state of a form.
+---
+
+<button class="btn btn--invalid">
+  <svg><use xlink:href="#icon-close" /><title>Delete</title></svg>
+  Invalid
+</button>
--- a/src/styleguide/sections/buttons/btn_light.hbs
+++ b/src/styleguide/sections/buttons/btn_light.hbs
@ -0,0 +1,9 @@
+---
+title: Light button
+description:
+---
+
+<button class="btn btn--light">
+  <svg><use xlink:href="#icon-close" /><title>Delete</title></svg>
+  Light
+</button>
--- a/src/styleguide/sections/buttons/btn_light_dropdown.hbs
+++ b/src/styleguide/sections/buttons/btn_light_dropdown.hbs
@ -0,0 +1,10 @@
+---
+title: Light dropbown button
+description: >
+  Use in combination with JavaScript and <code class="sg-typo-code">.dropdown</code>.
+---
+
+<button class="btn btn--light-dropdown">
+  Dropdown
+  <svg class="btn__dropdown" role="presentation"><use xlink:href="#icon-dropdown" /></svg>
+</button>
--- a/src/styleguide/sections/buttons/btn_navicon.hbs
+++ b/src/styleguide/sections/buttons/btn_navicon.hbs
@ -0,0 +1,9 @@
+---
+title: Navicon button
+description: >
+  Main menu button
+---
+
+<button class="btn-navicon">
+  <svg><use xlink:href="#icon-navicon" /><title>Toggle Navigation</title></svg>
+</button>
--- a/src/styleguide/sections/buttons/btn_secondary.hbs
+++ b/src/styleguide/sections/buttons/btn_secondary.hbs
@ -0,0 +1,10 @@
+---
+title: Secondary button
+description: >
+  Use in conjuction with another primary regular button.
+---
+
+<button class="btn btn--secondary">
+  <svg><use xlink:href="#icon-close" /><title>Delete</title></svg>
+  Secondary
+</button>
--- a/src/styleguide/sections/dropdown.hbs
+++ b/src/styleguide/sections/dropdown.hbs
@ -0,0 +1,10 @@
+---
+title: Dropdown
+description: >
+  The dropdown list is positioned absolutely within the application via JavaScript.
+---
+
+<ul class="dropdown dropdown--show" style="position: static;">
+  <li><button><svg><use xlink:href="#icon-reply_light" /></svg> Reply</button></li>
+  <li><button><svg><use xlink:href="#icon-reply_all_light" /></svg> Reply All</button></li>
+</ul>
--- a/src/styleguide/sections/form/checkbox.hbs
+++ b/src/styleguide/sections/form/checkbox.hbs
@ -0,0 +1,14 @@
+---
+title: Checkbox
+description: >
+    Works only in combination with JavaScript or a clickable <code class="sg-typo-code">&lt;label&gt;</code>.
+---
+
+<span class="checkbox">
+    <input type="checkbox">
+    <span><svg role="presentation"><use xlink:href="#icon-check" /></svg></span>
+</span>
+<span class="checkbox">
+    <input type="checkbox" checked>
+    <span><svg role="presentation"><use xlink:href="#icon-check" /></svg></span>
+</span>
--- a/src/styleguide/sections/form/form.hbs
+++ b/src/styleguide/sections/form/form.hbs
@ -0,0 +1,43 @@
+---
+title: Form layout
+description: >
+  Basic form layout with multicolumn support.
+---
+
+<form class="form">
+  <p class="form__error-message">Error message</p>
+  <p class="form__password-strong-message">Password strong message</p>
+  <div class="form__row">
+    <input class="input-text" type="text">
+  </div>
+  <div class="form__row form__row--multi">
+    <div class="form__col">
+      <input class="input-text" type="text">
+    </div>
+    <div class="form__col">
+      <input class="input-text" type="text">
+    </div>
+  </div>
+  <div class="form__row form__row--multi">
+    <div class="form__col form__col--2">
+      <input class="input-text" type="text">
+    </div>
+    <div class="form__col">
+      <input class="input-text" type="text">
+    </div>
+  </div>
+  <div class="form__row form__row--multi">
+    <div class="form__col">
+      <input class="input-text" type="text">
+    </div>
+    <div class="form__col form__col--2">
+      <input class="input-text" type="text">
+    </div>
+  </div>
+  <div class="spinner-block">
+    <span class="spinner spinner--big"></span>
+  </div>
+  <div class="form__row">
+    <button class="btn" type="submit">Submit</button>
+   </div>
+</form>
--- a/src/styleguide/sections/form/form_fieldset.hbs
+++ b/src/styleguide/sections/form/form_fieldset.hbs
@ -0,0 +1,15 @@
+---
+title: Form fieldset
+description: >
+  Use to group form inputs.
+---
+
+<fieldset class="form-fieldset">
+  <legend>Legend</legend>
+  <div class="form__row">
+    <input class="input-text" type="text">
+  </div>
+  <div class="form__row">
+    <input class="input-text" type="text">
+  </div>
+</fieldset>
--- a/src/styleguide/sections/form/form_input_with_button.hbs
+++ b/src/styleguide/sections/form/form_input_with_button.hbs
@ -0,0 +1,10 @@
+---
+title: Form input with button
+description: >
+  Use to group form inputs.
+---
+
+<div class="form-input-with-button">
+  <input class="input-text" type="text">
+  <button class="btn">Button</button>
+</div>
--- a/src/styleguide/sections/form/input_checkbox.hbs
+++ b/src/styleguide/sections/form/input_checkbox.hbs
@ -0,0 +1,13 @@
+---
+title: Checkbox input
+description: >
+    Custom checkbox input constists of custom checkbox plus label.
+---
+
+<label class="input-checkbox">
+  <span class="checkbox">
+    <input type="checkbox">
+    <span><svg role="presentation"><use xlink:href="#icon-check" /></svg></span>
+  </span>
+  Label
+</label>
--- a/src/styleguide/sections/form/input_email_fixed_domain.hbs
+++ b/src/styleguide/sections/form/input_email_fixed_domain.hbs
@ -0,0 +1,9 @@
+---
+title: Email input with fixed domain
+description:
+---
+
+<div class="input-email-fixed-domain">
+    <input class="input-text" type="text">
+    <span>@wmail.io</span>
+</div>
--- a/src/styleguide/sections/form/input_file.hbs
+++ b/src/styleguide/sections/form/input_file.hbs
@ -0,0 +1,8 @@
+---
+title: File input
+description: >
+  Custom styled file input.
+  <strong>Attention:</strong> Webkit support only!
+---
+
+<input class="input-file" type="file">
--- a/src/styleguide/sections/form/input_select.hbs
+++ b/src/styleguide/sections/form/input_select.hbs
@ -0,0 +1,14 @@
+---
+title: Select input
+description: >
+  Custom styled select input.
+  <strong>Attention:</strong> Webkit support only!
+---
+
+<label class="input-select">
+    <select>
+      <option>Option 1</option>
+      <option>Option 2</option>
+      <option>Option 3</option>
+    </select>
+</label>
--- a/src/styleguide/sections/form/input_text.hbs
+++ b/src/styleguide/sections/form/input_text.hbs
@ -0,0 +1,11 @@
+---
+title: Text input
+description: >
+  Regular text input.
+---
+
+<input class="input-text" type="text" placeholder="Text input">
+&nbsp;
+<input class="input-text input-text--big" type="text" placeholder="Big text input">
+&nbsp;
+<input class="input-text input-text--error" type="text" placeholder="Invalid text input">
--- a/src/styleguide/sections/form/search.hbs
+++ b/src/styleguide/sections/form/search.hbs
@ -0,0 +1,15 @@
+---
+title: Search bar
+description: >
+    There a regular and a light search bar.
+---
+
+<div class="search">
+  <svg><use xlink:href="#icon-search" /><title>Search</title></svg>
+  <input class="input-text" type="text" placeholder="Search">
+</div>
+&nbsp;
+<div class="search search--light">
+  <svg><use xlink:href="#icon-search" /><title>Search</title></svg>
+  <input class="input-text" type="text" placeholder="Search">
+</div>
--- a/src/styleguide/sections/labels.hbs
+++ b/src/styleguide/sections/labels.hbs
@ -0,0 +1,21 @@
+---
+title: Labels
+description: There are various types of labels.
+---
+
+<span class="label">
+  Regular
+  <svg><use xlink:href="#icon-add_contact" /></svg>
+</span>
+<span class="label label--invalid">
+  Invalid
+  <svg><use xlink:href="#icon-add_contact" /></svg>
+</span>
+<span class="label label--invalid label--invalid-clickable">
+  Clickable invalid
+  <svg><use xlink:href="#icon-add_contact" /></svg>
+</span>
+<span class="label label--blank">
+  Blank
+  <svg><use xlink:href="#icon-add_contact" /></svg>
+</span>
--- a/src/styleguide/sections/mail_addresses.hbs
+++ b/src/styleguide/sections/mail_addresses.hbs
@ -0,0 +1,21 @@
+---
+title: List of mail addresses
+description:
+---
+
+<div class="mail-addresses">
+  <div class="mail-addresses__more">
+    <button>Button1</button>
+    <button>Button2</button>
+  </div>
+  <label>Label:</label>
+  <span class="label">
+    mail@example.com
+    <svg><use xlink:href="#icon-add_contact" /></svg>
+  </span>
+  <span class="label">
+    mail@example.com
+    <svg><use xlink:href="#icon-add_contact" /></svg>
+  </span>
+  <span class="mail-addresses__stripped"></span>
+</div>
--- a/src/styleguide/sections/spinner/spinner.hbs
+++ b/src/styleguide/sections/spinner/spinner.hbs
@ -0,0 +1,6 @@
+---
+title: Spinner
+description: Animated spinner with CSS only.
+---
+
+<span class="spinner"></span>
--- a/src/styleguide/sections/spinner/spinner_big.hbs
+++ b/src/styleguide/sections/spinner/spinner_big.hbs
@ -0,0 +1,6 @@
+---
+title: Big spinner
+description:
+---
+
+<span class="spinner spinner--big"></span>
--- a/src/styleguide/sections/spinner/spinner_block.hbs
+++ b/src/styleguide/sections/spinner/spinner_block.hbs
@ -0,0 +1,8 @@
+---
+title: Spinner block
+description: Full width spinner block with additional margin.
+---
+
+<div class="spinner-block">
+  <span class="spinner"></span>
+</div>
--- a/src/styleguide/sections/tags_input.hbs
+++ b/src/styleguide/sections/tags_input.hbs
@ -0,0 +1,22 @@
+---
+title: Tags input
+description: Markup is generated via Angular directive ngTagsInput.
+---
+
+<div class="tags-input">
+  <div class="host">
+    <div class="tags">
+      <ul class="tag-list">
+        <li class="tag-item label">
+          mail@example.com
+          <a class="remove-button">×</a>
+        </li>
+        <li class="tag-item label label--invalid">
+          mail@example.com
+          <a class="remove-button">×</a>
+        </li>
+      </ul>
+      <input class="input" type="email" placeholder="add recipient" style="width: 163px;">
+    </div>
+  </div>
+</div>
--- a/src/styleguide/sections/toolbars/toolbar_actions.hbs
+++ b/src/styleguide/sections/toolbars/toolbar_actions.hbs
@ -0,0 +1,24 @@
+---
+title: Toolbar with actions
+description: List of buttons.
+---
+
+<div class="toolbar">
+  <ul class="toolbar__actions">
+    <li>
+      <button class="btn-icon-light">
+        <svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
+      </button>
+    </li>
+    <li>
+      <button class="btn-icon-light">
+        <svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
+      </button>
+    </li>
+    <li>
+      <button class="btn-icon-light">
+        <svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
+      </button>
+    </li>
+  </ul>
+</div>
--- a/src/styleguide/sections/toolbars/toolbar_label.hbs
+++ b/src/styleguide/sections/toolbars/toolbar_label.hbs
@ -0,0 +1,11 @@
+---
+title: Toolbar with label
+description: Use as headline with integrated back button.
+---
+
+<div class="toolbar">
+  <a class="toolbar__label" href="#">
+    <svg><use xlink:href="#icon-back" /><title>Back</title></svg>
+    Label
+  </a>
+</div>
--- a/src/styleguide/sections/tooltip.hbs
+++ b/src/styleguide/sections/tooltip.hbs
@ -0,0 +1,16 @@
+---
+title: Tooltip
+description: >
+  The tooltip is positioned absolutely within the application via JavaScript.
+---
+
+<div class="tooltip tooltip--show" style="position: static;">
+  <div class="tooltip__arrow"></div>
+  <div class="tooltip__content">Content</div>
+</div>
+&nbsp;
+<div class="tooltip tooltip--show" style="position: static;">
+  <div class="tooltip__arrow"></div>
+  <h5 class="tooltip__title">Optional title</h5>
+  <div class="tooltip__content">Multi-line<br>Content</div>
+</div>
--- a/src/styleguide/sections/typo/typo_code.hbs
+++ b/src/styleguide/sections/typo/typo_code.hbs
@ -0,0 +1,6 @@
+---
+title: Code
+description: Inline code style.
+---
+
+<code class="typo-code">1234-1234-1234-1234</code>
--- a/src/styleguide/sections/typo/typo_paragraph.hbs
+++ b/src/styleguide/sections/typo/typo_paragraph.hbs
@ -0,0 +1,14 @@
+---
+title: Paragraph
+description: >
+  Paragraph with margin bottom and additional styles for
+  <code class="sg-typo-code">strong</code>, <code class="sg-typo-code">em</code>,
+  and <code class="sg-typo-code">a</code>.
+---
+
+<p class="typo-paragraph">
+  Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit.
+  <em>Accusamus possimus</em> officiis quia perferendis quo assumenda,
+  recusandae repellat? Iusto vero, temporibus debitis eveniet
+  qui libero excepturi, <a href="#">architecto laborum</a> assumenda, modi aperiam.
+</p>
--- a/src/styleguide/sections/typo/typo_title.hbs
+++ b/src/styleguide/sections/typo/typo_title.hbs
@ -0,0 +1,6 @@
+---
+title: Title
+description: Use as main page title.
+---
+
+<h1 class="typo-title">Title</h1>