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}} +
+ +
\ No newline at end of file