Skip to content

feat(create-vite): align template styles with docs #8478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
patak-cat merged 24 commits into from
Jun 8, 2022
Merged

feat(create-vite): align template styles with docs #8478

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
08f91dd
feat(create-vite): align template styles with docs
patak-cat Jun 6, 2022
14be563
chore: missing <a> target
patak-cat Jun 6, 2022
9a5a45c
chore: missing link type
patak-cat Jun 6, 2022
8d7e3fa
chore: missing <a> target _blank
patak-cat Jun 6, 2022
d2f9535
chore: missing target _blank
patak-cat Jun 6, 2022
27dee1e
chore: missing target _blank
patak-cat Jun 6, 2022
d18bd8e
chore: update favicon
patak-cat Jun 6, 2022
6f1f869
chore: type issue
patak-cat Jun 6, 2022
f3a6256
chore: update type
patak-cat Jun 6, 2022
f31fba5
chore: apply sapphi suggestions
patak-cat Jun 6, 2022
da7ddb7
chore: update vanilla templates
patak-cat Jun 6, 2022
e8fa324
chore: use a, button, brand style from docs
patak-cat Jun 6, 2022
b3326b8
chore: armonize vite and vue logo
patak-cat Jun 6, 2022
857f19d
chore: missing a styles
patak-cat Jun 7, 2022
8fd31ca
chore: apply suggestions
patak-cat Jun 7, 2022
7cdd207
chore: HTMLButtonElement
patak-cat Jun 7, 2022
fd29881
chore: update
patak-cat Jun 7, 2022
4d65b1c
chore: dial the glow down a bit
patak-cat Jun 7, 2022
4e2e0f5
chore: typo
patak-cat Jun 7, 2022
7d290f8
chore: typo
patak-cat Jun 7, 2022
a2c86e1
chore: better anchor
patak-cat Jun 7, 2022
0f670d2
chore: better anchor
patak-cat Jun 7, 2022
336b49b
chore: format
patak-cat Jun 7, 2022
81db5e1
chore: update
patak-cat Jun 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/create-vite/template-lit-ts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit App</title>
<title>Vite + Lit + TS</title>
<link rel="stylesheet" href="./src/index.css" />
<script type="module" src="/src/my-element.ts"></script>
</head>
<body>
<my-element>
<p>This is child content</p>
<h1>Vite + Lit</h1>
</my-element>
</body>
</html>
1 change: 1 addition & 0 deletions packages/create-vite/template-lit-ts/public/vite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/create-vite/template-lit-ts/src/assets/lit.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 0 additions & 15 deletions packages/create-vite/template-lit-ts/src/favicon.svg
View file
Open in desktop

This file was deleted.

77 changes: 77 additions & 0 deletions packages/create-vite/template-lit-ts/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
}

#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
}

.logo:hover {
filter: drop-shadow(0 0 2em #888);
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}

button {
border: 0;
border-radius: 4px;
padding: 0.5em 1em;
outline: 1px solid #8888;
font-size: 1em;
font-family: inherit;
background-color: transparent;
}

button:hover {
outline-color: #888;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
65 changes: 55 additions & 10 deletions packages/create-vite/template-lit-ts/src/my-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { html, css, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import viteLogo from '/vite.svg'
import litLogo from './assets/lit.svg'

/**
* An example element.
Expand All @@ -11,18 +13,51 @@ import { customElement, property } from 'lit/decorators.js'
export class MyElement extends LitElement {
static styles = css`
:host {
display: block;
border: solid 1px gray;
padding: 16px;
max-width: 800px;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
}
.logo:hover {
filter: drop-shadow(0 0 2em #888);
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}

button {
border: 0;
border-radius: 4px;
padding: 0.5em 1em;
outline: 1px solid #8888;
font-size: 1em;
font-family: inherit;
background-color: transparent;
}
button:hover {
outline-color: #888;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
`

/**
* The name to say "Hello" to.
* Copy for the read the docs hint.
*/
@property()
name = 'World'
docsHint = 'Click on the Vite and Lit logos to learn more'

/**
* The number of times the button has been clicked.
Expand All @@ -32,11 +67,21 @@ export class MyElement extends LitElement {

render() {
return html`
<h1>Hello, ${this.name}!</h1>
<button @click=${this._onClick} part="button">
Click Count: ${this.count}
</button>
<div>
<a href="https://vitejs.dev" target="_blank"
><img src="${viteLogo}" class="logo" alt="Vite logo"
/></a>
<a href="https://lit.dev" target="_blank"
><img src=${litLogo} class="logo" alt="Lit logo"
/></a>
</div>
<slot></slot>
<div class="card">
<button @click=${this._onClick} part="button">
count is ${this.count}
</button>
</div>
<p class="read-the-docs">${this.docsHint}</p>
`
}

Expand Down
7 changes: 4 additions & 3 deletions packages/create-vite/template-lit/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit App</title>
<title>Vite + Lit</title>
<link rel="stylesheet" href="./src/index.css" />
<script type="module" src="/src/my-element.js"></script>
</head>
<body>
<my-element>
<p>This is child content</p>
<h1>Vite + Lit</h1>
</my-element>
</body>
</html>
1 change: 1 addition & 0 deletions packages/create-vite/template-lit/public/vite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/create-vite/template-lit/src/assets/lit.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 0 additions & 15 deletions packages/create-vite/template-lit/src/favicon.svg
View file
Open in desktop

This file was deleted.

35 changes: 35 additions & 0 deletions packages/create-vite/template-lit/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
}
67 changes: 56 additions & 11 deletions packages/create-vite/template-lit/src/my-element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { html, css, LitElement } from 'lit'
import viteLogo from '/vite.svg'
import litLogo from './assets/lit.svg'

/**
* An example element.
Expand All @@ -10,20 +12,53 @@ export class MyElement extends LitElement {
static get styles() {
return css`
:host {
display: block;
border: solid 1px gray;
padding: 16px;
max-width: 800px;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
}
.logo:hover {
filter: drop-shadow(0 0 2em #888);
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}

button {
border: 0;
border-radius: 4px;
padding: 0.5em 1em;
outline: 1px solid #8888;
font-size: 1em;
font-family: inherit;
background-color: transparent;
}
button:hover {
outline-color: #888;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
`
}

static get properties() {
return {
/**
* The name to say "Hello" to.
* Copy for the read the docs hint.
*/
name: { type: String },
docsHint: { type: String },

/**
* The number of times the button has been clicked.
Expand All @@ -34,17 +69,27 @@ export class MyElement extends LitElement {

constructor() {
super()
this.name = 'World'
this.docsHint = 'Click on the Vite and Lit logos to learn more'
this.count = 0
}

render() {
return html`
<h1>Hello, ${this.name}!</h1>
<button @click=${this._onClick} part="button">
Click Count: ${this.count}
</button>
<div>
<a href="https://vitejs.dev" target="_blank"
><img src="${viteLogo}" class="logo" alt="Vite logo"
/></a>
<a href="https://lit.dev" target="_blank"
><img src=${litLogo} class="logo" alt="Lit logo"
/></a>
</div>
<slot></slot>
<div class="card">
<button @click=${this._onClick} part="button">
count is ${this.count}
</button>
</div>
<p class="read-the-docs">${this.docsHint}</p>
`
}

Expand Down
4 changes: 2 additions & 2 deletions packages/create-vite/template-preact-ts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>Vite + Preact + TS</title>
</head>
<body>
<div id="app"></div>
Expand Down
Loading