darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-24 16:24:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use a Node-based tools for handling assets

Browse Source 
…or how to move a bunch of things from a bunch of different places into
`app/static`.

There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
  and meant depending on Ruby, and having the SASS Gem globally installed—so
  you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
  ironed out the initial rough patches

The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
  GOV.UK template as a proper dependency

…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.

Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
This commit is contained in:
Chris Hill-Scott
2015-12-15 08:20:25 +00:00
parent 1fd6ce9fe4
commit 5ebeec08ae
77 changed files with 286 additions and 12415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/app.scss
View File

@@ -56,4 +56,4 @@
a:visited {
color: #005ea5;
}
}

1
app/assets/stylesheets/govuk_elements

Submodule app/assets/stylesheets/govuk_elements deleted from 9e44a8d74c

1
app/assets/stylesheets/govuk_frontend_toolkit

Submodule app/assets/stylesheets/govuk_frontend_toolkit deleted from 26b6a60d07

101
app/assets/stylesheets/govuk_template/_accessibility.scss
View File

@@ -1,101 +0,0 @@
/* For image replacement */
.ir {
display: block;
text-indent: -999em;
overflow: hidden;
background-repeat: no-repeat;
text-align: left;
direction: ltr;
br {
display: none;
}
}
/* Hide for both screenreaders and browsers */
.hidden {
display: none;
visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders */
.visually-hidden,
.visuallyhidden {
position: absolute;
left: -9999em;
/*
* Extends the .visuallyhidden class to allow the element to be
* focusable when navigated to via the keyboard
*/
&.focusable:active,
&.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
visibility: hidden;
}
/* Give a strong clear visual idea as to what is currently in focus */
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}
a:focus {
background-color: $focus-colour;
outline: 3px solid $focus-colour;
}
/* Make skiplinks visible when they are tabbed to */
.skiplink {
position: absolute;
left: -9999em;
}
.skiplink:focus {
position: static;
}
#skiplink-container {
text-align: center;
background: $black;
div {
text-align: left;
margin: 0 auto;
max-width: 1020px;
}
.skiplink {
@include inline-block;
margin: 0.75em 0 0 30px;
}
}
input:focus,
textarea:focus,
select:focus,
button:focus,
#global-header input:focus {
outline: 3px solid $focus-colour;
}
#global-header {
h1 a:focus {
background-color: transparent;
outline: none;
}
a:focus {
color: $black;
}
}

173
app/assets/stylesheets/govuk_template/_basic.scss
View File

@@ -1,173 +0,0 @@
html, body, button, input, table, td, th { font-family: $NTA-Light; }
// basic styles for HTML5 and other elements
html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
margin: 0;
padding: 0;
vertical-align: baseline;
}
// HTML5 display definition
main {
display: block;
}
// self clearing floats
.group:before,
.group:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
// make elements stick at top of viewport when scrolling
.content-fixed {
top: 0;
position: fixed;
}
.shim {
display: block;
}
/*
* 1. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-webkit-text-size-adjust: 100%; /* 1 */
-ms-text-size-adjust: 100%; /* 1 */
// Set background colour to match footer background
background-color: $grey-8;
}
/*
Force the scrollbar to always display in IE10/11
*/
html {
-ms-overflow-style: scrollbar;
}
body {
background: $white;
color: $text-colour;
line-height: 1.5;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ol, ul, nav ol, nav ul {
list-style: inherit;
}
fieldset {
border: none;
padding: 0;
}
a:link {
color: $link-colour;
}
a:visited {
color: $link-visited-colour;
}
a:hover {
color: $link-hover-colour;
}
a:active {
color: $link-active-colour;
}
a[rel="external"] {
@include external-link-default;
@include external-link-19;
@include media-down(mobile) {
@include external-link-16;
}
}
.external-link {
@include external-link-12-no-hover;
@include external-link-heading;
}
// adjustments to normalize.css
/*
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
* http://clagnut.com/blog/348/#c790
* note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
* http://snook.ca/archives/html_and_css/font-size-with-rem
* 2. Keeps page centred in all browsers regardless of content height
* 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
* www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
*/
html {
font-size: 62.5%; /* 1 */
overflow-y: scroll; /* 2 */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
}
/*
* 1. Font-size increased to compensate for change to html element font-size in
* order to support beta typography which was set in ems
* (62.5% * 160% = 100%)
* 2. Addresses margins handled incorrectly in IE6/7
*/
body {
font-size: 160%; /* 1 */
margin: 0; /* 2 */
}
b,
strong {
font-weight: 600;
}
img {
border: 0;
}
@include ie-lte(7) {
button {
overflow:visible;
}
}
abbr[title] {
cursor: help;
}
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
margin-right: 2px;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

88
app/assets/stylesheets/govuk_template/_core-print.scss
View File

@@ -1,88 +0,0 @@
/* Global print stylesheet */
/* reset everything */
* {
background: transparent;
color: black;
text-shadow: none;
filter:none;
-ms-filter: none;
}
body {
@include core-14;
margin: 0;
padding: 0;
width: 100%;
}
a, a:visited {
word-wrap: break-word;
}
a[href^="/"]:after {
content: " (https://www.gov.uk" attr(href) ")";
font-size: 90%;
}
a[href^="http://"]:after,
a[href^="https://"]:after {
content: " (" attr(href) ")";
font-size: 90%;
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
img { max-width: 100% !important; }
select { background: white; }
#global-header {
color: #000;
font-weight: bold;
font-size: 24px;
margin-bottom: 1em;
#logo {
@include core-48;
font-size: 28pt;
font-weight: bold;
text-rendering: optimizeLegibility;
img {
width: 46px;
height: 40px;
padding-right: 6px;
display: block;
float: left;
}
}
.content {
margin: 0!important;
}
a, a:visited {
text-decoration: none;
}
a:after {
content: "";
}
img {
border: 0;
vertical-align: middle;
}
}
/* hide the unnecessary page elements */
body footer,
.visuallyhidden,
#global-cookie-message,
#skiplink-container {
display: none !important;
}

179
app/assets/stylesheets/govuk_template/_footer.scss
View File

@@ -1,179 +0,0 @@
/* Global footer */
#footer {
background-color: $grey-8;
border-top: 1px solid $grey-6;
.footer-wrapper {
@include outer-block;
padding-top: 20px;
@include media(tablet) {
padding-top: 60px;
}
background-color: $grey-8;
margin: 0 auto;
}
a {
color: $grey-3;
&:hover {
color: $grey-1;
}
}
h2 {
@include core-24;
font-weight: bold;
color: $grey-1;
margin: 0;
a {
color: inherit;
}
}
.footer-meta {
@include inner-block;
@extend %contain-floats;
padding-bottom: 60px;
clear: both;
font-size: 0;
color: $grey-3;
.footer-meta-inner {
display: inline-block;
vertical-align: bottom;
width: 100%;
@include media(tablet) {
width: 75%;
}
@include ie-lte(7) {
float: left;
display: block;
}
ul {
@include core-16($line-height: (24/16), $line-height-640: (24/16));
display: inline-block;
list-style: none;
margin: 0 0 1.5em 0;
padding: 0;
@include media(tablet) {
margin: 0 0 1em 0;
}
li {
display: inline-block;
margin: 0 15px 0 0;
@include ie-lte(7) {
display: inline;
margin-right: 0;
padding-right: 15px;
}
}
}
.open-government-licence {
clear: left;
position: relative;
@include media(tablet) {
padding-left: 53px;
}
@include ie(6) {
zoom: 1;
}
.logo {
margin-bottom: 1em;
padding-top: 0;
@include media(tablet) {
position: absolute;
left: 0;
top: 0;
width: 41px;
height: 100%;
}
a {
display: block;
width: 41px;
height: 17px;
overflow:hidden;
text-indent: -999em;
background: image-url("/static/images/open-government-licence.png") 0 0 no-repeat;
@include device-pixel-ratio() {
background-image: image-url("/static/images/open-government-licence_2x.png");
background-size: 41px 17px;
}
}
}
p {
@include core-16;
margin: 0;
padding-top: 0.1em;
}
}
}
.copyright {
@include core-16;
margin: 30px 0 0 0;
width: 100%;
display: block;
@include media(tablet) {
display: inline-block;
text-align: inherit;
width: 25%;
padding-top: 15px;
margin-top: 0;
}
@include ie-lte(7) {
float: right;
height: 150px;
width: 24%;
}
a {
display: block;
background-image: url("/static/images/govuk-crest.png");
background-repeat: no-repeat;
background-position: 50% 0%;
@include media(tablet) {
background-position: 100% 0%;
}
@include device-pixel-ratio() {
background-image: url("/static/images/govuk-crest-2x.png");
background-size: 125px 102px;
}
@include ie(6) {
background-image: image-url("/static/images/govuk-crest-ie.png");
}
text-align: center;
text-decoration: none;
@include media(tablet) {
text-align: right;
}
padding: 115px 0 0 0;
}
}
}
}

273
app/assets/stylesheets/govuk_template/_header.scss
View File

@@ -1,273 +0,0 @@
/* @import '_shims'; */
/* @import '_conditionals'; */
/* @import '_measurements'; */
#global-header {
background-color: $black;
width: 100%;
.header-wrapper {
background-color: $black;
max-width: 990px;
margin: 0 auto;
padding-top: 8px;
padding-bottom: 8px;
@extend %contain-floats;
@include media(tablet){
padding-left: $gutter-half;
padding-right: $gutter-half;
}
@include ie-lte(8) {
width: 990px;
}
.header-global {
@extend %contain-floats;
.header-logo {
@extend %contain-floats;
float: left;
@include media(desktop){
width: 33.33%;
}
@media screen and (max-width: 379px) {
width: auto;
float: none;
}
.content {
margin: 0 15px;
}
}
.header-logo {
margin: 5px 0 2px;
}
}
}
&.with-proposition {
.header-wrapper {
.header-global {
@include media(desktop){
float: left;
width: 33.33%;
.header-logo,
.site-search {
width: 100%;
}
}
}
.header-proposition {
@include media(desktop){
width: 66.66%;
float: left;
}
.content {
margin: 0 15px;
}
}
}
}
#logo {
float: left;
position: relative;
top: -1px;
height: 30px;
overflow: visible;
vertical-align: baseline;
color: $white;
font-weight: bold;
font-size: 30px;
line-height: 1em;
text-decoration: none;
text-rendering: optimizeLegibility;
margin-bottom: -3px;
padding-top: 2px;
border-bottom: 1px solid transparent;
background: image-url('/static/images/gov.uk_logotype_crown.png') no-repeat;
background-size: 35px 31px;
background-position: 0 0;
@include ie-lte(8) {
background-image: image-url('/static/images/gov.uk_logotype_crown-1x.png');
}
img {
position: relative;
top: -2px;
width: 35px;
height: 31px;
padding-right: 6px;
float: left;
display: inline;
line-height: inherit;
border: none;
/* visibility: hidden; */
}
&:hover,
&:focus {
text-decoration: none;
border-bottom-color: $white;
}
&:active {
color: $light-blue;
}
}
.header-proposition {
padding-top: 10px;
@include media(desktop){
padding-top: 0;
}
#proposition-name {
@include core-24;
font-weight: bold;
color: $white;
text-decoration: none;
}
a#proposition-name:hover {
text-decoration: underline;
}
a.menu {
@include core-16;
color: $white;
display: block;
float: right;
text-decoration: none;
padding-top: 6px;
@include media(desktop){
display: none;
}
&:hover {
text-decoration: underline;
}
&:after {
display: inline-block;
font-size: 8px;
height: 8px;
padding-left: 5px;
vertical-align: middle;
content: " \25BC";
}
&.js-hidden:after {
content: " \25B2";
}
}
#proposition-menu {
margin-top: 5px;
// Some headers (Whitehall) don't have a propsition name, offset as if they did.
&.no-proposition-name {
@include media(desktop){
margin-top: 37px;
// 37px is the amount of margin required to line up the nav list with the top of the search box
}
}
}
#proposition-link,
#proposition-links {
clear: both;
@extend %contain-floats;
margin: 2px 0 0 0;
padding: 0;
.js-enabled & {
display: none;
@include media(desktop){
display: block;
}
&.js-visible {
display: block;
}
}
li {
float: left;
width: 50%;
padding: 3px 0;
border-bottom: 1px solid $grey-2;
@include media(desktop){
display: block;
width: auto;
padding: 0 15px 0 0;
border-bottom: 0;
&.clear-child {
clear: left;
}
}
}
a {
color: $white;
text-decoration: none;
@include bold-14;
@include media(desktop) {
@include bold-16;
line-height: 23px;
}
&:hover {
text-decoration: underline;
}
&.active {
color: $proposition-active-nav;
}
&:focus {
color: $black;
}
}
}
#proposition-link {
float: right;
line-height: 22px;
.js-enabled & {
display:block;
}
@include media(desktop) {
float:none;
}
}
}
}
/* Global header bar */
#global-header-bar {
@extend %site-width-container;
height: 10px;
background-color: $govuk-blue;
@include ie-lte(8) {
font-size: 0;
}
}
/* Global cookie message */
.js-enabled #global-cookie-message {
display: none; /* shown with JS, always on for non-JS */
}
#global-cookie-message {
width: 100%;
background-color: $light-blue-25;
padding-top: 10px;
padding-bottom: 10px;
p {
@extend %site-width-container;
@include core-16;
margin-top: 0;
margin-bottom: 0;
}
}

4
app/assets/stylesheets/govuk_template/govuk-template-ie7.scss
View File

@@ -1,4 +0,0 @@
$is-ie: true;
$ie-version: 7;
@import "govuk-template";

4
app/assets/stylesheets/govuk_template/govuk-template-ie8.scss
View File

@@ -1,4 +0,0 @@
$is-ie: true;
$ie-version: 8;
@import "govuk-template";

18
app/assets/stylesheets/govuk_template/govuk-template-print.scss
View File

@@ -1,18 +0,0 @@
// PRINT STYLESHEET COMPILER
// STYLEGUIDE
// Mixins to be shared across gov.uk sites. Anything set in these
// files can be used in the view files.
$is-print: true;
@import "styleguide/print";
@import "govuk_frontend_toolkit/stylesheets/typography";
// OUTPUT
// The following files and inline CSS will form the output of print.css
html {
font-size: 62.5%;
}
@import "core-print";

18
app/assets/stylesheets/govuk_template/govuk-template.scss
View File

@@ -1,18 +0,0 @@
/* govuk_frontend_toolkit includes */
@import "../govuk_frontend_toolkit/stylesheets/colours";
@import "../govuk_frontend_toolkit/stylesheets/conditionals";
@import "../govuk_frontend_toolkit/stylesheets/css3";
@import "../govuk_frontend_toolkit/stylesheets/device-pixels";
@import "../govuk_frontend_toolkit/stylesheets/typography";
@import "../govuk_frontend_toolkit/stylesheets/grid_layout";
@import "../govuk_frontend_toolkit/stylesheets/design-patterns/_buttons";
/* local styleguide includes */
@import "styleguide/colours";
@import "styleguide/conditionals2";
// basic styles for HTML5 and other elements
@import "basic";
@import "accessibility";
@import "header";
@import "footer";

16
app/assets/stylesheets/govuk_template/styleguide/_colours.scss
View File

@@ -1,16 +0,0 @@
// Based on GOV.UK brand blue but slightly lighter so it hits contrast on the
// black header bar when used as copy colour.
$proposition-active-nav: #1d8feb;
/* Old depricated greys, new things should use the toolkit greys */
$grey-0: #0b0c0c;
$grey-1: #171819;
$grey-2: #2e3133;
$grey-3: #454a4c;
$grey-4: #5c6366;
$grey-5: #8a9499;
$grey-6: #a1acb2;
$grey-7: #b8c6cc;
$grey-8: #DEE0E2;
$grey-9: #eaedef;

21
app/assets/stylesheets/govuk_template/styleguide/_conditionals2.scss
View File

@@ -1,21 +0,0 @@
// Media query helpers. These make producing IE layouts
// super easy.
// These are desktop and down media queries
$is-ie: false !default;
@mixin media-down($size: false, $max-width: false, $min-width: false) {
@if $is-ie == false {
@if $size == mobile {
@media (max-width: 640px){
@content;
}
} @else if $size == tablet {
@media (max-width: 800px){
@content;
}
}
}
}

24
app/assets/stylesheets/govuk_template/styleguide/_print.scss
View File

@@ -1,24 +0,0 @@
// Print helpers. These make producing print layouts
// super easy.
// The base css you write should be for screen. You can
// then add print styles on top.
//
// Usage:
//
// table th {
// border: 1px solid;
// background-color: #ddd;
//
// @include print{
// background-color: white;
// }
// }
$is-print: false !default;
@mixin print {
@if $is-print {
@content;
}
}

2
app/assets/stylesheets/govuk_template/govuk-template-ie6.scss → app/assets/stylesheets/main-ie6.scss
View File

@@ -2,4 +2,4 @@ $is-ie: true;
$ie-version: 6;
$mobile-ie6: false;
@import "govuk-template";
@import 'main';

5
app/assets/stylesheets/main-ie7.scss Normal file
View File

@@ -0,0 +1,5 @@
$is-ie: true;
$ie-version: 7;
$mobile-ie6: false;
@import 'main';

5
app/assets/stylesheets/main-ie8.scss Normal file
View File

@@ -0,0 +1,5 @@
$is-ie: true;
$ie-version: 8;
$mobile-ie6: false;
@import 'main';

66
app/assets/stylesheets/main.scss
View File

@@ -1,39 +1,39 @@
// Edited version of govuk_frontend_toolkit
// Dependencies from GOV.UK Frontend Toolkit
// https://github.com/alphagov/govuk_frontend_toolkit/
@import "govuk_frontend_toolkit/stylesheets/conditionals";
@import "govuk_frontend_toolkit/stylesheets/shims";
@import "govuk_frontend_toolkit/stylesheets/measurements";
@import "govuk_frontend_toolkit/stylesheets/css3";
@import "govuk_frontend_toolkit/stylesheets/colours";
@import "govuk_frontend_toolkit/stylesheets/typography";
@import "govuk_frontend_toolkit/stylesheets/grid_layout";
@import "govuk_frontend_toolkit/stylesheets/helpers";
@import "govuk_frontend_toolkit/stylesheets/url-helpers";
@import "govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
@import "govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
@import '../govuk_frontend_toolkit/stylesheets/conditionals';
@import '../govuk_frontend_toolkit/stylesheets/shims';
@import '../govuk_frontend_toolkit/stylesheets/measurements';
@import '../govuk_frontend_toolkit/stylesheets/css3';
@import '../govuk_frontend_toolkit/stylesheets/colours';
@import '../govuk_frontend_toolkit/stylesheets/typography';
@import '../govuk_frontend_toolkit/stylesheets/grid_layout';
@import '../govuk_frontend_toolkit/stylesheets/helpers';
@import '../govuk_frontend_toolkit/stylesheets/url-helpers';
@import '../govuk_frontend_toolkit/stylesheets/design-patterns/buttons';
@import '../govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta';
// Edited version of govuk_elements repo
// Dependencies from GOV.UK Elements
// https://github.com/alphagov/govuk_elements
@import "govuk_elements/public/sass/elements/helpers";
@import "govuk_elements/public/sass/elements/reset";
@import "govuk_elements/public/sass/elements/buttons";
@import "govuk_elements/public/sass/elements/details";
@import "govuk_elements/public/sass/elements/elements-typography";
@import "govuk_elements/public/sass/elements/forms";
@import "govuk_elements/public/sass/elements/forms/form-block-labels";
@import "govuk_elements/public/sass/elements/icons";
@import "govuk_elements/public/sass/elements/layout";
@import "govuk_elements/public/sass/elements/lists";
@import "govuk_elements/public/sass/elements/panels";
@import "govuk_elements/public/sass/elements/tables";
@import '../govuk_elements/public/sass/elements/helpers';
@import '../govuk_elements/public/sass/elements/reset';
@import '../govuk_elements/public/sass/elements/buttons';
@import '../govuk_elements/public/sass/elements/details';
@import '../govuk_elements/public/sass/elements/elements-typography';
@import '../govuk_elements/public/sass/elements/forms';
@import '../govuk_elements/public/sass/elements/forms/form-block-labels';
@import '../govuk_elements/public/sass/elements/icons';
@import '../govuk_elements/public/sass/elements/layout';
@import '../govuk_elements/public/sass/elements/lists';
@import '../govuk_elements/public/sass/elements/panels';
@import '../govuk_elements/public/sass/elements/tables';
// Extra CSS for this application
@import "components/template-picker";
@import "components/placeholder";
@import "components/sms-message";
@import "components/submit-form";
@import "components/table";
@import "components/navigation";
// Specific to this application
@import 'components/template-picker';
@import 'components/placeholder';
@import 'components/sms-message';
@import 'components/submit-form';
@import 'components/table';
@import 'components/navigation';
// TODO: break this up
@import "app";
@import 'app';