Merge branch 'release-1.7.6'

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ## UI Kit "Kraken"
 
+### 1.7.6 - 2016-09-01
+
+#### UI-Kit changes
+
+- Desktop: Content area is now 12 columns wide to accommodate larger block elements. In response basic text elements `h1-h6, p, li, dl` now have a max-width for readability. See `_grid-layout.scss`
+- Desktop: Added `.content-full-width` as a method of making basic text elements fill to 12 columns if required (see above).
+- Base `%base-vertical-list` and the vertical lists have re-written, switching from flexboxes to Neat columns, providing IE9/10 support. Also done for top set of footer links (`.footer-top`).
+
+#### Styleguide
+
+- Added a 'Zoo' example page (`/examples/zoo.html`) that demonstrates every element in the UI Kit
+- Section index links now only show Section headings and not Sub-sections
+- Omega reset mixin added to Grid settings (documented under *§ Grid - Helpers*).
+
+#### Bugfixes
+
+- Fixed HTML validation errors [PR 311](https://github.com/AusDTO/gov-au-ui-kit/pull/311)
+
 ### 1.7.5 - 2016-08-25
 
 #### UI-Kit changes

Gulpfile.js

@@ -17,17 +17,19 @@ var gulp = require('gulp'),
     webpack = require('webpack-stream'),
     zip = require('gulp-zip'),
     wrap = require('gulp-wrap'),
-    imagemin = require('gulp-imagemin')
+    imagemin = require('gulp-imagemin'),
+    handlebars = require('gulp-compile-handlebars')
     ;
 
 var paths = {
     assets: './assets/**/*.*',
     assetsDir: './assets',
     scssDir: './assets/sass/**/*.scss',
+    scssTemplatesDir: './assets/sass/templates',
     kssScssDir: './kss-builder/kss-assets/*.scss',
     kssCssDir: './kss-builder/kss-assets',
-    examplesDir: './examples/*.html',
-    examplesTemplatesDir: './examples/layouts',
+    examples: './examples/*.hbs',
+    examplePartialsDir: './examples/partials',
     kssBuilderDir: './kss-builder/**/*.*',
     images: './assets/img/**/*.+(png|svg|jpg)',
     scss: './assets/sass/ui-kit.scss',
@@ -56,6 +58,9 @@ var options = {
         output: {
             filename: 'ui-kit.js',
         }
+    },
+    handlebars: {
+      batch: [ paths.scssTemplatesDir, paths.examplePartialsDir ]
     }
 };
 
@@ -137,8 +142,12 @@ gulp.task('svg2png', function () {
 });
 
 gulp.task('examples', function () {
-    return gulp.src(paths.examplesDir)
-      .pipe(wrap({ src: paths.examplesTemplatesDir + '/default.html' }))
+
+    return gulp.src(paths.examples)
+      .pipe(handlebars({}, options.handlebars))
+      .pipe(rename({
+        extname: '.html'
+      }))
       .pipe(gulp.dest(paths.outputHTML + '/examples')).pipe(connect.reload());
 });
 
@@ -209,8 +218,7 @@ gulp.task('watch', ['watch.build']);
 gulp.task('watch.build', function () {
     gulp.watch([
             paths.assets,
-            paths.examplesDir,
-            paths.examplesTemplatesDir,
+            paths.examples,
             paths.readme,
             paths.kssBuilderDir,
             '!./kss-builder/kss-assets/kss.css'

assets/sass/_forms.scss

@@ -17,7 +17,7 @@ Text input
 
 Single line text inputs.
 
-They can be limited to number input only by setting the `type` attribute to `number`. For telephone numbers set the `type` attribute to `tel`. To trigger the num-pad on iPhones, add a pattern attribute to the input element: `pattern="[0-9]*"`.
+They can be limited to number input only by setting the `type` attribute to `number`. For telephone numbers set the `type` attribute to `tel`. To explicityly trigger the num-pad on iPhones, omit the `type` attribute and add a pattern attribute to the input element: `pattern="[0-9]*"`.
 
 Markup: templates/text-input-single-line.hbs
 

assets/sass/_grid-layout.scss

@@ -1,5 +1,5 @@
 @mixin wrapper-padding {
-  @include pad(0 $base-spacing);
+  @include pad(0 $gutter);
   width: 100%;
   box-sizing: border-box;
 
@@ -138,10 +138,10 @@ main {
       }
 
       @include media($desktop) {
-        @include span-columns(10 of 16);
-        @include shift(2);
+        @include span-columns(12 of 16);
       }
 
+      // Know what this is for?
       &:first-child {
 
         @include reset-layout-direction;

assets/sass/_grid-settings.scss

@@ -26,7 +26,6 @@ $grid-columns: 4 !global;
 $max-width: em(1200) !global;
 $gutter: em(32);
 
-
 /*
 Responsive breakpoints
 
@@ -56,11 +55,55 @@ $mobile-minwidth: 420px;
 $tablet-minwidth: 768px;
 $desktop-minwidth: 1200px;
 
-$mobile: new-breakpoint(min-width $mobile-minwidth, 8);
-$mobile-only: new-breakpoint(min-width $mobile-minwidth max-width $tablet-minwidth - 1, 8);
-$tablet: new-breakpoint(min-width $tablet-minwidth, 12);
-$tablet-only: new-breakpoint(min-width $tablet-minwidth max-width $desktop-minwidth - 1, 12);
-$desktop: new-breakpoint(min-width $max-width, 16);
+$mobile-grid-columns: 8;
+$tablet-grid-columns: 12;
+$content-grid-columns: $tablet-grid-columns;
+$desktop-grid-columns: 16;
+
+$mobile: new-breakpoint(min-width $mobile-minwidth, $mobile-grid-columns);
+$mobile-only: new-breakpoint(min-width $mobile-minwidth max-width $tablet-minwidth - 1, $mobile-grid-columns);
+$tablet: new-breakpoint(min-width $tablet-minwidth, $tablet-grid-columns);
+$tablet-only: new-breakpoint(min-width $tablet-minwidth max-width $desktop-minwidth - 1, $tablet-grid-columns);
+$desktop: new-breakpoint(min-width $max-width, $desktop-grid-columns);
+
+/*
+Helpers
+
+Style guide: Grid.4 Helpers
+*/
+
+/*
+Omega Reset
+
+When applying grid-columns to responsive layouts you may find yourself needing to reset the [omega properties applied by Neat](http://thoughtbot.github.io/neat-docs/latest/#omega):
+
+```
+.grid-item {
+  @include span-columns(2 of 4);
+  @include omega(2n);
+
+  @include media($desktop) {
+    @include omega-reset(2n);
+    @include span-columns(4 of 12);
+    @include omega(3n);
+  }
+}
+```
+
+Style guide: Grid.4 Helpers.1 Font stacks
+*/
+
+@mixin omega-reset($nth) {
+  $nth-plus-one: '#{$nth}+1';
+
+  &:nth-child(#{$nth}) {
+    margin-right: flex-gutter($content-grid-columns);
+  }
+
+  &:nth-child(#{$nth-plus-one}) {
+    clear: none;
+  }
+}
 
 /*
 Debugging
@@ -73,7 +116,7 @@ $visual-grid: true;
 
 See the example <a href="http://neat.bourbon.io/examples/" rel="external">Bourbon Neat working grid layout</a>.
 
-Style guide: Grid.4 Debugging
+Style guide: Grid.4 Helpers.2 Debugging
 */
 
 // Toggle visibility of your grid columns for development/debugging.

assets/sass/_lists.scss

@@ -118,7 +118,7 @@ Style guide: List styles.4 Highlighted word style
 
 %base-list {
   list-style: none;
-  margin: ($base-spacing * 2) 0;
+  //margin: ($base-spacing * 2) 0;
   padding: 0;
 
   .tags {
@@ -162,7 +162,7 @@ Style guide: List styles.4 Highlighted word style
   }
 
   > li {
-    padding: $base-spacing 0;
+    padding: 4% 0; //Was `padding: $base-spacing 0;` changed to match gutter
     border-bottom: solid 1px $border-colour;
     margin-bottom: 0;
   }
@@ -185,11 +185,16 @@ Style guide: List styles.4 Highlighted word style
   }
 }
 
+
+
 .list-horizontal {
   @extend %base-list;
 
   > li {
 
+    width: 100%;
+    max-width: none;
+
     @include media($tablet) {
       display: flex;
     }
@@ -222,41 +227,18 @@ Style guide: List styles.4 Highlighted word style
         }
       }
     }
-
   }
-
 }
 
-$list-vertical-gutter: 4%;
 
-.list-vertical {
+%base-vertical-list {
   @extend %base-list;
-
-  &.no-border {
-    li:nth-child(-n+2) {
-      border-top: none;
-      padding-top: 0;
-    }
-  }
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  @include outer-container;
 
   > li {
 
     border-top: 4px solid $border-colour;
     border-bottom: none;
-    margin: 0;
-    flex: 0 0 100%;
-
-    @include media($tablet) {
-      flex-basis: ((100% - $list-vertical-gutter) / 2);
-
-      &:not(:nth-child(2n)) {
-        margin-right: $list-vertical-gutter;
-      }
-    }
 
     article {
       display: flex;
@@ -295,33 +277,51 @@ $list-vertical-gutter: 4%;
   }
 }
 
-.list-vertical--thirds {
-  @extend .list-vertical;
+.list-vertical {
+  @extend %base-vertical-list;
 
   &.no-border {
-    li:nth-child(-n+3) {
+    li:nth-child(-n+2) {
       border-top: none;
       padding-top: 0;
     }
   }
 
   > li {
     @include media($tablet) {
-      flex: 0 0 ((100% - $list-vertical-gutter * 2) / 3);
+      @include span-columns(6 of 12);
+      @include omega(2n);
+    }
+  }
+}
 
-      &:not(:nth-child(2n)) {
-        margin-right: 0;
-      }
 
-      &:not(:nth-child(3n)) {
-        margin-right: $list-vertical-gutter;
-      }
+.list-vertical--thirds {
+  @extend %base-vertical-list;
+
+  &.no-border {
+    li:nth-child(-n+3) {
+      border-top: none;
+      padding-top: 0;
+    }
+  }
+
+  > li {
+    @include media($tablet) {
+      @include span-columns(6 of 12);
+      @include omega(2n);
+    }
+    @include media($desktop) {
+      @include omega-reset(2n);
+      @include span-columns(4 of 12);
+      @include omega(3n);
     }
   }
 }
 
+
 .list-vertical--fourths {
-  @extend .list-vertical;
+  @extend %base-vertical-list;
 
   &.no-border {
     li:nth-child(-n+4) {
@@ -332,20 +332,18 @@ $list-vertical-gutter: 4%;
 
   > li {
     @include media($tablet) {
-      flex: 0 0 ((100% - $list-vertical-gutter * 3) / 4);
-
-      &:not(:nth-child(2n)),
-      &:not(:nth-child(3n)) {
-        margin-right: 0;
-      }
-
-      &:not(:nth-child(4n)) {
-        margin-right: $list-vertical-gutter;
-      }
+      @include span-columns(6 of 12);
+      @include omega(2n);
+    }
+    @include media($desktop) {
+      @include omega-reset(2n);
+      @include span-columns(3 of 12);
+      @include omega(4n);
     }
   }
 }
 
+
 .list-small {
   @extend %base-list;
   border-top: solid 1px $border-colour;

assets/sass/_page-footer.scss

@@ -54,23 +54,18 @@ footer[role='contentinfo'] {
     border-bottom: 1px solid $border-colour;
 
     nav {
-      display: flex;
-      box-sizing: border-box;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: space-around;
+      @extend %base-vertical-list;
 
       ul {
-        flex: 0 0 100%;
-        margin: 0;
-        padding-right: $base-spacing;
-
-        @include media($mobile) {
-          flex-basis: 50%;
+        @include media($tablet) {
+          @include span-columns(6 of 12);
+          @include omega(2n);
         }
 
-        @include media($tablet) {
-          flex-basis: 25%;
+        @include media($desktop) {
+          @include omega-reset(2n);
+          @include span-columns(3 of 12);
+          @include omega(5n);
         }
       }