govuk_frontend_toolkit 0.47.0 → 0.48.0

data/app/assets/README.md

@@ -75,13 +75,43 @@ In production:
 
 ## Mixin-sets
 
-* [`_colours.scss`](#colours)
+* [`_grid_layout.scss`](#grid-layout)
 * [`_conditionals.scss`](#conditionals)
+* [`_colours.scss`](#colours)
 * [`_css3.scss`](#css3)
 * [`_typography.scss`](#typography)
 * [`design-patterns/_buttons.scss`](#buttons)
 * [`design-patterns/_alpha-beta.scss`](#alpha-beta)
 
+### <a id="grid-layout"></a>Grid layout
+
+Use `.outer-block` and `.inner-block` together.
+
+Outer block sets a max width of 1020px,
+auto margins and a minimum width for IE8 and below.
+
+Inner block sets gutters to align with the header and footer.
+
+Use within banners, or to set a max-width for your main content area,
+with padding that matches the header and footer.
+
+##### Usage
+
+    .outer-block {
+      @include outer-block;
+    }
+
+    .inner-block {
+      @include inner-block;
+    }
+
+
+    <div class="outer-block">
+      <div class="inner-block">
+        Content in here
+      </div>
+    </div>
+
 ### <a id="conditionals"></a>Conditionals
 
 Media query and IE helpers. These make producing responsive layouts and
@@ -588,17 +618,49 @@ Mixins for creating alpha/beta banners and tags for services on GOV.UK
 
 `$state` either `alpha` or `beta`. This will set the background colour of the element to the appropriate colour.
 
-##### Usage
+##### Usage - Alpha/Beta banners
 
     .alpha-banner  {
       @include phase-banner(alpha);
     }
-    .beta-banner {
+
+    <div class="alpha-banner">
+      <div class="outer-block">
+        <div class="inner-block">
+          <strong>ALPHA:</strong> This is a prototype
+        </div>
+      </div>
+    </div>
+
+    .beta-banner  {
       @include phase-banner(beta);
     }
+
+    <div class="beta-banner">
+      <div class="outer-block">
+        <div class="inner-block">
+          <strong>BETA:</strong> This is a trial service
+        </div>
+      </div>
+    </div>
+
+
+##### Usage - Alpha/Beta tags
+
+    .alpha-tag{
+      @include phase-tag(alpha);
+    }
+    <h2>
+      Apply using the new service <span class="beta-tag">ALPHA</span>
+    </h2>
+
     .beta-tag{
       @include phase-tag(beta);
     }
+    <h2>
+      Apply using the new service <span class="beta-tag">BETA</span>
+    </h2>
+
 
 ## JavaScript
 

data/app/assets/stylesheets/_grid_layout.scss

@@ -0,0 +1,36 @@
+@import '_conditionals.scss';
+@import '_measurements.scss';
+@import '_shims.scss';
+
+// Outer block sets a max width
+@mixin outer-block {
+  margin: 0 auto;
+  width: auto;
+  max-width: 960 + $gutter*2;
+  @extend %contain-floats;
+  @include ie-lte(8) {
+    width: 1020px;
+  }
+}
+
+// Outer block usage:
+//
+// .outer-block {
+//    @include outer-block;
+// }
+
+// Inner block sets gutters to align content with header and footer
+@mixin inner-block {
+  padding-left: $gutter-half;
+  padding-right: $gutter-half;
+  @include media(tablet) {
+    padding-left: $gutter;
+    padding-right: $gutter;
+  }
+}
+
+// Inner block usage:
+//
+// .inner-block {
+//    @include inner-block;
+// }

data/app/assets/stylesheets/design-patterns/_alpha-beta.scss

@@ -1,9 +1,11 @@
 @import "../_colours";
 @import "../_typography";
 @import "../_shims";
+@import "../_grid_layout";
 
 @mixin phase-banner($state: alpha) {
-  padding: 8px 0;
+  padding-top: 8px;
+  padding-bottom: 8px;
 
   @if $state == alpha {
     background-color: $alpha-colour;
@@ -11,11 +13,19 @@
     background-color: $beta-colour;
   }
 
-  p {
-    max-width: 960px;
-    margin: 0 auto;
-    padding: 0 15px;
+  // Outer block sets a max width
+  .outer-block {
+    @include outer-block;
+  }
 
+  // Inner block sets gutters to align content with header and footer
+  .inner-block {
+    @include inner-block;
+  }
+
+  // No need to set a max-width for content inside .inner-block
+  p {
+    margin: 0;
     color: $text-colour;
     @include core-16;
   }

data/lib/govuk_frontend_toolkit/version.rb

@@ -1,3 +1,3 @@
 module GovUKFrontendToolkit
-  VERSION = "0.47.0"
+  VERSION = "0.48.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 0.47.0
+  version: 0.48.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-04-07 00:00:00.000000000 Z
+date: 2014-04-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -220,6 +220,7 @@ files:
 - app/assets/stylesheets/_css3.scss
 - app/assets/stylesheets/_device-pixels.scss
 - app/assets/stylesheets/_font_stack.scss
+- app/assets/stylesheets/_grid_layout.scss
 - app/assets/stylesheets/_measurements.scss
 - app/assets/stylesheets/_shims.scss
 - app/assets/stylesheets/_typography.scss
@@ -243,7 +244,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2209772174257624047
+      hash: -2861742568216633560
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -252,7 +253,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 2209772174257624047
+      hash: -2861742568216633560
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23