Use a Node-based tools for handling assets

…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

View File

@@ -1,142 +0,0 @@
{%- from "components/form-field.html" import render_field %}
{% block top_of_page %}{% endblock %}
<!DOCTYPE html>
<!--[if lt IE 9]><html class="lte-ie8" lang="{{ html_lang|default('en') }}"><![endif]-->
<!--[if gt IE 8]><!--><html lang="{{ html_lang|default('en') }}"><!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>{% block page_title %}GOV.UK - The best place to find government services and information{% endblock %}</title>
<script type="text/javascript">
(function(){if(navigator.userAgent.match(/IEMobile\/10\.0/)){var d=document,c="appendChild",a=d.createElement("style");a[c](d.createTextNode("@-ms-viewport{width:auto!important}"));d.getElementsByTagName("head")[0][c](a);}})();
</script>
{% assets "css_govuk-template" %}
<!--[if gt IE 8]><!--><link href="{{ ASSET_URL }}" media="screen" rel="stylesheet" type="text/css" /><!--<![endif]-->
{% endassets %}
{% assets "css_govuk-template-ie6" %}
<!--[if IE 6]><link href="{{ ASSET_URL }}" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
{% endassets %}
{% assets "css_govuk-template-ie7" %}
<!--[if IE 7]><link href="{{ ASSET_URL }}" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
{% endassets %}
{% assets "css_govuk-template-ie8" %}
<!--[if IE 8]><link href="{{ ASSET_URL }}" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
{% endassets %}
{% assets "css_govuk-template" %}
<link href="{{ ASSET_URL }}" media="print" rel="stylesheet" type="text/css" />
{% endassets %}
<!--[if IE 8]>
<script type="text/javascript">
(function(){if(window.opera){return;}
setTimeout(function(){var a=document,g,b={families:(g=
["nta"]),urls:["/static/stylesheets/fonts-ie8.css?0.16.0"]},
c="/static/javascripts/vendor/goog/webfont-debug.js?0.16.0",d="script",
e=a.createElement(d),f=a.getElementsByTagName(d)[0],h=g.length;WebFontConfig
={custom:b},e.src=c,f.parentNode.insertBefore(e,f);for(;h=h-1;a.documentElement
.className+=' wf-'+g[h].replace(/\s/g,'').toLowerCase()+'-n4-loading');},0)
})()
</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<link href="/static/stylesheets/fonts.css?0.16.0" media="all" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="/static/javascripts/ie.js?0.16.0" type="text/javascript"></script>
<![endif]-->
<link rel="shortcut icon" href="/static/images/favicon.ico?0.16.0" type="image/x-icon" />
<!-- Size for iPad and iPad mini (high resolution) -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/static/images/apple-touch-icon-152x152.png?0.16.0">
<!-- Size for iPhone and iPod touch (high resolution) -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/static/images/apple-touch-icon-120x120.png?0.16.0">
<!-- Size for iPad 2 and iPad mini (standard resolution) -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/static/images/apple-touch-icon-76x76.png?0.16.0">
<!-- Default non-defined size, also used for Android 2.1+ devices -->
<link rel="apple-touch-icon-precomposed" href="/static/images/apple-touch-icon-60x60.png?0.16.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="/static/images/opengraph-image.png?0.16.0">
{% block head %}{% endblock %}
</head>
<body class="{% block body_classes %}{% endblock %}">
<script type="text/javascript">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
{% block body_start %}{% endblock %}
<div id="skiplink-container">
<div>
<a href="#content" class="skiplink">{{ skip_link_message|default('Skip to main content') }}</a>
</div>
</div>
<div id="global-cookie-message">
{% block cookie_message %}{% endblock %}
</div>
<!--end global-cookie-message-->
<header role="banner" id="global-header" class="{% block header_class %}{% endblock %}">
<div class="header-wrapper">
<div class="header-global">
<div class="header-logo">
<a href="{{ homepage_url|default('https://www.gov.uk') }}" title="{{ logo_link_title|default('Go to the GOV.UK homepage') }}" id="logo" class="content">
<img src="/static/images/gov.uk_logotype_crown.png?0.16.1" width="35" height="31" alt=""> {{ global_header_text|default('GOV.UK') }}
</a>
</div>
{% block inside_header %}{% endblock %}
</div>
{% block proposition_header %}{% endblock %}
</div>
</header>
<!--end header-->
{% block after_header %}{% endblock %}
<div id="global-header-bar"></div>
<!--end global-header-bar-->
<main id="content" role="main" class="page-container">
{% block content %}{% endblock %}
</main>
<footer class="group js-footer" id="footer" role="contentinfo">
<div class="footer-wrapper">
{% block footer_top %}{% endblock %}
<div class="footer-meta">
<div class="footer-meta-inner">
{% block footer_support_links %}{% endblock %}
<div class="open-government-licence">
<p class="logo"><a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a></p>
{% block licence_message %}<p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>{% endblock %}
</div>
</div>
<div class="copyright">
<a href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">{{ crown_copyright_message|default('&copy; Crown copyright')|safe }}</a>
</div>
</div>
</div>
</footer>
<!--end footer-->
<div id="global-app-error" class="app-error hidden"></div>
<script src="/static/javascripts/govuk-template.js?0.16.0" type="text/javascript"></script>
{% block body_end %}{% endblock %}
</body>
</html>