govuk_frontend_toolkit 1.6.2 → 1.7.0

data/app/assets/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.7.0
+
+- Create new grid helpers for creating grid layouts
+- The old grid mixins; `@outer-block` and `@inner-block` are now deprecated
+
 # 1.6.2
 
 - Reset font family for print stylesheets to fix print errors in browsers and printers

data/app/assets/README.md

@@ -99,32 +99,56 @@ In production:
 
 ### <a id="grid-layout"></a>Grid layout
 
-Use `.outer-block` and `.inner-block` together.
+Grid helpers to enable easy cross browser grids. The grids use absolute widths
+in older versions of IE or percentage based widths in modern browsers.
 
-Outer block sets a max width of 1020px,
-auto margins and a minimum width for IE8 and below.
+- `%site-width-container` creates a 960px wide elastic container for you site content block
+- `%grid-row` container for a row of columns
+- `@mixin grid-column($width, $full-width: tablet)` a mixin to create grid columns of fraction width
 
-Inner block sets gutters to align with the header and footer.
+These three grid helpers are designed to be used together and aren't guaranteed
+to work or behave in a predictable way if used in isolation.
 
-Use within banners, or to set a max-width for your main content area,
-with padding that matches the header and footer.
+There is also an `%outdent-to-full-width` selector which can be extended to
+outdent and element and cause it to take up the edge gutters and butt up to the
+edge of smaller screens.
 
-##### Usage
+#### Usage:
 
-    .outer-block {
-      @include outer-block;
-    }
+```
+#page-container {
+  @extend %site-width-container;
+}
+.grid-row {
+  @extend %grid-row;
 
-    .inner-block {
-      @include inner-block;
-    }
+  .column-third {
+    @include grid-column( 1/3 );
+  }
+  .column-two-thirds {
+    @include grid-column( 2/3 );
+  }
+}
+.hero-image {
+  @extend %outdent-to-full-width;
+}
 
 
-    <div class="outer-block">
-      <div class="inner-block">
-        Content in here
-      </div>
+<div id="page-container">
+  <div class="grid-row">
+    <div class="column-two-thirds">
+      Main content
     </div>
+    <div class="column-third">
+      Sidebar
+    </div>
+  </div>
+
+  <div class="hero-image">
+    <img ...>
+  </div>
+</div>
+```
 
 ### <a id="conditionals"></a>Conditionals
 

data/app/assets/VERSION.txt

@@ -1 +1 @@
-1.6.2
+1.7.0

data/app/assets/stylesheets/_grid_layout.scss

@@ -2,8 +2,121 @@
 @import '_measurements.scss';
 @import '_shims.scss';
 
+$site-width: 960px;
+
+// An extendable selector to wrap your entire site content block
+// It limits the sites width to be 960px wide and maintains consistent margins
+// on the site of the page and shrinks the margins for mobile.
+//
+// Usage:
+//
+// #page-container {
+//   @extend %site-width-container;
+// }
+
+%site-width-container {
+  max-width: $site-width;
+  @include ie-lte(8){
+    width: $site-width;
+  }
+
+  margin: 0 $gutter-half;
+  @include media(tablet){
+    margin: 0 $gutter;
+  }
+  @include media($min-width: ($site-width + $gutter * 2), $ignore-for-ie: true){
+    margin: 0 auto;
+  }
+}
+
+// An extendable selector to outdent to the full page-width
+// So that you can create elements that take up the gutters on the side of the
+// page and butt up to the edge of the browser on smaller screens (rather than
+// leaving a gutter at the edge of the page).
+//
+// Usage:
+//
+// .hero-image-container {
+//   @extend %outdent-to-full-width;
+// }
+%outdent-to-full-width {
+  margin-left: -$gutter-half;
+  margin-left: -$gutter-half;
+  @include media(tablet){
+    margin-left: -$gutter;
+    margin-right: -$gutter;
+  }
+}
+
+//
+// Usage:
+//
+//   .grid-row {
+//     @extend %grid-row;
+//   }
+
+%grid-row {
+  @extend %contain-floats;
+  margin: 0 (-$gutter-half);
+}
+
+// An extendable selector to define a row for grid columns to sit in
+//
+// Usage:
+//
+//   .grid-row {
+//     @extend %grid-row;
+//   }
+
+%grid-row {
+  @extend %contain-floats;
+  margin: 0 (-$gutter-half);
+}
+
+// A mixin for a grid column
+// Creates a cross browser grid column with a standardised gutter between the
+// columns. Widths should be defined as fractions of the full desktop width
+// they want to fill. By default they break to become full width at tablet size
+// but that can be configured to be dektop using the `$full-width` argument.
+//
+// Usage:
+//
+//   .column-quarter {
+//     @include grid-column( 1/4 );
+//   }
+//   .column-half {
+//     @include grid-column( 1/2 );
+//   }
+//   .column-third {
+//     @include grid-column( 1/3 );
+//   }
+//   .column-two-thirds {
+//     @include grid-column( 2/3 );
+//   }
+//   .column-desktop-third {
+//     @include grid-column( 1/3, $full-width: desktop );
+//   }
+
+@mixin grid-column($width, $full-width: tablet) {
+  @include media($full-width){
+    float: left;
+    width: percentage($width);
+  }
+  @include ie-lte(7){
+    width: (($site-width + $gutter) * $width) - $gutter;
+  }
+
+  padding: 0 $gutter-half;
+  box-sizing: border-box;
+}
+
+
+// OLD depricated grid mixins
+// You should migrate to the mixins above in the future
+
 // Outer block sets a max width
 @mixin outer-block {
+  @warn "The @mixin outer-block is depricated and should be updated to new grid helpers";
   margin: 0 auto;
   width: auto;
   max-width: 960 + $gutter*2;
@@ -13,15 +126,10 @@
   }
 }
 
-// Outer block usage:
-//
-// .outer-block {
-//    @include outer-block;
-// }
-
 // Inner block sets either margin or padding
 // to align content with header and footer
 @mixin inner-block($margin-or-padding: padding) {
+  @warn "The @mixin inner-block is depricated and should be updated to use new grid helpers";
   #{$margin-or-padding}-left: $gutter-half;
   #{$margin-or-padding}-right: $gutter-half;
   @include media(tablet) {
@@ -29,15 +137,3 @@
     #{$margin-or-padding}-right: $gutter;
   }
 }
-
-// Inner block usage:
-//
-// By default, inner block sets padding
-// .inner-block {
-//    @include inner-block;
-// }
-//
-// To set margins instead of padding:
-// .inner-block {
-//    @include inner-block(margin);
-// }

data/jenkins.sh

@@ -26,7 +26,7 @@ bundle exec rake
 # If the submodule has a new version string
 if [ "$PINNED_SUBMODULE_VERSION" != "$NEW_SUBMODULE_VERSION" ]; then
   # Commit the updated submodule and push it to origin
-  git commit -am "Bump to version $PINNED_SUBMODULE_VERSION"
+  git commit -am "Bump to version $NEW_SUBMODULE_VERSION"
   git push origin master
 fi
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 1.6.2
+  version: 1.7.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-29 00:00:00.000000000 Z
+date: 2014-10-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
-  requirement: &6425400 !ruby/object:Gem::Requirement
+  requirement: &11490340 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
         version: 3.1.0
   type: :runtime
   prerelease: false
-  version_requirements: *6425400
+  version_requirements: *11490340
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &6424820 !ruby/object:Gem::Requirement
+  requirement: &11489600 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
         version: 3.2.0
   type: :runtime
   prerelease: false
-  version_requirements: *6424820
+  version_requirements: *11489600
 - !ruby/object:Gem::Dependency
   name: gem_publisher
-  requirement: &6424300 !ruby/object:Gem::Requirement
+  requirement: &11488780 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - =
@@ -43,10 +43,10 @@ dependencies:
         version: 1.3.1
   type: :development
   prerelease: false
-  version_requirements: *6424300
+  version_requirements: *11488780
 - !ruby/object:Gem::Dependency
   name: rake
-  requirement: &6423720 !ruby/object:Gem::Requirement
+  requirement: &11487900 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - =
@@ -54,7 +54,7 @@ dependencies:
         version: 0.9.2.2
   type: :development
   prerelease: false
-  version_requirements: *6423720
+  version_requirements: *11487900
 description: 
 email: bradley.wright@digital.cabinet-office.gov.uk
 executables: []
@@ -254,7 +254,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 3672654523895780324
+      hash: 1154536810056934077
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -263,7 +263,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 3672654523895780324
+      hash: 1154536810056934077
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.11