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
+
+ All icons are available via inline svg and the Icons
+ Available icons
+ xlink:href
+ attribute of the <use>
tag.
+