From e6147e1fdc183b223cfb9c46b6a90fa51984db24 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Wed, 17 Dec 2014 14:43:50 +0100 Subject: [PATCH 1/4] Add basic styleguide workflow with assemble --- Gruntfile.js | 22 +++++++++++++++++++ package.json | 4 +++- .../helpers/strip-file-extension.js | 11 ++++++++++ src/styleguide/index.hbs | 8 +++++++ src/styleguide/layouts/default.hbs | 19 ++++++++++++++++ 5 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/styleguide/helpers/strip-file-extension.js create mode 100644 src/styleguide/index.hbs create mode 100644 src/styleguide/layouts/default.hbs diff --git a/Gruntfile.js b/Gruntfile.js index 619b7ae..23daad9 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -453,6 +453,27 @@ module.exports = function(grunt) { } }, + // Styleguide + + assemble: { + options: { + assets: '../', + layoutdir: 'src/styleguide/layouts', + layout: 'default.hbs', + partials: ['src/styleguide/blocks/**/*.hbs'], + helpers: [ + 'handlebars-helper-compose', + 'src/styleguide/helpers/**/*.js' + ], + flatten: true + }, + styleguide: { + files: [{ + 'dist/styleguide/': ['src/styleguide/*.hbs'] + }] + } + }, + // Development connect: { @@ -610,6 +631,7 @@ 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']); diff --git a/package.json b/package.json index 980dbd7..f4e9d60 100644 --- 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" } } diff --git a/src/styleguide/helpers/strip-file-extension.js b/src/styleguide/helpers/strip-file-extension.js new file mode 100644 index 0000000..5bef48b --- /dev/null +++ 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); + }); + +}; \ No newline at end of file diff --git a/src/styleguide/index.hbs b/src/styleguide/index.hbs new file mode 100644 index 0000000..2ba0250 --- /dev/null +++ b/src/styleguide/index.hbs @@ -0,0 +1,8 @@ +--- +title: Styleguide +--- + +{{#compose src="src/img/icons/*.svg"}} + + {{@filename}} +{{/compose}} \ No newline at end of file diff --git a/src/styleguide/layouts/default.hbs b/src/styleguide/layouts/default.hbs new file mode 100644 index 0000000..eb3e934 --- /dev/null +++ b/src/styleguide/layouts/default.hbs @@ -0,0 +1,19 @@ + + + + + {{ title }} | Whiteout Mail + + + + + + +
+ {{glob "src/img/icons/all.svg"}} +
+ + {{> body}} + + + \ No newline at end of file From 69ed3867655024cd7391a9036554fe48366c74e2 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Thu, 18 Dec 2014 09:20:53 +0100 Subject: [PATCH 2/4] Add styleguide to grunt dist and watch --- Gruntfile.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 23daad9..e885446 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -497,10 +497,14 @@ module.exports = function(grunt) { watch: { css: { files: ['src/sass/**/*.scss'], - tasks: ['dist-css', 'manifest'] + tasks: ['dist-css', 'dist-styleguide', 'manifest'] + }, + 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: { @@ -513,14 +517,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'] } }, @@ -662,7 +666,8 @@ 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', ['assemble:styleguide']); + grunt.registerTask('dist', ['clean:dist', 'shell', 'dist-css', 'dist-js', 'dist-assets', 'dist-copy', 'dist-styleguide', 'manifest']); // Test/Dev tasks grunt.registerTask('dev', ['connect:dev']); From 8807830122859acbe2d4270d7dab955e55f33786 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Thu, 18 Dec 2014 10:55:20 +0100 Subject: [PATCH 3/4] Add basic layout and styling to styleguide --- Gruntfile.js | 29 ++++++++-- src/sass/styleguide.scss | 18 +++++++ src/sass/styleguide/_icon-list.scss | 20 +++++++ src/sass/styleguide/_layout.scss | 82 +++++++++++++++++++++++++++++ src/sass/styleguide/_sections.scss | 33 ++++++++++++ src/sass/styleguide/_typo.scss | 42 +++++++++++++++ src/styleguide/index.hbs | 26 +++++++-- src/styleguide/layouts/default.hbs | 30 ++++++++++- 8 files changed, 270 insertions(+), 10 deletions(-) create mode 100755 src/sass/styleguide.scss create mode 100644 src/sass/styleguide/_icon-list.scss create mode 100644 src/sass/styleguide/_layout.scss create mode 100644 src/sass/styleguide/_sections.scss create mode 100644 src/sass/styleguide/_typo.scss diff --git a/Gruntfile.js b/Gruntfile.js index e885446..fab7f51 100644 --- 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' + } } }, @@ -457,7 +472,7 @@ module.exports = function(grunt) { assemble: { options: { - assets: '../', + assets: 'dist', layoutdir: 'src/styleguide/layouts', layout: 'default.hbs', partials: ['src/styleguide/blocks/**/*.hbs'], @@ -465,6 +480,9 @@ module.exports = function(grunt) { 'handlebars-helper-compose', 'src/styleguide/helpers/**/*.js' ], + data: [ + 'dist/manifest.json' + ], flatten: true }, styleguide: { @@ -497,7 +515,7 @@ module.exports = function(grunt) { watch: { css: { files: ['src/sass/**/*.scss'], - tasks: ['dist-css', 'dist-styleguide', 'manifest'] + tasks: ['dist-css', 'manifest', 'dist-styleguide'] }, styleguide: { files: ['src/styleguide/**/*.hbs', 'src/styleguide/**/*.js'], @@ -638,7 +656,7 @@ module.exports = function(grunt) { 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', @@ -666,8 +684,9 @@ module.exports = function(grunt) { ]); grunt.registerTask('dist-copy', ['copy']); grunt.registerTask('dist-assets', ['svgmin', 'svgstore', 'string-replace']); - grunt.registerTask('dist-styleguide', ['assemble:styleguide']); - grunt.registerTask('dist', ['clean:dist', 'shell', 'dist-css', 'dist-js', 'dist-assets', 'dist-copy', 'dist-styleguide', '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']); diff --git a/src/sass/styleguide.scss b/src/sass/styleguide.scss new file mode 100755 index 0000000..6de96dc --- /dev/null +++ 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"; diff --git a/src/sass/styleguide/_icon-list.scss b/src/sass/styleguide/_icon-list.scss new file mode 100644 index 0000000..fe623ca --- /dev/null +++ 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; + } + } +} \ No newline at end of file diff --git a/src/sass/styleguide/_layout.scss b/src/sass/styleguide/_layout.scss new file mode 100644 index 0000000..8f5ac9c --- /dev/null +++ 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; + } + } + } +} + + diff --git a/src/sass/styleguide/_sections.scss b/src/sass/styleguide/_sections.scss new file mode 100644 index 0000000..c7158b8 --- /dev/null +++ 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%; + } + } +} \ No newline at end of file diff --git a/src/sass/styleguide/_typo.scss b/src/sass/styleguide/_typo.scss new file mode 100644 index 0000000..f7cff04 --- /dev/null +++ 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 0 20px; + + @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; +} \ No newline at end of file diff --git a/src/styleguide/index.hbs b/src/styleguide/index.hbs index 2ba0250..ff08bce 100644 --- a/src/styleguide/index.hbs +++ b/src/styleguide/index.hbs @@ -2,7 +2,25 @@ title: Styleguide --- -{{#compose src="src/img/icons/*.svg"}} - - {{@filename}} -{{/compose}} \ No newline at end of file +
+

Icons

+
+
+

Available icons

+

+ All icons are available via inline svg and the xlink:href + attribute of the <use> tag. +

+
+
+
    + {{#compose src="src/img/icons/[!all]*.svg"}} +
  • + + {{@filename}} +
    • + {{/compose}} +
+
+
+
diff --git a/src/styleguide/layouts/default.hbs b/src/styleguide/layouts/default.hbs index eb3e934..a443fcd 100644 --- a/src/styleguide/layouts/default.hbs +++ b/src/styleguide/layouts/default.hbs @@ -1,3 +1,8 @@ +--- +version: foobar +currentDate: <%= new Date() %> +--- + @@ -5,6 +10,9 @@ {{ title }} | Whiteout Mail + + + @@ -13,7 +21,27 @@ {{glob "src/img/icons/all.svg"}} - {{> body}} +
+
+ whiteout.io +

{{ title }}

+
+
+ {{> body}} +
+
+ + © {{formatDate currentDate "%Y"}} Whiteout Networks GmbH +
+
\ No newline at end of file From dca2f4ead9a0490714e1f0e8012d5a272801d199 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Sat, 24 Jan 2015 13:52:29 +0100 Subject: [PATCH 4/4] Add styleguide for basic components --- src/sass/styleguide/_typo.scss | 2 +- .../helpers/strip-file-extension.js | 10 +-- src/styleguide/index.hbs | 74 ++++++++++++++----- src/styleguide/layouts/default.hbs | 60 +++++++-------- src/styleguide/sections/attachments.hbs | 21 ++++++ src/styleguide/sections/buttons/btn.hbs | 16 ++++ src/styleguide/sections/buttons/btn_big.hbs | 9 +++ src/styleguide/sections/buttons/btn_icon.hbs | 8 ++ .../sections/buttons/btn_icon_light.hbs | 8 ++ .../sections/buttons/btn_icon_very_light.hbs | 8 ++ .../sections/buttons/btn_invalid.hbs | 10 +++ src/styleguide/sections/buttons/btn_light.hbs | 9 +++ .../sections/buttons/btn_light_dropdown.hbs | 10 +++ .../sections/buttons/btn_navicon.hbs | 9 +++ .../sections/buttons/btn_secondary.hbs | 10 +++ src/styleguide/sections/dropdown.hbs | 10 +++ src/styleguide/sections/form/checkbox.hbs | 14 ++++ src/styleguide/sections/form/form.hbs | 43 +++++++++++ .../sections/form/form_fieldset.hbs | 15 ++++ .../sections/form/form_input_with_button.hbs | 10 +++ .../sections/form/input_checkbox.hbs | 13 ++++ .../form/input_email_fixed_domain.hbs | 9 +++ src/styleguide/sections/form/input_file.hbs | 8 ++ src/styleguide/sections/form/input_select.hbs | 14 ++++ src/styleguide/sections/form/input_text.hbs | 11 +++ src/styleguide/sections/form/search.hbs | 15 ++++ src/styleguide/sections/labels.hbs | 21 ++++++ src/styleguide/sections/mail_addresses.hbs | 21 ++++++ src/styleguide/sections/spinner/spinner.hbs | 6 ++ .../sections/spinner/spinner_big.hbs | 6 ++ .../sections/spinner/spinner_block.hbs | 8 ++ src/styleguide/sections/tags_input.hbs | 22 ++++++ .../sections/toolbars/toolbar_actions.hbs | 24 ++++++ .../sections/toolbars/toolbar_label.hbs | 11 +++ src/styleguide/sections/tooltip.hbs | 16 ++++ src/styleguide/sections/typo/typo_code.hbs | 6 ++ .../sections/typo/typo_paragraph.hbs | 14 ++++ src/styleguide/sections/typo/typo_title.hbs | 6 ++ 38 files changed, 534 insertions(+), 53 deletions(-) create mode 100644 src/styleguide/sections/attachments.hbs create mode 100644 src/styleguide/sections/buttons/btn.hbs create mode 100644 src/styleguide/sections/buttons/btn_big.hbs create mode 100644 src/styleguide/sections/buttons/btn_icon.hbs create mode 100644 src/styleguide/sections/buttons/btn_icon_light.hbs create mode 100644 src/styleguide/sections/buttons/btn_icon_very_light.hbs create mode 100644 src/styleguide/sections/buttons/btn_invalid.hbs create mode 100644 src/styleguide/sections/buttons/btn_light.hbs create mode 100644 src/styleguide/sections/buttons/btn_light_dropdown.hbs create mode 100644 src/styleguide/sections/buttons/btn_navicon.hbs create mode 100644 src/styleguide/sections/buttons/btn_secondary.hbs create mode 100644 src/styleguide/sections/dropdown.hbs create mode 100644 src/styleguide/sections/form/checkbox.hbs create mode 100644 src/styleguide/sections/form/form.hbs create mode 100644 src/styleguide/sections/form/form_fieldset.hbs create mode 100644 src/styleguide/sections/form/form_input_with_button.hbs create mode 100644 src/styleguide/sections/form/input_checkbox.hbs create mode 100644 src/styleguide/sections/form/input_email_fixed_domain.hbs create mode 100644 src/styleguide/sections/form/input_file.hbs create mode 100644 src/styleguide/sections/form/input_select.hbs create mode 100644 src/styleguide/sections/form/input_text.hbs create mode 100644 src/styleguide/sections/form/search.hbs create mode 100644 src/styleguide/sections/labels.hbs create mode 100644 src/styleguide/sections/mail_addresses.hbs create mode 100644 src/styleguide/sections/spinner/spinner.hbs create mode 100644 src/styleguide/sections/spinner/spinner_big.hbs create mode 100644 src/styleguide/sections/spinner/spinner_block.hbs create mode 100644 src/styleguide/sections/tags_input.hbs create mode 100644 src/styleguide/sections/toolbars/toolbar_actions.hbs create mode 100644 src/styleguide/sections/toolbars/toolbar_label.hbs create mode 100644 src/styleguide/sections/tooltip.hbs create mode 100644 src/styleguide/sections/typo/typo_code.hbs create mode 100644 src/styleguide/sections/typo/typo_paragraph.hbs create mode 100644 src/styleguide/sections/typo/typo_title.hbs diff --git a/src/sass/styleguide/_typo.scss b/src/sass/styleguide/_typo.scss index f7cff04..7291cc6 100644 --- a/src/sass/styleguide/_typo.scss +++ b/src/sass/styleguide/_typo.scss @@ -6,7 +6,7 @@ text-align: center; font-size: $font-size-bigger; color: $color-main; - margin: 0 0 20px; + margin: 0; @include respond-to(md) { font-size: $font-size-huge; diff --git a/src/styleguide/helpers/strip-file-extension.js b/src/styleguide/helpers/strip-file-extension.js index 5bef48b..f8eb727 100644 --- a/src/styleguide/helpers/strip-file-extension.js +++ b/src/styleguide/helpers/strip-file-extension.js @@ -2,10 +2,10 @@ module.exports.register = function(Handlebars) { - // Customize this helper - Handlebars.registerHelper('stripFileExtension', function(str) { - var content = str.replace(/\.[^\.]*$/, ''); - return new Handlebars.SafeString(content); - }); + // Customize this helper + Handlebars.registerHelper('stripFileExtension', function(str) { + var content = str.replace(/\.[^\.]*$/, ''); + return new Handlebars.SafeString(content); + }); }; \ No newline at end of file diff --git a/src/styleguide/index.hbs b/src/styleguide/index.hbs index ff08bce..475dd88 100644 --- a/src/styleguide/index.hbs +++ b/src/styleguide/index.hbs @@ -1,26 +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 ---
-

Icons

-
+

Icons

+
+
+

Available icons

+

+ All icons are available via inline svg and the xlink:href + attribute of the <use> tag. +

+
+
+
    + {{#compose src="src/img/icons/[!all]*.svg"}} +
  • + + {{@filename}} +
    • + {{/compose}} +
+
+
+
+ +{{#each sections}} +
+

{{title}}

+ {{#compose src=src}} +
-

Available icons

-

- All icons are available via inline svg and the xlink:href - attribute of the <use> tag. -

+

{{@title}}

+

{{{@description}}}

-
    - {{#compose src="src/img/icons/[!all]*.svg"}} -
  • - - {{@filename}} -
    • - {{/compose}} -
+ {{{@content}}}
-
-
+ + {{/compose}} + +{{/each}} diff --git a/src/styleguide/layouts/default.hbs b/src/styleguide/layouts/default.hbs index a443fcd..5c091a1 100644 --- a/src/styleguide/layouts/default.hbs +++ b/src/styleguide/layouts/default.hbs @@ -6,42 +6,42 @@ currentDate: <%= new Date() %> - - {{ title }} | Whiteout Mail + + {{ title }} | Whiteout Mail - + - - + + - -
- {{glob "src/img/icons/all.svg"}} -
+ +
+ {{glob "src/img/icons/all.svg"}} +
-
-
- whiteout.io -

{{ title }}

-
-
- {{> body}} -
-
- - © {{formatDate currentDate "%Y"}} Whiteout Networks GmbH -
-
+
+
+ whiteout.io +

{{ title }}

+
+
+ {{> body}} +
+
+ + © {{formatDate currentDate "%Y"}} Whiteout Networks GmbH +
+
\ No newline at end of file diff --git a/src/styleguide/sections/attachments.hbs b/src/styleguide/sections/attachments.hbs new file mode 100644 index 0000000..299d5a3 --- /dev/null +++ b/src/styleguide/sections/attachments.hbs @@ -0,0 +1,21 @@ +--- +title: List of attachments +description: List of attached files with optional delete button. +--- + +
    +
  • + + file1.txt + +
    • +
  • + + file1.txt + +
    • +
diff --git a/src/styleguide/sections/buttons/btn.hbs b/src/styleguide/sections/buttons/btn.hbs new file mode 100644 index 0000000..dd5de55 --- /dev/null +++ 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 disabled or + aria-disabled="true". +--- + + + diff --git a/src/styleguide/sections/buttons/btn_big.hbs b/src/styleguide/sections/buttons/btn_big.hbs new file mode 100644 index 0000000..ea69422 --- /dev/null +++ b/src/styleguide/sections/buttons/btn_big.hbs @@ -0,0 +1,9 @@ +--- +title: Big button +description: +--- + + diff --git a/src/styleguide/sections/buttons/btn_icon.hbs b/src/styleguide/sections/buttons/btn_icon.hbs new file mode 100644 index 0000000..9034170 --- /dev/null +++ b/src/styleguide/sections/buttons/btn_icon.hbs @@ -0,0 +1,8 @@ +--- +title: Icon button +description: +--- + + diff --git a/src/styleguide/sections/buttons/btn_icon_light.hbs b/src/styleguide/sections/buttons/btn_icon_light.hbs new file mode 100644 index 0000000..0e7848f --- /dev/null +++ b/src/styleguide/sections/buttons/btn_icon_light.hbs @@ -0,0 +1,8 @@ +--- +title: Light icon button +description: +--- + + diff --git a/src/styleguide/sections/buttons/btn_icon_very_light.hbs b/src/styleguide/sections/buttons/btn_icon_very_light.hbs new file mode 100644 index 0000000..6ff5d40 --- /dev/null +++ b/src/styleguide/sections/buttons/btn_icon_very_light.hbs @@ -0,0 +1,8 @@ +--- +title: Very light icon button +description: +--- + + diff --git a/src/styleguide/sections/buttons/btn_invalid.hbs b/src/styleguide/sections/buttons/btn_invalid.hbs new file mode 100644 index 0000000..48cc821 --- /dev/null +++ b/src/styleguide/sections/buttons/btn_invalid.hbs @@ -0,0 +1,10 @@ +--- +title: Invalid button +description: > + Use to show invalid state of a form. +--- + + diff --git a/src/styleguide/sections/buttons/btn_light.hbs b/src/styleguide/sections/buttons/btn_light.hbs new file mode 100644 index 0000000..3378d94 --- /dev/null +++ b/src/styleguide/sections/buttons/btn_light.hbs @@ -0,0 +1,9 @@ +--- +title: Light button +description: +--- + + diff --git a/src/styleguide/sections/buttons/btn_light_dropdown.hbs b/src/styleguide/sections/buttons/btn_light_dropdown.hbs new file mode 100644 index 0000000..eb8da92 --- /dev/null +++ b/src/styleguide/sections/buttons/btn_light_dropdown.hbs @@ -0,0 +1,10 @@ +--- +title: Light dropbown button +description: > + Use in combination with JavaScript and .dropdown. +--- + + diff --git a/src/styleguide/sections/buttons/btn_navicon.hbs b/src/styleguide/sections/buttons/btn_navicon.hbs new file mode 100644 index 0000000..f0d2367 --- /dev/null +++ b/src/styleguide/sections/buttons/btn_navicon.hbs @@ -0,0 +1,9 @@ +--- +title: Navicon button +description: > + Main menu button +--- + + diff --git a/src/styleguide/sections/buttons/btn_secondary.hbs b/src/styleguide/sections/buttons/btn_secondary.hbs new file mode 100644 index 0000000..c491f8d --- /dev/null +++ b/src/styleguide/sections/buttons/btn_secondary.hbs @@ -0,0 +1,10 @@ +--- +title: Secondary button +description: > + Use in conjuction with another primary regular button. +--- + + diff --git a/src/styleguide/sections/dropdown.hbs b/src/styleguide/sections/dropdown.hbs new file mode 100644 index 0000000..28af589 --- /dev/null +++ b/src/styleguide/sections/dropdown.hbs @@ -0,0 +1,10 @@ +--- +title: Dropdown +description: > + The dropdown list is positioned absolutely within the application via JavaScript. +--- + +
    +
    • +
    • +
diff --git a/src/styleguide/sections/form/checkbox.hbs b/src/styleguide/sections/form/checkbox.hbs new file mode 100644 index 0000000..88a1bd4 --- /dev/null +++ b/src/styleguide/sections/form/checkbox.hbs @@ -0,0 +1,14 @@ +--- +title: Checkbox +description: > + Works only in combination with JavaScript or a clickable <label>. +--- + + + + + + + + + \ No newline at end of file diff --git a/src/styleguide/sections/form/form.hbs b/src/styleguide/sections/form/form.hbs new file mode 100644 index 0000000..f3101df --- /dev/null +++ b/src/styleguide/sections/form/form.hbs @@ -0,0 +1,43 @@ +--- +title: Form layout +description: > + Basic form layout with multicolumn support. +--- + +
+

Error message

+

Password strong message

+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+ +
+
diff --git a/src/styleguide/sections/form/form_fieldset.hbs b/src/styleguide/sections/form/form_fieldset.hbs new file mode 100644 index 0000000..060d219 --- /dev/null +++ b/src/styleguide/sections/form/form_fieldset.hbs @@ -0,0 +1,15 @@ +--- +title: Form fieldset +description: > + Use to group form inputs. +--- + +
+ Legend +
+ +
+
+ +
+
diff --git a/src/styleguide/sections/form/form_input_with_button.hbs b/src/styleguide/sections/form/form_input_with_button.hbs new file mode 100644 index 0000000..7dad30d --- /dev/null +++ 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. +--- + +
+ + +
diff --git a/src/styleguide/sections/form/input_checkbox.hbs b/src/styleguide/sections/form/input_checkbox.hbs new file mode 100644 index 0000000..15f2725 --- /dev/null +++ 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. +--- + + diff --git a/src/styleguide/sections/form/input_email_fixed_domain.hbs b/src/styleguide/sections/form/input_email_fixed_domain.hbs new file mode 100644 index 0000000..71168b4 --- /dev/null +++ b/src/styleguide/sections/form/input_email_fixed_domain.hbs @@ -0,0 +1,9 @@ +--- +title: Email input with fixed domain +description: +--- + +
+ + @wmail.io +
diff --git a/src/styleguide/sections/form/input_file.hbs b/src/styleguide/sections/form/input_file.hbs new file mode 100644 index 0000000..cbf4844 --- /dev/null +++ b/src/styleguide/sections/form/input_file.hbs @@ -0,0 +1,8 @@ +--- +title: File input +description: > + Custom styled file input. + Attention: Webkit support only! +--- + + diff --git a/src/styleguide/sections/form/input_select.hbs b/src/styleguide/sections/form/input_select.hbs new file mode 100644 index 0000000..bbd54f8 --- /dev/null +++ b/src/styleguide/sections/form/input_select.hbs @@ -0,0 +1,14 @@ +--- +title: Select input +description: > + Custom styled select input. + Attention: Webkit support only! +--- + + diff --git a/src/styleguide/sections/form/input_text.hbs b/src/styleguide/sections/form/input_text.hbs new file mode 100644 index 0000000..0d2e475 --- /dev/null +++ b/src/styleguide/sections/form/input_text.hbs @@ -0,0 +1,11 @@ +--- +title: Text input +description: > + Regular text input. +--- + + +  + +  + diff --git a/src/styleguide/sections/form/search.hbs b/src/styleguide/sections/form/search.hbs new file mode 100644 index 0000000..68c7436 --- /dev/null +++ b/src/styleguide/sections/form/search.hbs @@ -0,0 +1,15 @@ +--- +title: Search bar +description: > + There a regular and a light search bar. +--- + +
+ Search + +
+  +
+ Search + +
diff --git a/src/styleguide/sections/labels.hbs b/src/styleguide/sections/labels.hbs new file mode 100644 index 0000000..b5ad60e --- /dev/null +++ b/src/styleguide/sections/labels.hbs @@ -0,0 +1,21 @@ +--- +title: Labels +description: There are various types of labels. +--- + + + Regular + + + + Invalid + + + + Clickable invalid + + + + Blank + + diff --git a/src/styleguide/sections/mail_addresses.hbs b/src/styleguide/sections/mail_addresses.hbs new file mode 100644 index 0000000..f4a34ea --- /dev/null +++ b/src/styleguide/sections/mail_addresses.hbs @@ -0,0 +1,21 @@ +--- +title: List of mail addresses +description: +--- + +
+
+ + +
+ + + mail@example.com + + + + mail@example.com + + + +
diff --git a/src/styleguide/sections/spinner/spinner.hbs b/src/styleguide/sections/spinner/spinner.hbs new file mode 100644 index 0000000..b32a967 --- /dev/null +++ b/src/styleguide/sections/spinner/spinner.hbs @@ -0,0 +1,6 @@ +--- +title: Spinner +description: Animated spinner with CSS only. +--- + + diff --git a/src/styleguide/sections/spinner/spinner_big.hbs b/src/styleguide/sections/spinner/spinner_big.hbs new file mode 100644 index 0000000..4df6f3c --- /dev/null +++ b/src/styleguide/sections/spinner/spinner_big.hbs @@ -0,0 +1,6 @@ +--- +title: Big spinner +description: +--- + + diff --git a/src/styleguide/sections/spinner/spinner_block.hbs b/src/styleguide/sections/spinner/spinner_block.hbs new file mode 100644 index 0000000..7f6b617 --- /dev/null +++ b/src/styleguide/sections/spinner/spinner_block.hbs @@ -0,0 +1,8 @@ +--- +title: Spinner block +description: Full width spinner block with additional margin. +--- + + diff --git a/src/styleguide/sections/tags_input.hbs b/src/styleguide/sections/tags_input.hbs new file mode 100644 index 0000000..17b9ca1 --- /dev/null +++ b/src/styleguide/sections/tags_input.hbs @@ -0,0 +1,22 @@ +--- +title: Tags input +description: Markup is generated via Angular directive ngTagsInput. +--- + +
+
+
+
    +
  • + mail@example.com + × +
    • +
  • + mail@example.com + × +
    • +
+ +
+
+
diff --git a/src/styleguide/sections/toolbars/toolbar_actions.hbs b/src/styleguide/sections/toolbars/toolbar_actions.hbs new file mode 100644 index 0000000..17b10b8 --- /dev/null +++ b/src/styleguide/sections/toolbars/toolbar_actions.hbs @@ -0,0 +1,24 @@ +--- +title: Toolbar with actions +description: List of buttons. +--- + +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
diff --git a/src/styleguide/sections/toolbars/toolbar_label.hbs b/src/styleguide/sections/toolbars/toolbar_label.hbs new file mode 100644 index 0000000..09098f7 --- /dev/null +++ b/src/styleguide/sections/toolbars/toolbar_label.hbs @@ -0,0 +1,11 @@ +--- +title: Toolbar with label +description: Use as headline with integrated back button. +--- + +
+ + Back + Label + +
diff --git a/src/styleguide/sections/tooltip.hbs b/src/styleguide/sections/tooltip.hbs new file mode 100644 index 0000000..0f780a3 --- /dev/null +++ b/src/styleguide/sections/tooltip.hbs @@ -0,0 +1,16 @@ +--- +title: Tooltip +description: > + The tooltip is positioned absolutely within the application via JavaScript. +--- + +
+
+
Content
+
+  +
+
+
Optional title
+
Multi-line
Content
+
diff --git a/src/styleguide/sections/typo/typo_code.hbs b/src/styleguide/sections/typo/typo_code.hbs new file mode 100644 index 0000000..e55ca19 --- /dev/null +++ b/src/styleguide/sections/typo/typo_code.hbs @@ -0,0 +1,6 @@ +--- +title: Code +description: Inline code style. +--- + +1234-1234-1234-1234 diff --git a/src/styleguide/sections/typo/typo_paragraph.hbs b/src/styleguide/sections/typo/typo_paragraph.hbs new file mode 100644 index 0000000..6b863fe --- /dev/null +++ b/src/styleguide/sections/typo/typo_paragraph.hbs @@ -0,0 +1,14 @@ +--- +title: Paragraph +description: > + Paragraph with margin bottom and additional styles for + strong, em, + and a. +--- + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Accusamus possimus officiis quia perferendis quo assumenda, + recusandae repellat? Iusto vero, temporibus debitis eveniet + qui libero excepturi, architecto laborum assumenda, modi aperiam. +

diff --git a/src/styleguide/sections/typo/typo_title.hbs b/src/styleguide/sections/typo/typo_title.hbs new file mode 100644 index 0000000..9fa651a --- /dev/null +++ b/src/styleguide/sections/typo/typo_title.hbs @@ -0,0 +1,6 @@ +--- +title: Title +description: Use as main page title. +--- + +

Title