Skip to content

Commit fe314ac

Browse files
author
Ryan A. Johnson
committed
feat(layouts): add boilerplate layouts
* Vertical Layout (using holy grail flexbox) * Horizontal Layout (using CSS Grid) * Update Install guide to include information about polyfill.io * Update CSS selectors in tests * Update copyright year in footer
1 parent 789302b commit fe314ac

File tree

23 files changed

+724
-193
lines changed

23 files changed

+724
-193
lines changed

‎docs/_data/cdn.json5‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
css: {
3+
helixUi: 'css/helix-ui.css',
4+
bootstrapHelix: 'css/bootstrap.helix.css',
5+
},
6+
js: {
7+
helixUi: 'javascript/helix-ui.js',
8+
es5adapter: 'javascript/custom-elements-es5-adapter.js',
9+
polyfillLoader: 'javascript/webcomponents-loader.js',
10+
},
11+
}

‎docs/_data/nav.json5‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@
3535
{ label: 'Breadcrumbs', path: 'breadcrumbs' },
3636
{ label: 'Buttons', path: 'buttons' },
3737
{ label: 'Forms', path: 'forms' },
38+
{
39+
label: 'Layouts',
40+
path: 'layouts',
41+
/* TODO: on hold until nav is updated to allow for link title + section toggle
42+
children: [
43+
{ label: 'Horizontal', path: 'horizontal-layout-template.html' },
44+
{ label: 'Vertical', path: 'vertical-layout-template.html' },
45+
],
46+
*/
47+
},
3848
{ label: 'Lists', path: 'lists' },
3949
{ label: 'Menus', path: 'menus' },
4050
{ label: 'Navigation', path: 'navigation' },

‎docs/_data/url.json5‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
cdn: 'https://2d2bf231b82dfe76fe36-fa12562cfe810d69bedcc36a0ac289ef.ssl.cf1.rackcdn.com'
3+
}
4+

‎docs/_templates/application.njk‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="{{site.language}}">
33
{% include 'partials/head.njk' %}
4-
<body class="hxApp" id="top">
5-
<header class="hxApp__header">
4+
<body class="hxVertical" id="top">
5+
<header id="head">
66
{% include 'partials/global_nav.njk' %}
77
</header>
88

9-
<div class="hxApp__container">
10-
<main class="hxApp__content">
11-
{% block layout %}
12-
{# layouts can override this #}
13-
{% block content %}
14-
{# compiled content goes here #}
15-
{% endblock %}
16-
{% endblock %}
17-
</main>
18-
<nav class="hxApp__nav">
9+
<div id="stage">
10+
<nav id="nav" class="hxNav">
1911
{% include 'partials/app_nav.njk' %}
2012
</nav>
13+
{% block layout %}
14+
<main id="content" class="hxBox-md">
15+
{% block content %}
16+
{# page content goes here #}
17+
{% endblock %}
18+
</main>
19+
<aside class="hxSiderail hxBox-md">
20+
{% block sidebar %}
21+
{% include 'partials/sidebar.njk' %}
22+
{% endblock %}
23+
</aside>
24+
{% endblock %}
2125
</div>
2226

23-
<footer class="hxApp__footer hxRow hxGutterless">
27+
<footer id="foot" class="hxRow hxGutterless">
2428
{% include 'partials/footer_nav.njk' %}
2529
</footer>
2630

‎docs/_templates/component.njk‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
{% extends 'application.njk' %}
22

33
{% block layout %}
4-
<article>
4+
<main id="content" class="hxBox-md">
55
<h1 class="hxPageTitle">{{ page.title }}</h1>
66

7-
<div class="hxRow">
8-
<div class="hxCol hxSpan-12-xs hxSpan-3-md hxOrder-2-md">
9-
{% include 'partials/sidebar.njk' %}
10-
</div>
11-
<div class="hxCol hxSpan-12-xs hxSpan-9-md hxOrder-1-md">
12-
{% block content %}
13-
{# page content goes here #}
14-
{% endblock %}
15-
</div>
16-
</div>
17-
</article>
7+
{% block content %}
8+
{# page content goes here #}
9+
{% endblock %}
10+
</main>
11+
<aside class="hxSiderail hxBox-md">
12+
{% include 'partials/sidebar.njk' %}
13+
</aside>
1814
{% endblock %}

‎docs/_templates/element.njk‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
{% extends 'application.njk' %}
22

33
{% block layout %}
4-
<article>
4+
<main id="content" class="hxBox-md">
55
<h1 class="hxPageTitle">{{ page.title }}</h1>
66

7-
<div class="hxRow">
8-
<div class="hxCol hxSpan-12-xs hxSpan-3-md hxOrder-2-md">
9-
{% include 'partials/sidebar.njk' %}
10-
</div>
11-
<div class="hxCol hxSpan-12-xs hxSpan-9-md hxOrder-1-md">
12-
{% block content %}
13-
{# page content goes here #}
14-
{% endblock %}
15-
</div>
16-
</div>
17-
</article>
7+
{% block content %}
8+
{# page content goes here #}
9+
{% endblock %}
10+
</main>
11+
<aside class="hxSiderail hxBox-md">
12+
{% include 'partials/sidebar.njk' %}
13+
</aside>
1814
{% endblock %}

‎docs/_templates/guide.njk‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
{% extends 'application.njk' %}
22

33
{% block layout %}
4-
<article>
4+
<main id="content" class="hxBox-md">
55
<h1 class="hxPageTitle">{{ page.title }}</h1>
66

7-
<div class="hxRow">
8-
<div class="hxCol hxSpan-12-xs hxSpan-3-md hxOrder-2-md">
9-
{% include 'partials/sidebar.njk' %}
10-
</div>
11-
<div class="hxCol hxSpan-12-xs hxSpan-9-md hxOrder-1-md">
12-
{% block content %}
13-
{# page content goes here #}
14-
{% endblock %}
15-
</div>
16-
</div>
17-
</article>
7+
{% block content %}
8+
{# page content goes here #}
9+
{% endblock %}
10+
</main>
11+
<aside class="hxSiderail hxBox-md">
12+
{% include 'partials/sidebar.njk' %}
13+
</aside>
1814
{% endblock %}

‎docs/_templates/partials/footer_legal.njk‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
&copy; 2018 Rackspace US, Inc.
2+
<nav>
3+
<a href="https://www.rackspace.com/information/legal/websiteterms">Website Terms</a>
4+
<a href="https://www.rackspace.com/information/legal/privacystatement">Privacy Policy</a>
5+
</nav>

‎docs/_templates/partials/footer_nav.njk‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<div class="hxCol">
2-
&copy; 2017 Rackspace US, Inc.
3-
<nav>
4-
<a href="https://www.rackspace.com/information/legal/websiteterms">Website Terms</a>
5-
<a href="https://www.rackspace.com/information/legal/privacystatement">Privacy Policy</a>
6-
</nav>
2+
{% include 'partials/footer_legal.njk' %}
73
</div>
84
<div class="hxCol text-right">
95
{% if page.updated %}

‎docs/_templates/styleguide.njk‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
{% extends 'application.njk' %}
22

33
{% block layout %}
4-
<article>
4+
<main id="content" class="hxBox-md">
55
<h1 class="hxPageTitle">{{ page.title }}</h1>
66

7-
<div class="hxRow">
8-
<div class="hxCol hxSpan-12-xs hxSpan-3-md hxOrder-2-md">
9-
{% include 'partials/sidebar.njk' %}
10-
</div>
11-
<div class="hxCol hxSpan-12-xs hxSpan-9-md hxOrder-1-md">
12-
{% block content %}
13-
{# page content goes here #}
14-
{% endblock %}
15-
</div>
16-
</div>
17-
</article>
7+
{% block content %}
8+
{# page content goes here #}
9+
{% endblock %}
10+
</main>
11+
<aside class="hxSiderail hxBox-md">
12+
{% include 'partials/sidebar.njk' %}
13+
</aside>
1814
{% endblock %}

0 commit comments

Comments
 (0)