Skip to content

Commit 5453285

Browse files
CITguyCITguy
authored
Merge pull request #254 from rackerlabs/SURF-1147-dl-generated-assets
docs(downloads): modify getting started guide
2 parents ab8cf42 + f0b12a2 commit 5453285

File tree

18 files changed

+242
-53
lines changed

18 files changed

+242
-53
lines changed

‎docs/_data/cdn.json5‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎docs/_templates/guide.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends 'application.njk' %}
22

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

77
{% block content %}

‎docs/_templates/partials/after_footer.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
elAdapter.parentElement.removeChild(elAdapter);
1010
}
1111
</script>
12-
<script src="{{ data.cdn.webComponents }}/custom-elements-es5-adapter.js"></script>
12+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
1313
</span>
1414

1515
<script src="https://code.jquery.com/jquery-3.2.1.min.js"

‎docs/_templates/partials/head.njk‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@
1010
<link rel="stylesheet" href="docs.css">
1111

1212
<!-- Polyfill Loader -->
13-
<script src="{{ data.cdn.webComponents }}/webcomponents-loader.js"></script>
13+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
14+
1415
</head>

‎docs/components/icons/icon-demo.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ if (document.getElementById('vue-iconDemo')) {
4646
},
4747
},
4848
computed: {
49+
searchPlaceholder: function () {
50+
return `Search ${this.icons.length} icons for...`;
51+
},
4952
downcaseFilter: function () {
5053
return this.filter.toLowerCase();
5154
},

‎docs/components/icons/index.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,18 @@ <h2 id="file-icons">File Icons</h2>
7575

7676
<section id="vue-iconDemo">
7777
<h2 id="available-icons">Icons</h2>
78+
<p>
79+
<a href="downloads/helix-ui-{{VERSION}}-icons.tgz">
80+
<hx-icon type="download"></hx-icon>
81+
Download All Icons (SVG)
82+
</a>
83+
</p>
7884
<div v-cloak>
7985
<div class="hxRow">
8086
<div class="hxCol hxSpan-12-xs hxSpan-6-md hxSpan-4-xl">
8187
<p>
8288
<hx-search
83-
:placeholder="`Search ${icons.length} icons for...`"
89+
:placeholder="searchPlaceholder"
8490
:value="filter"
8591
@input="onFilterUpdate"
8692
@clear="onFilterUpdate"

‎docs/components/layouts/horizontal-layout-template.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<!-- FIXME: Add your application styles here! -->
1717

18-
<script src="{{ data.cdn.webComponents }}/webcomponents-loader.js"></script>
18+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
1919
</head>
2020
<body class="hxHorizontal" id="top">
2121
<!--
@@ -110,7 +110,7 @@ <h2>Right Panel</h2>
110110
elAdapter.parentElement.removeChild(elAdapter);
111111
}
112112
</script>
113-
<script src="{{ data.cdn.webComponents }}/custom-elements-es5-adapter.js"></script>
113+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
114114
</span>
115115

116116
<!-- FIXME: point to HelixUI behavior in node_modules/helix-ui -->

‎docs/components/layouts/vertical-layout-template.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<!-- FIXME: Add your application styles here! -->
1717

18-
<script src="{{ data.cdn.webComponents }}/webcomponents-loader.js"></script>
18+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
1919
</head>
2020
<body class="hxVertical" id="top">
2121
<!--
@@ -105,7 +105,7 @@ <h1>Page Content</h1>
105105
elAdapter.parentElement.removeChild(elAdapter);
106106
}
107107
</script>
108-
<script src="{{ data.cdn.webComponents }}/custom-elements-es5-adapter.js"></script>
108+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
109109
</span>
110110

111111
<!-- FIXME: point to HelixUI behavior in node_modules/helix-ui -->

‎docs/docs.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ hx-status {
8888
}
8989
}
9090

91+
p.comfortable {
92+
max-width: 80ch;
93+
}
94+
9195
.metadata {
9296
background-color: @cyan-50;
9397
border: 1px solid @cyan-100;

‎docs/guides/getting-started/index.html‎

Lines changed: 88 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,62 +4,117 @@
44
{% extends 'guide.njk' %}
55
{% block content %}
66
<section>
7-
<p>
8-
This guide is intented to help developers initialize a Helix application.
7+
<p class="comfortable">
8+
The HelixUI library provides front-end developers a set of reusable CSS
9+
classes and HTML Custom Elements that adhere to Helix design standards.
10+
Adopting the library will enable developers to build products with consistent
11+
markup, styles, and behavior across a variety of frameworks.
912
</p>
1013
</section>
1114

1215
<section><!-- Install from NPM -->
13-
<h2 id="install">Step 1: Install HelixUI via npm or Yarn</h2>
14-
<p>
15-
HelixUI is registered as a package on <a href="https://www.npmjs.com/">npm</a>.
16-
You can install the latest version with the npm CLI command:
17-
</p>
18-
{% code "bash" %}
19-
npm install --save-dev helix-ui
20-
{% endcode %}
21-
22-
<p>
23-
Alternatively, you can use the <a href="https://yarnpkg.com">Yarn</a>
24-
CLI command:
25-
</p>
26-
{% code "bash" %}
27-
yarn add helix-ui
28-
{% endcode %}
16+
<h2 id="install">Step 1: Install HelixUI</h2>
17+
<hx-tabset class="beta-hxBound">
18+
<hx-tablist>
19+
<hx-tab>NPM</hx-tab>
20+
<hx-tab>Download</hx-tab>
21+
</hx-tablist>
22+
<hx-tabcontent>
23+
<hx-tabpanel class="hxBox-xl">
24+
<p>
25+
Using <a href="https://npmjs.com">npm</a>:
26+
</p>
27+
<figure>
28+
{% code "bash" %}
29+
npm install helix-ui
30+
{% endcode %}
31+
</figure>
2932

30-
<p>
31-
Both approaches install HelixUI in the <code>node_modules/</code> directory.
32-
</p>
33+
<p>
34+
If you prefer <a href="https://yarnpkg.com/">Yarn</a>, use the following command:
35+
</p>
36+
<figure>
37+
{% code "bash" %}
38+
yarn add helix-ui
39+
{% endcode %}
40+
</figure>
41+
</hx-tabpanel>
42+
<hx-tabpanel class="hxBox-xl">
43+
<p>
44+
If HelixUI is not available in your chosen package manager,
45+
pre-built assets are available for download.
46+
</p>
47+
<p>
48+
<a href="downloads/helix-ui-{{VERSION}}.tgz" class="hxBtn hxPrimary">
49+
<hx-icon type="download"></hx-icon>
50+
Download HelixUI (v{{VERSION}})
51+
</a>
52+
</p>
53+
</hx-tabpanel>
54+
</hx-tabcontent>
55+
</hx-tabset>
3356
</section>
3457

3558
<section><!-- Choose a Layout -->
3659
<h2 id="choose-layout">Step 2: Choose a Layout</h2>
3760
<p>
38-
Building a Helix application begins with choosing a layout.
39-
HelixUI provides two supported layouts from which you can choose.
61+
HelixUI provides two layouts to use in your application.
4062
</p>
4163
<ol>
4264
<li>
43-
<a href="components/layouts/#vertical-layout">Vertical Layout</a>
44-
<ul>
45-
<li>Lengthy content pushes the footer below the fold.</li>
46-
</ul>
65+
Copy the source code for a layout template into your application.
4766
</li>
4867
<li>
49-
<a href="components/layouts/#horizontal-layout">Horizontal Layout</a>
50-
<ul>
51-
<li>The footer is always visible.</li>
52-
</ul>
68+
Review the copied markup (especially URLs) to fit your application's needs.
5369
</li>
5470
</ol>
71+
<div class="beta-hxCardRow">
72+
<hx-panel class="beta-hxCard hxOpen">
73+
<header>
74+
<h3>Vertical Layout</h3>
75+
</header>
76+
<div>
77+
<p>
78+
Lengthy content can push the footer
79+
below the bottom of the viewport.
80+
</p>
81+
</div>
82+
<footer>
83+
<a href="components/layouts/vertical-layout-template.html">
84+
View the Vertical Template
85+
</a>
86+
</footer>
87+
</hx-panel>
88+
89+
<hx-panel class="beta-hxCard hxOpen">
90+
<header>
91+
<h3>Horizontal Layout</h3>
92+
</header>
93+
<div>
94+
<p>
95+
Content is arranged horizontally in panels
96+
while the footer remains visible at all times.
97+
</p>
98+
</div>
99+
<footer>
100+
<a href="components/layouts/horizontal-layout-template.html">
101+
View the Horizontal Template
102+
</a>
103+
</footer>
104+
</hx-panel>
105+
</div>
106+
<p>
107+
Visit the <a href="components/layouts">Layouts</a> component
108+
documentation for more details.
109+
</p>
55110
</section>
56111

57112
<section><!-- Create Content -->
58113
<h2 id="add-content">Step 3: Add Content</h2>
59114
<p>
60115
Add content and interactivity to your application using components.
61-
Components contain interactive demos and information for various
62-
interaction patterns.
116+
Documentation for a component contains interactive demos and details
117+
about various interaction patterns.
63118
</p>
64119
<ol>
65120
<li>Choose a component from the navigation on the left.</li>

0 commit comments

Comments
 (0)