Skip to content

Commit eb8d8d4

Browse files
author
Ryan A. Johnson
committed
docs(*): refactor docs layouts
1 parent 8affbd2 commit eb8d8d4

File tree

7 files changed

+98
-40
lines changed

7 files changed

+98
-40
lines changed

‎docs/_templates/component.njk‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@
22

33
{% block layout %}
44
<main id="content" class="hxBox hxMd">
5-
<h1>{{ page.title }}
6-
{% include 'partials/min-version.njk' %}
7-
</h1>
5+
<header>
6+
<h1>
7+
{{ page.title }}
8+
{% include 'partials/min-version.njk' %}
9+
</h1>
10+
11+
{% block page_header %}
12+
{# extra header content goes here #}
13+
{% endblock %}
14+
</header>
815

916
{% block content %}
1017
{# freeform page content goes here #}
@@ -15,14 +22,6 @@
1522
{% endif %}
1623
</main>
1724
<aside class="hxSiderail hxBox hxMd">
18-
<h1 class="hxHeading-4">On this page:</h1>
19-
<nav class="article-toc">
20-
{{ page.raw | toc | safe }}
21-
{% if page.also %}
22-
<a href="#see-also">See Also</a>
23-
{% endif %}
24-
<hr class="hxDivider" />
25-
<a class="top-link" href="#top">Back to Top</a>
26-
</nav>
25+
{% include 'partials/sidebar.njk' %}
2726
</aside>
2827
{% endblock %}

‎docs/_templates/element.njk‎

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,53 @@
22

33
{% block layout %}
44
<main id="content" class="hxBox hxMd">
5-
<h1>{{ page.title }}
6-
{% include 'partials/min-version.njk' %}
7-
</h1>
5+
<header>
6+
<h1>
7+
{{ page.title }}
8+
{% include 'partials/min-version.njk' %}
9+
</h1>
10+
11+
{% block page_header %}
12+
{# extra header content goes here #}
13+
{% endblock %}
14+
</header>
815

916
{% block content %}
1017
{# freeform page content goes here #}
1118
{% endblock %}
1219

1320
{# ATTRIBUTES #}
1421
<section>
15-
<h2 id="attributes">Attributes</h2>
16-
<p>
17-
Attributes enable declarative configuration of an element,
18-
via HTML markup.
19-
</p>
22+
<header>
23+
<h2 id="attributes">Attributes</h2>
24+
<p>
25+
Attributes enable declarative configuration of an element,
26+
via HTML markup.
27+
</p>
28+
</header>
29+
2030
{% block attributes %}
21-
<p class="hxSubdued">
22-
<small>
23-
<hx-icon type="info-circle"></hx-icon>
24-
This element does not have any configurable attributes.
25-
</small>
31+
<p class="hxSubdued hxSubBody">
32+
<hx-icon type="info-circle"></hx-icon>
33+
This element does not have any configurable attributes.
2634
</p>
2735
{% endblock %}
2836
</section>
2937

3038
{# PROPERTIES #}
3139
<section>
32-
<h2 id="properties">Properties</h2>
33-
<p>
34-
JavaScript properties enable programmatic access to an element's
35-
configuration and state.
36-
</p>
40+
<header>
41+
<h2 id="properties">Properties</h2>
42+
<p>
43+
JavaScript properties enable programmatic access to an element's
44+
configuration and state.
45+
</p>
46+
</header>
47+
3748
{% block properties %}
38-
<p class="hxSubdued">
39-
<small>
40-
<hx-icon type="info-circle"></hx-icon>
41-
This element does not have any configurable properties.
42-
</small>
49+
<p class="hxSubdued hxSubBody">
50+
<hx-icon type="info-circle"></hx-icon>
51+
This element does not have any configurable properties.
4352
</p>
4453
{% endblock %}
4554
</section>
@@ -48,8 +57,12 @@
4857
{% include 'partials/see-also.njk' %}
4958
{% endif %}
5059
</main>
60+
5161
<aside class="hxSiderail hxBox hxMd">
52-
<h1 class="hxHeading-4">On this page:</h1>
62+
<header>
63+
<h1 class="hxHeading-4">On this page:</h1>
64+
</header>
65+
5366
<nav class="article-toc">
5467
{{ page.raw | toc | safe }}
5568
<a href="#attributes">Attributes</a>

‎docs/_templates/guide.njk‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22

33
{% block layout %}
44
<main id="content" class="hxBox hxMd">
5-
<h1>{{ page.title }}</h1>
5+
<header>
6+
<h1>{{ page.title }}</h1>
7+
8+
{% block page_header %}
9+
{# extra header content goes here #}
10+
{% endblock %}
11+
</header>
612

713
{% block content %}
814
{# page content goes here #}

‎docs/_templates/partials/sidebar.njk‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
<h1 class="hxHeading-4">On this page:</h1>
1+
<header>
2+
<h1 class="hxHeading-4">On this page:</h1>
3+
</header>
4+
25
<nav class="article-toc">
36
{{ page.raw | toc | safe }}
47
{% if page.also %}

‎docs/_templates/test.njk‎

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

33
{% block layout %}
4-
<main id="content" class="hxBox hxLg test-content">
5-
<h1>{{ page.title }}</h1>
4+
<main id="content" class="hxBox hxLg test-content {{contentClasses}}">
5+
<header>
6+
<h1>{{ page.title }}</h1>
7+
8+
{% block page_header %}
9+
{# extra header content goes here #}
10+
{% endblock %}
11+
</header>
612

713
{% block content %}
814
{# freeform page content goes here #}

‎docs/components/accordions/test.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Testing - Accordions
33
---
4+
{% set contentClasses = 'accordions-test' %}
45
{% extends 'test.njk' %}
56
{% block content %}
67
<section>

‎docs/docs.less‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,3 +266,33 @@ dl.memberList {
266266
/* Beta Auto Grid Styles */
267267
.hxRow.hxAuto > .hxCol { flex-grow: 0; }
268268
.hxRow .hxCol.hxAuto { flex: 0 0 auto; }
269+
270+
/* ----- Test Page Styling ----- */
271+
.test-content {
272+
section {
273+
> * {
274+
margin: 1rem 0;
275+
276+
&:first-child {
277+
margin-top: 0;
278+
}
279+
280+
&:last-child {
281+
margin-bottom: 0;
282+
}
283+
}
284+
285+
> section {
286+
margin-bottom: 2rem;
287+
margin-left: 2rem;
288+
}
289+
290+
> table {
291+
border: 1px solid @gray-400;
292+
293+
td, th {
294+
padding: 1em;
295+
}
296+
}
297+
}
298+
}

0 commit comments

Comments
 (0)