Skip to content

Commit 38dc6b9

Browse files
AndrewJakubowiczAndrewJakubowicz
authored
BWL003 Styling a Lit element code changes (#16)
1 parent 6a44951 commit 38dc6b9

11 files changed

+345
-38
lines changed

‎build-it-with-lit/02-simple-carousel/README.md

+33-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
[![Build it with Lit simple carousel Youtube
22
thumbnail](http://img.youtube.com/vi/2RftvylEtrE/maxresdefault.jpg)](https://www.youtube.com/watch?v=2RftvylEtrE)
33

4+
[![Build it with Lit style the carousel Youtube thumbnail](http://img.youtube.com/vi/Xt7blcyuw5s/maxresdefault.jpg)](https://www.youtube.com/watch?v=Xt7blcyuw5s)
5+
46
# Simple Carousel
57

68
This is the completed simple-carousel Lit component that accompanies the [second
7-
Build It With Lit video](https://www.youtube.com/watch?v=2RftvylEtrE).
9+
Build It With Lit video](https://www.youtube.com/watch?v=2RftvylEtrE), and has a
10+
public styling interface added in the [third Build It With Lit video](TODO).
811

912
Install directly from Github:
1013

@@ -15,11 +18,39 @@ npm install github:lit/video-series-samples
1518
Register the <simple-carousel> with:
1619

1720
```js
18-
import 'video-series-samples/simple-carousel.js';
21+
import "video-series-samples/simple-carousel.js";
1922
```
2023

2124
Code is for learning purposes only.
2225

26+
## Styling
27+
28+
### Custom Properties
29+
30+
| Name | Default | Description |
31+
| ---------------------------------------- | -------------------------------------------------------------------- | --------------------------------------------------- |
32+
| `--carousel-box-shadow` | `#293198 0.2em 0.2em 0.4em, #ceffff -0.1em -0.1em 0.2em` | `box-shadow` of the carousel container and buttons |
33+
| `--carousel-active-btn-box-shadow` | `inset #293198 0.2em 0.2em 0.4em, inset #ceffff -0.1em -0.1em 0.2em` | `box-shadow` of the pressed carousel buttons |
34+
| `--carousel-active-btn-background-color` | `transparent` | `background-color` of the pressed carousel buttons |
35+
| `--carousel-active-btn-color` | `inherit` | Chevron svg `color` of the pressed carousel buttons |
36+
37+
### Shadow Parts
38+
39+
The following [CSS shadow
40+
parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) are exported,
41+
which you can style with additional rules not covered by the above CSS custom
42+
properties.
43+
44+
| Part name | Exported by | Description |
45+
| -------------- | ----------------- | ---------------------------------------------------- |
46+
| `container` | `simple-carousel` | The container for the simple-carousel |
47+
| `buttons` | `simple-carousel` | All the button nodes including left and right button |
48+
| `left-button` | `simple-carousel` | Left simple-carousel button |
49+
| `right-button` | `simple-carousel` | Right simple-carousel button |
50+
| `internal-btn` | `slide-button` | Container for the button |
51+
52+
# Development
53+
2354
## Setup
2455

2556
Install dependencies:

‎build-it-with-lit/02-simple-carousel/dev/demo-1.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<title>First Demo Carousel</title>
6+
<script type="module" src="../lib/simple-carousel.js"></script>
7+
<style>
8+
:root {
9+
background-color: #f4f4f4;
10+
}
11+
12+
simple-carousel {
13+
font-family: Arial;
14+
color: #353535;
15+
--carousel-box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
16+
0px 10px 14px 1px rgba(0, 0, 0, 0.14),
17+
0px 4px 18px 3px rgba(0, 0, 0, 0.12);
18+
--carousel-active-btn-box-shadow: var(--carousel-box-shadow);
19+
--carousel-active-btn-background-color: rgb(247, 130, 8);
20+
--carousel-active-btn-color: white;
21+
}
22+
23+
body {
24+
/* Center the carousel on the page */
25+
height: 100vh;
26+
overflow: hidden;
27+
display: flex;
28+
flex-direction: column-reverse;
29+
align-items: center;
30+
justify-content: center;
31+
}
32+
33+
/*
34+
Hide the simple-carousel element until it is defined, preventing a flash
35+
of unstyled content.
36+
*/
37+
simple-carousel:not(:defined) {
38+
display: none;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<simple-carousel slideindex="0">
44+
<h1>Welcome to Lit!</h1>
45+
<section>
46+
<h1>██ █████ █ ███</h1>
47+
<p>█████ ████ ██ ███████ █ █</p>
48+
</section>
49+
<section>
50+
<h1>█ ██████ ██ ████</h1>
51+
<p>███████ █ ██ ███████ ███ ████████</p>
52+
</section>
53+
</simple-carousel>
54+
</body>
55+
</html>

‎build-it-with-lit/02-simple-carousel/dev/demo-2.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<title>Second Demo Carousel</title>
6+
<script type="module" src="../lib/simple-carousel.js"></script>
7+
<style>
8+
:root {
9+
background-color: #f4f4f4;
10+
font-family: Arial;
11+
}
12+
simple-carousel::part(container) {
13+
border-radius: unset;
14+
margin: unset;
15+
box-shadow: unset;
16+
background-color: rgb(215, 218, 222);
17+
}
18+
simple-carousel::part(buttons) {
19+
border-radius: unset;
20+
height: 100%;
21+
box-shadow: unset;
22+
background-color: rgb(20, 150, 241);
23+
}
24+
simple-carousel {
25+
filter: drop-shadow(-1em -1em 0 rgb(6, 4, 24));
26+
}
27+
simple-carousel::part(buttons):active {
28+
background-color: rgb(247, 130, 8);
29+
color: white;
30+
}
31+
32+
body {
33+
/* Center the carousel on the page */
34+
height: 100vh;
35+
overflow: hidden;
36+
display: flex;
37+
flex-direction: column-reverse;
38+
align-items: center;
39+
justify-content: center;
40+
}
41+
42+
/*
43+
Hide the simple-carousel element until it is defined, preventing a flash
44+
of unstyled content.
45+
*/
46+
simple-carousel:not(:defined) {
47+
display: none;
48+
}
49+
</style>
50+
</head>
51+
<body>
52+
<simple-carousel slideindex="0">
53+
<h1>Welcome to Lit!</h1>
54+
<section>
55+
<h1>██ █████ █ ███</h1>
56+
<p>█████ ████ ██ ███████ █ █</p>
57+
</section>
58+
<section>
59+
<h1>█ ██████ ██ ████</h1>
60+
<p>███████ █ ██ ███████ ███ ████████</p>
61+
</section>
62+
</simple-carousel>
63+
</body>
64+
</html>

‎build-it-with-lit/02-simple-carousel/dev/demo-3.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<title>Third Demo Carousel</title>
6+
<script type="module" src="../lib/simple-carousel.js"></script>
7+
<style>
8+
:root {
9+
font-family: Arial;
10+
background-color: #f4f4f4;
11+
}
12+
13+
simple-carousel {
14+
color: white;
15+
filter: drop-shadow(0 0.8em 0 rgb(212, 34, 33));
16+
}
17+
simple-carousel::part(container) {
18+
border-radius: unset;
19+
margin: unset;
20+
box-shadow: unset;
21+
background-color: rgb(253, 133, 9);
22+
}
23+
simple-carousel::part(buttons) {
24+
display: none;
25+
}
26+
27+
body {
28+
/* Center the carousel on the page */
29+
height: 100vh;
30+
overflow: hidden;
31+
display: flex;
32+
flex-direction: column-reverse;
33+
align-items: center;
34+
justify-content: center;
35+
}
36+
37+
/*
38+
Hide the simple-carousel element until it is defined, preventing a flash
39+
of unstyled content.
40+
*/
41+
simple-carousel:not(:defined) {
42+
display: none;
43+
}
44+
</style>
45+
</head>
46+
<body>
47+
<simple-carousel slideindex="0">
48+
<h1>Welcome to Lit!</h1>
49+
<section>
50+
<h1>██ █████ █ ███</h1>
51+
<p>█████ ████ ██ ███████ █ █</p>
52+
</section>
53+
<section>
54+
<h1>█ ██████ ██ ████</h1>
55+
<p>███████ █ ██ ███████ ███ ████████</p>
56+
</section>
57+
</simple-carousel>
58+
59+
<script>
60+
setInterval(() => {
61+
document.querySelector("simple-carousel").slideIndex++;
62+
}, 3000);
63+
</script>
64+
</body>
65+
</html>

‎build-it-with-lit/02-simple-carousel/dev/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,16 @@ <h1>Use directly in HTML:</h1>
7474
</code>
7575
</section>
7676

77+
<section>
78+
<h1>Styling</h1>
79+
<p>This carousel can be styled with CSS inheritance, custom properties, and shadow parts.</p>
80+
<ol>
81+
<li><a href="./demo-1.html">Custom Properties Demo</a></li>
82+
<li><a href="./demo-2.html">Shadow Parts Demo 1</a></li>
83+
<li><a href="./demo-3.html">Shadow Parts Demo 2</a></li>
84+
</ol>
85+
</section>
86+
7787
<p>Enjoy learning with this code, and please do not use this component in production!</p>
7888
</simple-carousel>
7989
</body>

‎build-it-with-lit/02-simple-carousel/lib/constants.js

+28-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build-it-with-lit/02-simple-carousel/lib/simple-carousel.js

+16-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build-it-with-lit/02-simple-carousel/lib/slide-button.js

+15-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)