Index view content...
\n{% endblock %}\n```\n\nWhere `app/layouts/app.j2` is a template located in `templates/layouts/app.j2` which extends a layout provided by these\ntemplates:\n\n```jinja2\n{% exnteds 'bas_style_kit/layouts/bsk_standard.j2' %}\n```\n\n### Using a page pattern\n\nTo create a page in an application based on a [page pattern](#page-patterns), such as the \n[page not found](https://style-kit.web.bas.ac.uk/patterns/page-not-found/) pattern, create a template (e.g. \n`templates/errors/404.j2`) with the following:\n\n```jinja2\n{% extends 'bas_style_kit/patterns/bsk_page-not-found.j2' %}\n```\n\nTo use this template as the 404 error handler in a Flask application:\n\n```python\n@app.errorhandler(404)\ndef page_not_found(e):\n # note that we set the 404 status explicitly\n return render_template('app/errors/404.j2'), 404\n\n```\n\n### Using custom CSS/JS\n\nNon-Style Kit CSS an/or JavaScript resources can be included either as references to files, or as inline content.\n\n**Note:** This won't work if you are using the [Blank layout](#layouts).\n\n* CSS resources are outputted in the [styles block](#blocks), at the end of the `` element\n* JS resources are outputted in the [scripts block](#blocks), at the end of the `` element\n\n#### Using custom CSS/JS files\n\n* CSS files are added as a resource object to the `site_styles` property of the `BskTemplates` class instance\n* JS files are added as a resource object to the `site_scripts` property of the `BskTemplates` class instance\n\nFiles will be included after the Style Kit's own resources (where a Style Kit layout is used) to ensure they have \npriority.\n\nEach file reference consists of an object with these properties:\n\n| Property | Data Type | Required | Allowed Values | Example Value |\n| ----------- | --------- | -------- | -------------- | ----------------------------------------------------- |\n| `href` | String | Yes | Any URL | */css/app.css* / *https://example.com/js/app.js* |\n| `integrity` | String | No | Any SRI value | *sha256-ClILH8AIH4CkAybtlKhzqqQUYR4eSDiNTK5LIWfF4qQ=* |\n\nFor example (using a Flask application with a `css/app.css` file with the default \n[static files route](http://flask.pocoo.org/docs/1.0/tutorial/static/)):\n\n```python\napp.config['bsk_templates'] = BskTemplates()\napp.config['bsk_templates'].site_styles.append({'href': '/static/css/app.css'})\n```\n\nThe `integrity` property is used to specify a \n[Subresource Integrity (SRI)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) value for \na resource. If specified an `integrity` attribute and will be added to the generated markup. A `crossorigin` \nattribute will also be added for \n[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) support with a \nhard-coded, anonymous, value.\n\n#### Using custom CSS/JS inline content\n\n* CSS content should be appended to the [styles block](#blocks)\n* JS content should be appended to the [scripts block](#blocks)\n* inline content will be added after any files to ensure they have priority\n\n**Note:** To append to a block use `{{ super() }}`, rather than replacing the contents of a block.\n\nFor example (using a Jinja template):\n\n```jinja2\n{% block scripts %}\n {{ super() }}\n console.log('jQuery version: ' + jQuery.fn.jquery);\n{% endblock %}\n```\n\n### Navigation menu items\n\nWhen using the [bsk_standard layout](#layouts), a [navbar](https://style-kit.web.bas.ac.uk/components/navbar/) is \nincluded as part of the 'standard header', which consists of a cookie banner, navbar and site development phase banner.\n\nThis navbar consists of three menus (and other elements, documented elsewhere):\n\n* a primary navigation menu - aligned left, after [brand elements](#navbar-branding)\n* a secondary navigation menu - aligned right, before the launcher menu\n* a navigation launcher menu - aligned right, after the secondary navigation menu\n\nThe navigation launcher is a restricted menu, used to link to other BAS websites and applications. By default it \ncontains links to the [BAS public website](https://www.bas.ac.uk) and the [BAS data catalogue](https://data.bas.ac.uk). \nOther websites and applications can be added as well where relevant.\n\n* primary navigation menu items should be added to the `BskTemplates.bsk_site_nav_primary` variable\n* secondary navigation menu items should be added to the `BskTemplates.bsk_site_nav_secondary` variable\n* navigation launcher menu items should be added to the `BskTemplates.bsk_site_nav_launcher` variable\n\nThe primary and secondary navigation menu's support:\n\n* [navbar items](https://style-kit.web.bas.ac.uk/components/navbar/#item)\n* [navbar drop-down menus](https://style-kit.web.bas.ac.uk/components/navbar/#drop-down-menus)\n* [navbar drop-down menu items](https://style-kit.web.bas.ac.uk/components/navbar/#drop-down-menus)\n\nThe navigation launcher menu, which is implemented as a drop-down menu, supports:\n\n* [navbar drop-down menu items](https://style-kit.web.bas.ac.uk/components/navbar/#drop-down-menus)\n\nMenu item objects have the following properties:\n\n| Property | Data Type | Required | Allowed Values | Example Value | Notes |\n| ----------- | --------- | -------- | -------------------------- | ------------------------------------------ | ------------------------------------- |\n| `value` | String | Yes | Any string | *About* | - |\n| `href` | String | Yes | Any URL | */about* / *https://www.example.com/about* | Ignored if `items` set |\n| `items` | Array | No | Array of menu item objects | - | Ignored for navigation launcher items |\n| *Any* | String | No | As per attribute | - | Arbitrary attribute/value key/values |\n\n**Note:** The `items` property is only recursed once, deeper objects will be ignored.\n\nFor example (using a Flask application):\n\n```python\napp.config['bsk_templates'] = BskTemplates()\napp.config['bsk_templates'].bsk_site_nav_primary.push({'value': 'Item', 'href': '/about'})\napp.config['bsk_templates'].bsk_site_nav_primary.push({'value': 'Another Item', 'href': '#', 'target': '_blank'})\n```\n\n```python\napp.config['bsk_templates'] = BskTemplates()\napp.config['bsk_templates'].bsk_site_nav_secondary.push({\n 'value': 'Dropdown', \n 'items': [\n {'value': 'Sub-item 1', 'href': 'https://www.example.com'}\n ]\n})\n```\n\n```python\napp.config['bsk_templates'] = BskTemplates()\napp.config['bsk_templates'].bsk_site_nav_launcher.push({'value': 'Related service', 'href': 'https://example.com'})\n```\n\n#### Active navigation items\n\nThese templates will automatically add the `.bsk-active` class to the relevant navigation item, and if relevant, \nsub-item, where its `href` attribute exactly matches the current URL given by `{{ request.path }}`.\n\nFor example for a navigation item `{'value': 'About', 'href': '/about'}`, when visiting `https://www.example/about`,\nthe about navigation item will be made active, as the current path `/about` matches the `href` attribute.\n\nThis support doesn't support URL patterns, such as `/foo/{id}` where `{id}` is a dynamic value. In these cases the \n`active_nav_item` variable can be set to the `href` value of a navigation item to make it active explicitly.\n\nFor example (using flask application):\n\n```python\napp.config['bsk_templates'] = BskTemplates()\napp.config['bsk_templates'].bsk_site_nav_primary.push({'value': 'Foo', 'href': '/foo'})\n\n@app.route('/foo/Before you start information
\nMore information
\n