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
|
-
* [`
|
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
|
-
|
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
|
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
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
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
|
}
|
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.
|
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-
|
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:
|
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:
|
256
|
+
hash: -2861742568216633560
|
256
257
|
requirements: []
|
257
258
|
rubyforge_project:
|
258
259
|
rubygems_version: 1.8.23
|