govuk_admin_template 0.0.7 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.md +5 -0
- data/CSS.md +81 -0
- data/README.md +15 -1
- data/app/assets/images/govuk_admin_template/favicon-development.png +0 -0
- data/app/assets/images/govuk_admin_template/favicon-preview.png +0 -0
- data/app/assets/images/govuk_admin_template/favicon-production.png +0 -0
- data/app/assets/images/govuk_admin_template/favicon.png +0 -0
- data/app/assets/images/{header-crown.png → govuk_admin_template/header-crown.png} +0 -0
- data/app/assets/stylesheets/govuk_admin_template/base.css.scss +4 -0
- data/app/assets/stylesheets/govuk_admin_template/navbar.css.scss +45 -1
- data/app/assets/stylesheets/govuk_admin_template/theme.css.scss +5 -0
- data/app/views/layouts/govuk_admin_template.html.erb +18 -2
- data/lib/govuk_admin_template/version.rb +1 -1
- data/lib/govuk_admin_template.rb +17 -0
- metadata +10 -5
data/CHANGELOG.md
CHANGED
data/CSS.md
ADDED
@@ -0,0 +1,81 @@
|
|
1
|
+
# Admin CSS
|
2
|
+
|
3
|
+
CSS in the gem follows two conventions:
|
4
|
+
* Naming patterns and class usage inline with Bootstrap 3
|
5
|
+
* eg the `text-muted` class and the gem specific `link-muted` class
|
6
|
+
* Using multiple classes in combination, eg `table table-bordered table-hover`
|
7
|
+
* [Principles of writing consistent, idiomatic CSS](https://github.com/necolas/idiomatic-css)
|
8
|
+
|
9
|
+
## Available helper classes
|
10
|
+
|
11
|
+
Firstly, the admin styles are based on Bootstrap:
|
12
|
+
* [Bootstrap CSS](http://getbootstrap.com/css/)
|
13
|
+
* [Bootstrap Components](http://getbootstrap.com/components/)
|
14
|
+
|
15
|
+
For admin components, see the admin style guide (`/style-guide` in your app).
|
16
|
+
|
17
|
+
### Hide and show content
|
18
|
+
[toggle.css.scss](app/assets/stylesheets/govuk_admin_template/toggles.css.scss)
|
19
|
+
|
20
|
+
Class | Purpose
|
21
|
+
------ |--------
|
22
|
+
`hide` | Hide content from all users, including screenreaders
|
23
|
+
`if-no-js-hide` | Hide from users without Javascript
|
24
|
+
`if-js-hide` | Hide from users with Javascript
|
25
|
+
`rm` | [Hide visually](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility) but keep available to screenreaders
|
26
|
+
`if-js-rm` | Hide visually from users with Javascript
|
27
|
+
|
28
|
+
### Margin helpers
|
29
|
+
|
30
|
+
Rather than creating a class purely to remove or add margins (many Bootstrap styled elements come with margins), use these helpers which come bundled with the default margins necessary to keep a consistent vertical rhythm. This also avoids a specificity nightmare. (These classes use `!important` so that they’ll _almost_ always work)
|
31
|
+
|
32
|
+
Class | Purpose
|
33
|
+
------ |--------
|
34
|
+
`add-top-margin` | Add _default vertical margin_ to top of element
|
35
|
+
`add-bottom-margin` | Add _default vertical margin_ to bottom of element
|
36
|
+
`add-label-margin` | Simulates the vertical spacing between a Bootstrap label and an input element (5px)
|
37
|
+
`add-vertical-margins` | Add _default vertical margin_ to top and bottom
|
38
|
+
`remove-top-margin` | Remove all margins from top of element
|
39
|
+
`remove-bottom-margin` | Remove all margins from bottom of element
|
40
|
+
`add-right-margin` | Add margin to the right of element
|
41
|
+
`add-left-margin` | Add margin to the left of element
|
42
|
+
|
43
|
+
### Padding helpers
|
44
|
+
|
45
|
+
Class | Purpose
|
46
|
+
------ |--------
|
47
|
+
`remove-padding` | Remove all padding from element
|
48
|
+
`remove-top-padding` | Remove top padding
|
49
|
+
`remove-bottom-padding` | Remove bottom padding
|
50
|
+
|
51
|
+
### Icon helpers
|
52
|
+
|
53
|
+
Class | Purpose
|
54
|
+
------ |--------
|
55
|
+
`glyphicon-smaller-than-text` | Bootstrap 3 glyphicons look unnaturally large against the same sized text. This class knocks them down to a friendlier size.
|
56
|
+
|
57
|
+
### Link helpers
|
58
|
+
|
59
|
+
Class | Purpose
|
60
|
+
------ |--------
|
61
|
+
`no-visit` | Prevent a link from showing a visited state (eg when used as a Javascript hook)
|
62
|
+
`link-muted` | Like Bootstrap’s `text-muted`, but for links. Makes them a matching grey and underlined.
|
63
|
+
`link-inherit` | Inherits its colour from surrounding text, gains an underline
|
64
|
+
|
65
|
+
### Tables
|
66
|
+
[tables.css.scss](app/assets/stylesheets/govuk_admin_template/tables.css.scss)
|
67
|
+
|
68
|
+
Class | Purpose
|
69
|
+
------ |--------
|
70
|
+
`table-header` | Add to rows in `<thead>` to give table headings greater contrast
|
71
|
+
`table-header-secondary` | Again in `<thead>`, for less important header rows. Uses a lighter grey.
|
72
|
+
|
73
|
+
### SASS Variables
|
74
|
+
|
75
|
+
Along with Bootstrap’s many [mixins](https://github.com/twbs/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss) and [variables](http://getbootstrap.com/customize/#less-variables), the admin gem comes with [some of its own](app/assets/stylesheets/govuk_admin_template/theme.css.scss).
|
76
|
+
|
77
|
+
Class | Purpose
|
78
|
+
------ |--------
|
79
|
+
`$font-family-gill-sans` | Gill Sans font stack
|
80
|
+
`$default-vertical-margin` | Based on Bootstrap’s `$line-height-computed`. Use increments of this value.
|
81
|
+
`$link-color-visited` | Like Bootstrap’s `$link-color`, the purple visited link colour.
|
data/README.md
CHANGED
@@ -8,7 +8,7 @@ This gem provides (via a Rails engine):
|
|
8
8
|
* An admin layout with header and footer
|
9
9
|
* A [lightweight javascript framework](JAVASCRIPT.md)
|
10
10
|
* Admin design patterns available from `/style-guide` (when routes are mounted)
|
11
|
-
* SASS variables for the admin theme
|
11
|
+
* [CSS helpers and SASS variables](CSS.md) for the admin theme
|
12
12
|
* GOV.UK user friendly date formats
|
13
13
|
|
14
14
|
## Usage
|
@@ -90,6 +90,20 @@ date.to_s(:govuk_date)
|
|
90
90
|
time.to_s(:govuk_date)
|
91
91
|
```
|
92
92
|
|
93
|
+
### Environment indicators
|
94
|
+
|
95
|
+
The gem includes default styles for development, preview and production. This includes a coloured environment label, a coloured strip beneath the main navigation and a coloured favicon. They are based on two variables that are set at deploy time (if they aren’t set no indicator will be shown).
|
96
|
+
|
97
|
+
The following should be set within an initializer:
|
98
|
+
|
99
|
+
```ruby
|
100
|
+
# used for the classname and favicon
|
101
|
+
GovukAdminTemplate.environment_style = [preview|production|development]
|
102
|
+
|
103
|
+
# used for the human readable label
|
104
|
+
GovukAdminTemplate.environment_label = [Preview|Staging|Production|Development]
|
105
|
+
```
|
106
|
+
|
93
107
|
## Development
|
94
108
|
|
95
109
|
Clone the repository and run `bundle`.
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
File without changes
|
@@ -3,7 +3,7 @@
|
|
3
3
|
========================================================================== */
|
4
4
|
|
5
5
|
.navbar .container .navbar-brand {
|
6
|
-
background: url("/assets/header-crown.png") 0 0.67em no-repeat;
|
6
|
+
background: url("/assets/govuk_admin_template/header-crown.png") 0 0.67em no-repeat;
|
7
7
|
color: #fff;
|
8
8
|
font-family: $font-family-gill-sans;
|
9
9
|
font-size: 20px;
|
@@ -44,3 +44,47 @@
|
|
44
44
|
padding-left: 30px;
|
45
45
|
padding-right: 0;
|
46
46
|
}
|
47
|
+
|
48
|
+
/* Environment indicators
|
49
|
+
========================================================================== */
|
50
|
+
|
51
|
+
.environment-indicator {
|
52
|
+
border-bottom: 5px solid #000;
|
53
|
+
}
|
54
|
+
|
55
|
+
.environment-production .environment-indicator {
|
56
|
+
border-bottom-color: $production-color;
|
57
|
+
}
|
58
|
+
|
59
|
+
.environment-preview .environment-indicator {
|
60
|
+
border-bottom-color: $preview-color;
|
61
|
+
}
|
62
|
+
|
63
|
+
.environment-development .environment-indicator {
|
64
|
+
border-bottom-color: $dev-color;
|
65
|
+
}
|
66
|
+
|
67
|
+
.environment-label {
|
68
|
+
background: #333;
|
69
|
+
padding: 3px 5px;
|
70
|
+
border-radius: 3px;
|
71
|
+
font-weight: bold;
|
72
|
+
margin-top: 13px;
|
73
|
+
margin-right: 10px;
|
74
|
+
float: left;
|
75
|
+
}
|
76
|
+
|
77
|
+
.environment-production .environment-label {
|
78
|
+
background-color: $production-color;
|
79
|
+
color: #fff;
|
80
|
+
}
|
81
|
+
|
82
|
+
.environment-preview .environment-label {
|
83
|
+
background-color: $preview-color;
|
84
|
+
color: #000;
|
85
|
+
}
|
86
|
+
|
87
|
+
.environment-development .environment-label {
|
88
|
+
background-color: $dev-color;
|
89
|
+
color: #000;
|
90
|
+
}
|
@@ -18,3 +18,8 @@ $inverse-button-color : #fff;
|
|
18
18
|
$danger-button-color : #fff;
|
19
19
|
$warning-button-color : #fff;
|
20
20
|
$default-button-color : #333; /* Dark grey */
|
21
|
+
|
22
|
+
// Environments
|
23
|
+
$production-color: #df3034; /* Red */
|
24
|
+
$preview-color: #ffbf47; /* Orange */
|
25
|
+
$dev-color: #bfc1c3; /* Grey */
|
@@ -1,3 +1,7 @@
|
|
1
|
+
<%
|
2
|
+
environment_style = GovukAdminTemplate.environment_style
|
3
|
+
environment_label = GovukAdminTemplate.environment_label
|
4
|
+
%>
|
1
5
|
<!DOCTYPE html>
|
2
6
|
<!--[if lt IE 9]><html class="no-js lte-ie8" lang="en"><![endif]-->
|
3
7
|
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
|
@@ -13,15 +17,22 @@
|
|
13
17
|
<![endif]-->
|
14
18
|
<% # jQuery and Bootstrap %>
|
15
19
|
<%= javascript_include_tag "govuk-admin-template" %>
|
16
|
-
|
20
|
+
<% if content_for?(:favicon) %>
|
21
|
+
<%= yield :favicon %>
|
22
|
+
<% else %>
|
23
|
+
<%= favicon_link_tag environment_style ?
|
24
|
+
"govuk_admin_template/favicon-#{environment_style}.png" : "govuk_admin_template/favicon.png"
|
25
|
+
%>
|
26
|
+
<% end %>
|
17
27
|
<%= yield :head %>
|
18
28
|
</head>
|
19
|
-
<body
|
29
|
+
<body<% if environment_style %> class="environment-<%= environment_style %>"<% end %>>
|
20
30
|
<header class="
|
21
31
|
navbar
|
22
32
|
navbar-default
|
23
33
|
navbar-inverse
|
24
34
|
navbar-static-top
|
35
|
+
<% if environment_style %>environment-indicator<% end %>
|
25
36
|
add-bottom-margin" role="banner">
|
26
37
|
<div class="container">
|
27
38
|
<div class="navbar-header">
|
@@ -33,6 +44,11 @@
|
|
33
44
|
<span class="icon-bar"></span>
|
34
45
|
</a>
|
35
46
|
<%= link_to content_for?(:app_title) ? yield(:app_title) : "GOV.UK", root_path, :class => 'navbar-brand' %>
|
47
|
+
<% if environment_label %>
|
48
|
+
<div class="environment-label">
|
49
|
+
<%= environment_label %>
|
50
|
+
</div>
|
51
|
+
<% end %>
|
36
52
|
</div>
|
37
53
|
<nav role="navigation" class="collapse navbar-collapse">
|
38
54
|
<% if content_for?(:navbar_items) %>
|
data/lib/govuk_admin_template.rb
CHANGED
@@ -2,4 +2,21 @@ require "govuk_admin_template/version"
|
|
2
2
|
require "govuk_admin_template/engine"
|
3
3
|
|
4
4
|
module GovukAdminTemplate
|
5
|
+
mattr_accessor :environment_style, :environment_label
|
6
|
+
|
7
|
+
def self.environment_style
|
8
|
+
@@environment_style || self.default_environment_style
|
9
|
+
end
|
10
|
+
|
11
|
+
def self.environment_label
|
12
|
+
@@environment_label || self.environment_style.try(:titleize)
|
13
|
+
end
|
14
|
+
|
15
|
+
# In development we can't consistently set an environment
|
16
|
+
# variable, so use a default based on Rails.env
|
17
|
+
def self.default_environment_style
|
18
|
+
if Rails.env.development?
|
19
|
+
"development"
|
20
|
+
end
|
21
|
+
end
|
5
22
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: govuk_admin_template
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0
|
4
|
+
version: 0.1.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-06-
|
12
|
+
date: 2014-06-05 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
@@ -156,7 +156,11 @@ files:
|
|
156
156
|
- app/assets/stylesheets/govuk_admin_template/base.css.scss
|
157
157
|
- app/assets/stylesheets/govuk_admin_template/buttons.css.scss
|
158
158
|
- app/assets/stylesheets/govuk_admin_template.scss
|
159
|
-
- app/assets/images/
|
159
|
+
- app/assets/images/govuk_admin_template/favicon-preview.png
|
160
|
+
- app/assets/images/govuk_admin_template/favicon.png
|
161
|
+
- app/assets/images/govuk_admin_template/header-crown.png
|
162
|
+
- app/assets/images/govuk_admin_template/favicon-production.png
|
163
|
+
- app/assets/images/govuk_admin_template/favicon-development.png
|
160
164
|
- app/assets/javascripts/govuk-admin-template/vendor/html5.js
|
161
165
|
- app/assets/javascripts/govuk-admin-template/vendor/respond.min.js
|
162
166
|
- app/assets/javascripts/govuk-admin-template/govuk-admin.js
|
@@ -175,6 +179,7 @@ files:
|
|
175
179
|
- lib/govuk_admin_template/version.rb
|
176
180
|
- lib/govuk_admin_template.rb
|
177
181
|
- JAVASCRIPT.md
|
182
|
+
- CSS.md
|
178
183
|
- CHANGELOG.md
|
179
184
|
- README.md
|
180
185
|
- LICENCE.txt
|
@@ -192,7 +197,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
192
197
|
version: '0'
|
193
198
|
segments:
|
194
199
|
- 0
|
195
|
-
hash: -
|
200
|
+
hash: -4107083059303013324
|
196
201
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
197
202
|
none: false
|
198
203
|
requirements:
|
@@ -201,7 +206,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
201
206
|
version: '0'
|
202
207
|
segments:
|
203
208
|
- 0
|
204
|
-
hash: -
|
209
|
+
hash: -4107083059303013324
|
205
210
|
requirements: []
|
206
211
|
rubyforge_project:
|
207
212
|
rubygems_version: 1.8.23
|