Skip to content

Commit 661093c

Browse files
graynortonKate
graynorton
authored and
Kate
committed
[docs] Simplify home page (#521)
* Simplify home page structure to match lit-html * Allow custom label on <stack-blitz> element * Update home page content and layout based on feedback. * Fixing heading case * Tweaks to 'Why use...'
1 parent 65ffc3a commit 661093c

File tree

5 files changed

+64
-80
lines changed

5 files changed

+64
-80
lines changed

‎docs/_includes/project.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<stack-blitz
22
folder="{{ site.baseurl }}/{{ site.projects }}/{{ include.folder | default: template }}"
3-
openFile="{{ include.openFile | default: my-element.js }}">
3+
openFile="{{ include.openFile | default: my-element.js }}"
4+
label="{{ include.label | default: 'Launch Code Editor' }}">
45
</stack-blitz>

‎docs/_includes/projects/index-typescript/custom-greeting.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ export class CustomGreeting extends LitElement {
66
render() {
77
return html`<p>Hello, ${this.name}!</p>`;
88
}
9-
}
9+
}

‎docs/css/main.css

+17
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,17 @@ section p {
292292
padding: 0 20px;
293293
}
294294

295+
.fixed-width-caption {
296+
min-width: 300px;
297+
max-width: 300px;
298+
margin-bottom: 0;
299+
}
300+
301+
.inline-action-buttons > * {
302+
display: inline-block;
303+
margin-right: 20px;
304+
}
305+
295306
.center {
296307
align-items: center;
297308
justify-content: center;
@@ -628,6 +639,12 @@ th, td {
628639
.responsive-row {
629640
flex-direction: column;
630641
}
642+
643+
.fixed-width-caption {
644+
min-width: unset;
645+
max-width: unset;
646+
}
647+
631648
#logo-lockup {
632649
margin-bottom: -20px;
633650
}

‎docs/index.md

+40-77
Original file line numberDiff line numberDiff line change
@@ -11,73 +11,34 @@ layout: default
1111
</div>
1212
</header>
1313

14-
<section>
14+
<section id="section-snippet">
1515
<div class="wrapper">
1616
<h1 class="title">
17-
About
17+
Easily Create Fast, Lightweight Web Components
1818
</h1>
1919

2020
<div class="responsive-row">
2121

22-
<div style="flex:1;">
23-
<h2>
24-
Fast, lightweight web components
25-
</h2>
26-
<p>
27-
LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.
28-
</p>
29-
</div>
30-
31-
<div style="flex:1;">
32-
<h2>
33-
Using lit-html
34-
</h2>
35-
<p>
36-
For rendering, LitElement uses [lit-html](https://lit-html.polymer-project.org/)—a fast HTML templating library. To build an app out of LitElement components, check out [PWA Starter Kit](https://pwa-starter-kit.polymer-project.org/).
37-
</p>
38-
</div>
39-
40-
<div style="flex:1;">
41-
<h2>
42-
Who are we?
43-
</h2>
44-
<p>
45-
LitElement is brought to you by developers on the Google Chrome team with the input of web developers at organizations big and small around the world.
46-
</p>
47-
</div>
48-
49-
</div>
22+
<div class="fixed-width-caption">
23+
<h3 class="description">LitElement makes it easy to define Web Components – ideal for sharing elements across your organization or building a UI design system.</h3>
24+
<h3 class="description">Use your components anywhere you use HTML: in your main document, in a CMS, in Markdown, or in views built with frameworks like React and Vue.</h3>
5025
</div>
51-
</section>
52-
53-
<section>
54-
<div class="wrapper">
5526

56-
<h1 class="title">Get started</h1>
57-
58-
<h2>Define a component</h2>
59-
60-
It's easy to define a Web Component with LitElement:
6127

28+
<div>
6229
```js
6330
{% include projects/index-typescript/custom-greeting.ts %}
6431
```
65-
66-
<h2 style="margin-top: 40px;">Use a component</h2>
67-
68-
Then use it anywhere you use HTML:
69-
7032
```html
71-
<custom-greeting></custom-greeting>
33+
<custom-greeting name="Everyone"></custom-greeting>
7234
```
35+
</div>
36+
</div>
7337

74-
Click **Launch code editor** to see a live sample.
75-
76-
{% include project.html folder="index-typescript" openFile="custom-greeting.js" %}
77-
78-
The example above uses TypeScript and decorators. You can also easily write LitElements in plain JavaScript. Click **Launch code editor** for an example.
79-
80-
{% include project.html folder="index" openFile="custom-greeting.js" %}
38+
<div class="inline-action-buttons">
39+
{% include project.html label="Launch Code Editor (TypeScript)" folder="index-typescript" openFile="custom-greeting.ts" %}
40+
{% include project.html label="Launch Code Editor (JavaScript)" folder="index" openFile="custom-greeting.js" %}
41+
</div>
8142

8243
</div>
8344
</section>
@@ -90,51 +51,36 @@ The example above uses TypeScript and decorators. You can also easily write LitE
9051
<div class="responsive-row">
9152
<div style="flex: 1">
9253

93-
<h2 class="caption">Fast and light</h2>
54+
<h2 class="caption">Delightfully declarative</h2>
9455

95-
Whether your end users are in emerging markets or Silicon Valley, they’ll appreciate that LitElement is extremely fast.
56+
LitElement's simple, familiar development model makes it easier than ever to build Web Components.
9657

97-
LitElement uses [lit-html](https://github.com/Polymer/lit-html) to define and render HTML templates. DOM updates are lightning-fast, because lit-html only re-renders the data that changes.
58+
Express your UI declaratively, as a function of state. There's no need to learn a custom templating language – you can use the full power of JavaScript in your templates. Elements update automatically when their properties change.
9859

9960
</div>
10061
<div style="flex: 1">
10162

102-
<h2 class="caption">Standards-based</h2>
63+
<h2 class="caption">Fast and light</h2>
10364

104-
LitElement follows the [web components standards](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so your components will work with any framework.
65+
Whether your end users are in emerging markets or Silicon Valley, they’ll appreciate that LitElement is extremely fast.
10566

106-
LitElement uses custom elements for easy inclusion in web pages, and shadow DOM for encapsulation. There’s no new abstraction on top of the web platform.
67+
LitElement uses [lit-html](https://github.com/Polymer/lit-html) to define and render HTML templates. DOM updates are lightning-fast, because lit-html only re-renders the dynamic parts of your UI – no diffing required.
10768

10869
</div>
10970
<div style="flex: 1">
11071

111-
<h2 class="caption">Made to share</h2>
72+
<h2 class="caption">Seamlessly interoperable</h2>
73+
74+
LitElement follows the [Web Components standards](https://developer.mozilla.org/en-US/docs/Web/Web_Components), so your components will work with any framework.
11275

113-
Web components built with LitElement are made to share with the world and with others across your organization, no matter what libraries or frameworks they use.
76+
LitElement uses Custom Elements for easy inclusion in web pages, and Shadow DOM for encapsulation. There’s no new abstraction on top of the web platform.
11477

11578
</div>
11679
</div>
11780
</div>
11881
</section>
11982

12083

121-
<section>
122-
<div class="wrapper">
123-
124-
<h1 class="title">Browser Compatibility</h1>
125-
<h2 class="description">LitElement works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera). </h2>
126-
<div id="browser-thumbnails" style="margin-bottom: 20px;">
127-
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/chrome_128x128.png" alt="chrome logo">
128-
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/firefox_128x128.png" alt="firefox logo">
129-
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/internet-explorer_128x128.png" alt="internet explorer logo">
130-
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/edge_128x128.png" alt="edge logo">
131-
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/safari_128x128.png" alt="safari logo">
132-
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/opera_128x128.png" alt="opera logo">
133-
</div>
134-
135-
</div>
136-
</section>
137-
13884
<section style="margin-bottom: 60px;">
13985
<div class="wrapper">
14086
<h1 class="title">Next Steps</h1>
@@ -157,3 +103,20 @@ Web components built with LitElement are made to share with the world and with o
157103
</div>
158104
</div>
159105
</section>
106+
107+
<section>
108+
<div class="wrapper">
109+
110+
<h1 class="title">Browser Compatibility</h1>
111+
<h2 class="description">LitElement works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera). </h2>
112+
<div id="browser-thumbnails" style="margin-bottom: 20px;">
113+
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/chrome_128x128.png" alt="chrome logo">
114+
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/firefox_128x128.png" alt="firefox logo">
115+
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/internet-explorer_128x128.png" alt="internet explorer logo">
116+
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/edge_128x128.png" alt="edge logo">
117+
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/safari_128x128.png" alt="safari logo">
118+
<img width="56" width="56" src="{{ site.baseurl }}/images/browsers/opera_128x128.png" alt="opera logo">
119+
</div>
120+
121+
</div>
122+
</section>

‎docs/src/stack-blitz.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ class StackBlitz extends LitElement {
66
return {
77
folder: { type: String },
88
openFile: { type: String },
9+
label: { type: String },
910
_loading: { type: Boolean },
1011
};
1112
}
1213

1314
constructor() {
1415
super();
1516
this.openFile = 'index.html';
17+
this.label = 'Launch Code Editor';
1618
this._loading = false;
1719
this._vm = null;
1820
}
@@ -65,12 +67,13 @@ class StackBlitz extends LitElement {
6567
<div id="container">
6668
<button class="pretty-button" @click="${this.loadProject}"
6769
.disabled="${this._loading}">
68-
${this._loading ? 'Loading Code Editor...' : 'Launch Code Editor'}
70+
${this._loading ? 'Loading Code Editor...' : this.label}
6971
</button>
7072
</div>`;
7173
}
7274

7375
async loadProject() {
76+
this.style.display = 'block';
7477
const folder = this.folder;
7578
if (folder && !this._loading) {
7679
try {

0 commit comments

Comments
 (0)