Skip to content

Commit 5953a54

Browse files
author
Ryan A. Johnson
committed
docs(CSS): update styles
* modified templates and CSS to support full-width page header * LESS-to-CSS: migrated some styles out of docs.less into index.scss
1 parent 0506e2e commit 5953a54

File tree

10 files changed

+264
-177
lines changed

10 files changed

+264
-177
lines changed

‎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: 32 additions & 34 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,37 +104,37 @@
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

@@ -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+
}

0 commit comments

Comments
 (0)