govuk_frontend_toolkit 0.47.0 → 0.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/app/assets/README.md CHANGED
@@ -75,13 +75,43 @@ In production:
75
75
 
76
76
  ## Mixin-sets
77
77
 
78
- * [`_colours.scss`](#colours)
78
+ * [`_grid_layout.scss`](#grid-layout)
79
79
  * [`_conditionals.scss`](#conditionals)
80
+ * [`_colours.scss`](#colours)
80
81
  * [`_css3.scss`](#css3)
81
82
  * [`_typography.scss`](#typography)
82
83
  * [`design-patterns/_buttons.scss`](#buttons)
83
84
  * [`design-patterns/_alpha-beta.scss`](#alpha-beta)
84
85
 
86
+ ### <a id="grid-layout"></a>Grid layout
87
+
88
+ Use `.outer-block` and `.inner-block` together.
89
+
90
+ Outer block sets a max width of 1020px,
91
+ auto margins and a minimum width for IE8 and below.
92
+
93
+ Inner block sets gutters to align with the header and footer.
94
+
95
+ Use within banners, or to set a max-width for your main content area,
96
+ with padding that matches the header and footer.
97
+
98
+ ##### Usage
99
+
100
+ .outer-block {
101
+ @include outer-block;
102
+ }
103
+
104
+ .inner-block {
105
+ @include inner-block;
106
+ }
107
+
108
+
109
+ <div class="outer-block">
110
+ <div class="inner-block">
111
+ Content in here
112
+ </div>
113
+ </div>
114
+
85
115
  ### <a id="conditionals"></a>Conditionals
86
116
 
87
117
  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
588
618
 
589
619
  `$state` either `alpha` or `beta`. This will set the background colour of the element to the appropriate colour.
590
620
 
591
- ##### Usage
621
+ ##### Usage - Alpha/Beta banners
592
622
 
593
623
  .alpha-banner {
594
624
  @include phase-banner(alpha);
595
625
  }
596
- .beta-banner {
626
+
627
+ <div class="alpha-banner">
628
+ <div class="outer-block">
629
+ <div class="inner-block">
630
+ <strong>ALPHA:</strong> This is a prototype
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ .beta-banner {
597
636
  @include phase-banner(beta);
598
637
  }
638
+
639
+ <div class="beta-banner">
640
+ <div class="outer-block">
641
+ <div class="inner-block">
642
+ <strong>BETA:</strong> This is a trial service
643
+ </div>
644
+ </div>
645
+ </div>
646
+
647
+
648
+ ##### Usage - Alpha/Beta tags
649
+
650
+ .alpha-tag{
651
+ @include phase-tag(alpha);
652
+ }
653
+ <h2>
654
+ Apply using the new service <span class="beta-tag">ALPHA</span>
655
+ </h2>
656
+
599
657
  .beta-tag{
600
658
  @include phase-tag(beta);
601
659
  }
660
+ <h2>
661
+ Apply using the new service <span class="beta-tag">BETA</span>
662
+ </h2>
663
+
602
664
 
603
665
  ## JavaScript
604
666
 
@@ -0,0 +1,36 @@
1
+ @import '_conditionals.scss';
2
+ @import '_measurements.scss';
3
+ @import '_shims.scss';
4
+
5
+ // Outer block sets a max width
6
+ @mixin outer-block {
7
+ margin: 0 auto;
8
+ width: auto;
9
+ max-width: 960 + $gutter*2;
10
+ @extend %contain-floats;
11
+ @include ie-lte(8) {
12
+ width: 1020px;
13
+ }
14
+ }
15
+
16
+ // Outer block usage:
17
+ //
18
+ // .outer-block {
19
+ // @include outer-block;
20
+ // }
21
+
22
+ // Inner block sets gutters to align content with header and footer
23
+ @mixin inner-block {
24
+ padding-left: $gutter-half;
25
+ padding-right: $gutter-half;
26
+ @include media(tablet) {
27
+ padding-left: $gutter;
28
+ padding-right: $gutter;
29
+ }
30
+ }
31
+
32
+ // Inner block usage:
33
+ //
34
+ // .inner-block {
35
+ // @include inner-block;
36
+ // }
@@ -1,9 +1,11 @@
1
1
  @import "../_colours";
2
2
  @import "../_typography";
3
3
  @import "../_shims";
4
+ @import "../_grid_layout";
4
5
 
5
6
  @mixin phase-banner($state: alpha) {
6
- padding: 8px 0;
7
+ padding-top: 8px;
8
+ padding-bottom: 8px;
7
9
 
8
10
  @if $state == alpha {
9
11
  background-color: $alpha-colour;
@@ -11,11 +13,19 @@
11
13
  background-color: $beta-colour;
12
14
  }
13
15
 
14
- p {
15
- max-width: 960px;
16
- margin: 0 auto;
17
- padding: 0 15px;
16
+ // Outer block sets a max width
17
+ .outer-block {
18
+ @include outer-block;
19
+ }
18
20
 
21
+ // Inner block sets gutters to align content with header and footer
22
+ .inner-block {
23
+ @include inner-block;
24
+ }
25
+
26
+ // No need to set a max-width for content inside .inner-block
27
+ p {
28
+ margin: 0;
19
29
  color: $text-colour;
20
30
  @include core-16;
21
31
  }
@@ -1,3 +1,3 @@
1
1
  module GovUKFrontendToolkit
2
- VERSION = "0.47.0"
2
+ VERSION = "0.48.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_frontend_toolkit
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.47.0
4
+ version: 0.48.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2014-04-07 00:00:00.000000000 Z
12
+ date: 2014-04-14 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -220,6 +220,7 @@ files:
220
220
  - app/assets/stylesheets/_css3.scss
221
221
  - app/assets/stylesheets/_device-pixels.scss
222
222
  - app/assets/stylesheets/_font_stack.scss
223
+ - app/assets/stylesheets/_grid_layout.scss
223
224
  - app/assets/stylesheets/_measurements.scss
224
225
  - app/assets/stylesheets/_shims.scss
225
226
  - app/assets/stylesheets/_typography.scss
@@ -243,7 +244,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
243
244
  version: '0'
244
245
  segments:
245
246
  - 0
246
- hash: 2209772174257624047
247
+ hash: -2861742568216633560
247
248
  required_rubygems_version: !ruby/object:Gem::Requirement
248
249
  none: false
249
250
  requirements:
@@ -252,7 +253,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
252
253
  version: '0'
253
254
  segments:
254
255
  - 0
255
- hash: 2209772174257624047
256
+ hash: -2861742568216633560
256
257
  requirements: []
257
258
  rubyforge_project:
258
259
  rubygems_version: 1.8.23