Skip to content

Commit 043904b

Browse files
CITguyCITguy
authored
Merge pull request #651 from HelixDesignSystem/docs-0.18.0
Docs 0.18.0
2 parents ab7445d + e372c3f commit 043904b

28 files changed

+1190
-495
lines changed

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Copyright 2019 Rackspace US, Inc.
1+
Copyright 2017-2019 Rackspace US, Inc.
22

33
Licensed under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License.

‎docs/_banner.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// currently used by test page layout to display a warning to readers
2+
.banner {
3+
-ms-grid-columns: auto 1fr;
4+
-ms-grid-row-align: baseline;
5+
align-items: baseline;
6+
background-color: $gray-0;
7+
border: 2px solid currentColor;
8+
color: $gray-950;
9+
display: -ms-grid;
10+
display: grid;
11+
grid-template-areas: 'icon content';
12+
grid-template-columns: auto 1fr;
13+
padding: 1rem;
14+
15+
> * {
16+
margin: 0;
17+
}
18+
19+
&.warning {
20+
background-color: $yellow-500;
21+
border: 2px solid $yellow-900;
22+
}
23+
}
24+
25+
.banner__icon {
26+
-ms-grid-column: 1;
27+
-ms-grid-row: 1;
28+
grid-area: icon;
29+
margin-right: 1rem; // because IE
30+
}
31+
32+
.banner__body {
33+
-ms-grid-column: 2;
34+
-ms-grid-row: 1;
35+
grid-area: content;
36+
}
37+
38+
@include supports-grid {
39+
.banner {
40+
grid-gap: 1rem;
41+
}
42+
43+
.banner__icon {
44+
margin: 0; // because IE
45+
}
46+
}

‎docs/_layout.scss‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
body.hxVertical {
2+
main {
3+
// Fallback layout (stacked)
4+
display: flex;
5+
flex-direction: column;
6+
7+
> * {
8+
order: 10;
9+
padding: map-get($space, lg);
10+
grid-area: body;
11+
}
12+
13+
> header {
14+
background-color: $gray-50;
15+
border-color: $gray-100;
16+
border-style: solid;
17+
border-width: 0 0 1px;
18+
grid-area: header;
19+
order: 1;
20+
21+
> * + * {
22+
margin-top: map-get($space, sm);
23+
}
24+
}
25+
26+
> aside {
27+
background-color: $gray-0;
28+
border-color: $gray-100;
29+
border-style: solid;
30+
border-width: 0 0 1px;
31+
grid-area: aside;
32+
order: 3;
33+
width: 100%; // override .hxSiderail
34+
}
35+
36+
/*
37+
* +----------------+
38+
* | header | auto
39+
* +------+---------+
40+
* | body | [aside] | 1fr
41+
* +------+---------+
42+
* 1fr auto
43+
*/
44+
@include supports-grid {
45+
display: grid;
46+
grid-template-areas:
47+
"header header"
48+
"body aside";
49+
grid-template-columns: 1fr auto;
50+
grid-template-rows: auto 1fr;
51+
overflow: visible !important; // override #content
52+
53+
> aside {
54+
border-width: 0 0 0 1px; // override stacked layout
55+
min-width: $app-nav-width;
56+
width: 25vw; // override stacked layout
57+
}
58+
}
59+
}
60+
61+
// ===== VERTICAL SPACING RHYTHM ===== //
62+
main {
63+
> div {
64+
// L1
65+
> * + *,
66+
> * + section {
67+
margin-top: map-get($space, xxl);
68+
}
69+
70+
> section {
71+
//margin-bottom: 0;
72+
73+
// L2
74+
> * + section {
75+
margin-top: map-get($space, lg);
76+
}
77+
78+
> section {
79+
// L3
80+
> * + section {
81+
margin-top: map-get($space, sm);
82+
}
83+
}
84+
}
85+
}
86+
87+
> aside {
88+
> * + * {
89+
margin-top: map-get($space, lg);
90+
}
91+
}
92+
}
93+
}

‎docs/_shame.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
dl:not(.hxList) {
2+
dd {
3+
margin-bottom: 0.5em;
4+
margin-left: 1em;
5+
}
6+
}
7+
8+
/* Beta Auto Grid Styles */
9+
.hxRow.hxAuto > .hxCol { flex-grow: 0; }
10+
.hxRow .hxCol.hxAuto { flex: 0 0 auto; }
11+
12+
// keep line size at a readable length
13+
p.comfortable,
14+
header > p {
15+
max-width: 80ch;
16+
}

‎docs/_templates/application.njk‎

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,12 @@
6868
</nav>
6969

7070
<main role="main" id="content" class="{{mainClass}} {{contentClasses}}">
71-
{% block banner %}
72-
{# page banner goes here #}
73-
{% endblock %}
74-
7571
{% block main %}
7672
<header>
73+
{% block banner %}
74+
{# page banner go here #}
75+
{% endblock %}
76+
7777
{% if page.crumbs %}
7878
<nav class="hxBreadcrumb">
7979
{% for crumb in page.crumbs %}
@@ -104,43 +104,43 @@
104104
{% endblock %}
105105
</header>
106106

107-
{% block content %}
108-
{# page content goes here #}
109-
{% endblock %}
110-
{% endblock %}
111-
112-
{% if page.also %}
113-
{% include 'partials/see-also.njk' %}
114-
{% endif %}
115-
</main>
116-
117-
{% if hasSiderail %}
118-
<aside class="hxSiderail">
119-
{% block siderail %}
120-
<header>
121-
<h1 class="hxHeading-4">On this page:</h1>
122-
</header>
123-
124-
<nav class="article-toc">
125-
{{ page.raw | toc | safe }}
126-
{% block toc %}
127-
{# extra links go here #}
107+
<div>
108+
{% block contentWrapper %}
109+
{% block content %}
110+
{# page content goes here #}
128111
{% endblock %}
112+
129113
{% if page.also %}
130-
<a href="#see-also">See Also</a>
114+
{% include 'partials/see-also.njk' %}
131115
{% endif %}
132-
<hr class="hxDivider" />
133-
<a class="top-link" href="#top">Back to Top</a>
134-
</nav>
135-
{% endblock %}
136-
</aside>
137-
{% endif %}
116+
{% endblock %}
117+
</div>
118+
119+
{% if hasSiderail %}
120+
<aside class="hxSiderail">
121+
{% block siderail %}
122+
<nav class="toc" aria-label="table of contents">
123+
{{ page.raw | toc | safe }}
124+
{% block toc %}
125+
{# extra links go here #}
126+
{% endblock %}
127+
{% if page.also %}
128+
<a href="#see-also">See Also</a>
129+
{% endif %}
130+
<hr class="hxDivider" />
131+
<a class="top-link" href="#top">Back to Top</a>
132+
</nav>
133+
{% endblock %}
134+
</aside>
135+
{% endif %}
136+
{% endblock %}
137+
</main>
138138
</div>
139139
</div>
140140

141141
<footer id="foot" class="hxRow hxGutterless">
142142
<div class="hxCol">
143-
&copy; 2019 Rackspace US, Inc.
143+
&copy; 2017-2019 Rackspace US, Inc.
144144
<nav>
145145
<a href="https://www.rackspace.com/information/legal/websiteterms">Website Terms</a>
146146
<a href="https://www.rackspace.com/information/legal/privacystatement">Privacy Policy</a>
@@ -163,8 +163,6 @@
163163
</div>
164164
</footer>
165165

166-
{# Documentation Dependencies #}
167-
168166
{# Vue for Interactive Demos #}
169167
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
170168
{# HelixUI Behavior (generated from src/) #}

‎docs/_templates/element.njk‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
<a href="#properties">Properties</a>
88
{% endblock %}
99

10-
{% block main %}
11-
{{super()}}
10+
{% block contentWrapper %}
11+
{% block content %}
12+
{# page content goes here #}
13+
{% endblock %}
1214

1315
{# ATTRIBUTES #}
1416
<section>
@@ -45,4 +47,8 @@
4547
</p>
4648
{% endblock %}
4749
</section>
50+
51+
{% if page.also %}
52+
{% include 'partials/see-also.njk' %}
53+
{% endif %}
4854
{% endblock %}

‎docs/_templates/no-frame.njk‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,10 @@
99
<link rel="shortcut icon" href="images/favicon.png">
1010

1111
{# HelixUI Styles (generated from src/) #}
12-
<link rel="stylesheet" href="dist/styles/helix-ui.css">
12+
<link rel="stylesheet" href="dist/css/helix-ui.css">
1313
{# Documentation Styles (generated from docs/) #}
1414
<link rel="stylesheet" href="docs.css">
1515

16-
<!-- Converts ES5 custom element constructor functions to ES6 classes -->
17-
<script src="vendor/custom-elements-es5-adapter.js"></script>
18-
1916
<!-- loader appends polyfills, if needed -->
2017
<script src="vendor/webcomponents-loader.js"></script>
2118
</head>
@@ -29,7 +26,7 @@
2926
{# Vue for Interactive Demos #}
3027
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
3128
{# HelixUI Behavior (generated from src/) #}
32-
<script src="dist/scripts/helix-ui.browser.js"></script>
29+
<script src="dist/js/helix-ui.js"></script>
3330
{# Documentation Behavior (generated from docs/) #}
3431
<script src="docs.js"></script>
3532
</body>

‎docs/_test-content.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* ----- Test Page Styling ----- */
2+
.test-content {
3+
border: 0.5rem solid $yellow-900;
4+
5+
section {
6+
> section {
7+
margin-bottom: 2rem;
8+
margin-left: 2rem;
9+
}
10+
11+
> table {
12+
border: 1px solid $gray-400;
13+
14+
td, th {
15+
padding: 1em;
16+
}
17+
}
18+
}
19+
}

‎docs/_toc.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// table of contents
2+
.toc {
3+
align-items: flex-start;
4+
display: flex;
5+
flex-direction: column;
6+
position: -webkit-sticky;
7+
position: sticky;
8+
top: 1rem;
9+
10+
> a {
11+
font-weight: 500;
12+
margin-bottom: 0.5rem;
13+
text-decoration: none;
14+
}
15+
16+
// hide if no grid support
17+
.top-link {
18+
font-size: 0.875rem;
19+
font-weight: 300;
20+
21+
// hide if stacked layout
22+
display: none;
23+
// show if grid layout
24+
@include supports-grid {
25+
display: block;
26+
}
27+
}
28+
}

‎docs/components/layout/index.html‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@ <h2 id="prerequisites">Prerequisites</h2>
112112
</header>
113113

114114
<p>
115-
To get the most out of this documentation, developers are
116-
expected to:
115+
To get the most out of {{page.title}} documentation,
116+
developers are expected to:
117117
</p>
118118

119119
<ol class="hxList">
@@ -125,11 +125,6 @@ <h2 id="prerequisites">Prerequisites</h2>
125125
Have a basic understanding of the features and limitations of
126126
each of the pre-defined layouts.
127127
</li>
128-
<li>
129-
Have a basic understanding of how to load the required
130-
<a href="guides/getting-started/#step-1">HelixUI</a> assets and required
131-
<a href="guides/getting-started/#step-2">polyfills</a>.
132-
</li>
133128
</ol>
134129
</section>
135130

0 commit comments

Comments
 (0)