govuk_admin_template 0.0.7 → 0.1.0

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 0.1.0
+
+* Environment indicators
+* Apps upgrading will need to change how they use favicons
+
 # 0.0.7
 
 * Fix visited link styles on bootstrap components

data/CSS.md

@@ -0,0 +1,81 @@
+# Admin CSS
+
+CSS in the gem follows two conventions:
+* Naming patterns and class usage inline with Bootstrap 3
+  * eg the `text-muted` class and the gem specific `link-muted` class
+  * Using multiple classes in combination, eg `table table-bordered table-hover`
+* [Principles of writing consistent, idiomatic CSS](https://github.com/necolas/idiomatic-css)
+
+## Available helper classes
+
+Firstly, the admin styles are based on Bootstrap:
+* [Bootstrap CSS](http://getbootstrap.com/css/)
+* [Bootstrap Components](http://getbootstrap.com/components/)
+
+For admin components, see the admin style guide (`/style-guide` in your app).
+
+### Hide and show content
+[toggle.css.scss](app/assets/stylesheets/govuk_admin_template/toggles.css.scss)
+
+Class   | Purpose
+------  |--------
+`hide` | Hide content from all users, including screenreaders
+`if-no-js-hide` | Hide from users without Javascript
+`if-js-hide` | Hide from users with Javascript
+`rm` | [Hide visually](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility) but keep available to screenreaders
+`if-js-rm` | Hide visually from users with Javascript
+
+### Margin helpers
+
+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)
+
+Class   | Purpose
+------  |--------
+`add-top-margin` | Add _default vertical margin_ to top of element
+`add-bottom-margin` | Add _default vertical margin_ to bottom of element
+`add-label-margin` | Simulates the vertical spacing between a Bootstrap label and an input element (5px)
+`add-vertical-margins` | Add _default vertical margin_ to top and bottom
+`remove-top-margin` | Remove all margins from top of element
+`remove-bottom-margin` | Remove all margins from bottom of element
+`add-right-margin` | Add margin to the right of element
+`add-left-margin` | Add margin to the left of element
+
+### Padding helpers
+
+Class   | Purpose
+------  |--------
+`remove-padding` | Remove all padding from element
+`remove-top-padding` | Remove top padding
+`remove-bottom-padding` | Remove bottom padding
+
+### Icon helpers
+
+Class   | Purpose
+------  |--------
+`glyphicon-smaller-than-text` | Bootstrap 3 glyphicons look unnaturally large against the same sized text. This class knocks them down to a friendlier size.
+
+### Link helpers
+
+Class   | Purpose
+------  |--------
+`no-visit` | Prevent a link from showing a visited state (eg when used as a Javascript hook)
+`link-muted` | Like Bootstrap’s `text-muted`, but for links. Makes them a matching grey and underlined.
+`link-inherit` | Inherits its colour from surrounding text, gains an underline
+
+### Tables
+[tables.css.scss](app/assets/stylesheets/govuk_admin_template/tables.css.scss)
+
+Class   | Purpose
+------  |--------
+`table-header` | Add to rows in `<thead>` to give table headings greater contrast
+`table-header-secondary` | Again in `<thead>`, for less important header rows. Uses a lighter grey.
+
+### SASS Variables
+
+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).
+
+Class   | Purpose
+------  |--------
+`$font-family-gill-sans` | Gill Sans font stack
+`$default-vertical-margin` | Based on Bootstrap’s `$line-height-computed`. Use increments of this value.
+`$link-color-visited` | Like Bootstrap’s `$link-color`, the purple visited link colour.

data/README.md

@@ -8,7 +8,7 @@ This gem provides (via a Rails engine):
 * An admin layout with header and footer
 * A [lightweight javascript framework](JAVASCRIPT.md)
 * Admin design patterns available from `/style-guide` (when routes are mounted)
-* SASS variables for the admin theme
+* [CSS helpers and SASS variables](CSS.md) for the admin theme
 * GOV.UK user friendly date formats
 
 ## Usage
@@ -90,6 +90,20 @@ date.to_s(:govuk_date)
 time.to_s(:govuk_date)
 ```
 
+### Environment indicators
+
+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).
+
+The following should be set within an initializer:
+
+```ruby
+# used for the classname and favicon
+GovukAdminTemplate.environment_style = [preview|production|development]
+
+# used for the human readable label
+GovukAdminTemplate.environment_label = [Preview|Staging|Production|Development]
+```
+
 ## Development
 
 Clone the repository and run `bundle`.

data/app/assets/stylesheets/govuk_admin_template/base.css.scss

@@ -117,6 +117,10 @@ a.inherit:visited,
   padding: 0 !important;
 }
 
+.remove-top-padding {
+  padding-top: 0 !important;
+}
+
 .remove-bottom-padding {
   padding-bottom: 0 !important;
 }

data/app/assets/stylesheets/govuk_admin_template/navbar.css.scss

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 .navbar .container .navbar-brand {
-  background: url("/assets/header-crown.png") 0 0.67em no-repeat;
+  background: url("/assets/govuk_admin_template/header-crown.png") 0 0.67em no-repeat;
   color: #fff;
   font-family: $font-family-gill-sans;
   font-size: 20px;
@@ -44,3 +44,47 @@
   padding-left: 30px;
   padding-right: 0;
 }
+
+/* Environment indicators
+   ========================================================================== */
+
+.environment-indicator {
+  border-bottom: 5px solid #000;
+}
+
+.environment-production .environment-indicator {
+  border-bottom-color: $production-color;
+}
+
+.environment-preview .environment-indicator {
+  border-bottom-color: $preview-color;
+}
+
+.environment-development .environment-indicator {
+  border-bottom-color: $dev-color;
+}
+
+.environment-label {
+  background: #333;
+  padding: 3px 5px;
+  border-radius: 3px;
+  font-weight: bold;
+  margin-top: 13px;
+  margin-right: 10px;
+  float: left;
+}
+
+.environment-production .environment-label {
+  background-color: $production-color;
+  color: #fff;
+}
+
+.environment-preview .environment-label {
+  background-color: $preview-color;
+  color: #000;
+}
+
+.environment-development .environment-label {
+  background-color: $dev-color;
+  color: #000;
+}

data/app/assets/stylesheets/govuk_admin_template/theme.css.scss

@@ -18,3 +18,8 @@ $inverse-button-color     : #fff;
 $danger-button-color      : #fff;
 $warning-button-color     : #fff;
 $default-button-color     : #333; /* Dark grey */
+
+// Environments
+$production-color: #df3034; /* Red */
+$preview-color:    #ffbf47; /* Orange */
+$dev-color:        #bfc1c3; /* Grey */

data/app/views/layouts/govuk_admin_template.html.erb

@@ -1,3 +1,7 @@
+<%
+  environment_style = GovukAdminTemplate.environment_style
+  environment_label = GovukAdminTemplate.environment_label
+%>
 <!DOCTYPE html>
 <!--[if lt IE 9]><html class="no-js lte-ie8" lang="en"><![endif]-->
 <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
@@ -13,15 +17,22 @@
     <![endif]-->
     <% # jQuery and Bootstrap %>
     <%= javascript_include_tag "govuk-admin-template" %>
-
+    <% if content_for?(:favicon) %>
+      <%= yield :favicon %>
+    <% else %>
+      <%= favicon_link_tag environment_style ?
+        "govuk_admin_template/favicon-#{environment_style}.png" : "govuk_admin_template/favicon.png"
+      %>
+    <% end %>
     <%= yield :head %>
   </head>
-  <body>
+  <body<% if environment_style %> class="environment-<%= environment_style %>"<% end %>>
     <header class="
       navbar
       navbar-default
       navbar-inverse
       navbar-static-top
+      <% if environment_style %>environment-indicator<% end %>
       add-bottom-margin" role="banner">
       <div class="container">
         <div class="navbar-header">
@@ -33,6 +44,11 @@
             <span class="icon-bar"></span>
           </a>
           <%= link_to content_for?(:app_title) ? yield(:app_title) : "GOV.UK", root_path, :class => 'navbar-brand' %>
+          <% if environment_label %>
+            <div class="environment-label">
+              <%= environment_label %>
+            </div>
+          <% end %>
         </div>
         <nav role="navigation" class="collapse navbar-collapse">
           <% if content_for?(:navbar_items) %>

data/lib/govuk_admin_template/version.rb

@@ -1,3 +1,3 @@
 module GovukAdminTemplate
-  VERSION = "0.0.7"
+  VERSION = "0.1.0"
 end

data/lib/govuk_admin_template.rb

@@ -2,4 +2,21 @@ require "govuk_admin_template/version"
 require "govuk_admin_template/engine"
 
 module GovukAdminTemplate
+  mattr_accessor :environment_style, :environment_label
+
+  def self.environment_style
+    @@environment_style || self.default_environment_style
+  end
+
+  def self.environment_label
+    @@environment_label || self.environment_style.try(:titleize)
+  end
+
+  # In development we can't consistently set an environment
+  # variable, so use a default based on Rails.env
+  def self.default_environment_style
+    if Rails.env.development?
+      "development"
+    end
+  end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_admin_template
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-03 00:00:00.000000000 Z
+date: 2014-06-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -156,7 +156,11 @@ files:
 - app/assets/stylesheets/govuk_admin_template/base.css.scss
 - app/assets/stylesheets/govuk_admin_template/buttons.css.scss
 - app/assets/stylesheets/govuk_admin_template.scss
-- app/assets/images/header-crown.png
+- app/assets/images/govuk_admin_template/favicon-preview.png
+- app/assets/images/govuk_admin_template/favicon.png
+- app/assets/images/govuk_admin_template/header-crown.png
+- app/assets/images/govuk_admin_template/favicon-production.png
+- app/assets/images/govuk_admin_template/favicon-development.png
 - app/assets/javascripts/govuk-admin-template/vendor/html5.js
 - app/assets/javascripts/govuk-admin-template/vendor/respond.min.js
 - app/assets/javascripts/govuk-admin-template/govuk-admin.js
@@ -175,6 +179,7 @@ files:
 - lib/govuk_admin_template/version.rb
 - lib/govuk_admin_template.rb
 - JAVASCRIPT.md
+- CSS.md
 - CHANGELOG.md
 - README.md
 - LICENCE.txt
@@ -192,7 +197,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1043402677546777694
+      hash: -4107083059303013324
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -201,7 +206,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1043402677546777694
+      hash: -4107083059303013324
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23