govuk_frontend_toolkit - npm Package Compare versions

Comparing version 0.47.0 to 0.48.0

govuk_frontend_toolkit/README.md

@@ -78,4 +78,5 @@ # GOV.UK Frontend Toolkit
 
+* [`_grid_layout.scss`](#grid-layout)
+* [`_conditionals.scss`](#conditionals)
 * [`_colours.scss`](#colours)
-* [`_conditionals.scss`](#conditionals)
 * [`_css3.scss`](#css3)
@@ -86,2 +87,31 @@ * [`_typography.scss`](#typography)
 
+### <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
@@ -593,3 +623,3 @@
 
-##### Usage
+##### Usage - Alpha/Beta banners
 
@@ -599,9 +629,41 @@ .alpha-banner  {
     }
-    .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
@@ -608,0 +670,0 @@

package.json

 {
   "name": "govuk_frontend_toolkit",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "description": "npm for govuk_frontend_toolkit",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

432098

increased by0.52%

Number of package files

140

increased by0.72%

No dependency changes