diff --git a/Gruntfile.js b/Gruntfile.js
index 619b7ae..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'
+ }
}
},
@@ -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']);
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/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..7291cc6
--- /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;
+
+ @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/helpers/strip-file-extension.js b/src/styleguide/helpers/strip-file-extension.js
new file mode 100644
index 0000000..f8eb727
--- /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..475dd88
--- /dev/null
+++ 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
+---
+
+
+ All icons are available via inline svg and the {{{@description}}}Icons
+ Available icons
+ xlink:href
+ attribute of the <use>
tag.
+ {{title}}
+ {{#compose src=src}}
+ {{@title}}
+
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.
+---
+
+<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.
+---
+
+
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.
+---
+
+
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:
+---
+
+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. +--- + +