From dca2f4ead9a0490714e1f0e8012d5a272801d199 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Sat, 24 Jan 2015 13:52:29 +0100 Subject: [PATCH] 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. +--- + + 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