* Remove link to web.dev because honestly their site is kinda the opposite of the point I want to make
* Add a link to Adrian Roselli's site instead * Update the toggle to use the `switch` role * Add some text about the proposal for the Invoker button * Add a slide about theming
This commit is contained in:
parent
437a774329
commit
62ff9e8f77
@ -4,6 +4,6 @@ type: statement
|
||||
|
||||
## Huh?
|
||||
|
||||
* When we create a custom component, often we have to tell the browser how it should treat it
|
||||
* When we create a custom component, we have to tell the browser how it should treat it
|
||||
* But often browsers already give us the tools to do that natively
|
||||
* Reaching for CSS and HTML first can make our components faster, more reusable, and more accessible
|
||||
|
@ -154,6 +154,7 @@ export default class Toggle extends Component<Props, State> {
|
||||
* Have to import all of this everywhere we use it
|
||||
* No meaningful labels possible!
|
||||
* No keyboard navigation
|
||||
* No Javascript? No component
|
||||
|
||||
</div>
|
||||
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
```html
|
||||
<style>
|
||||
input[type="checkbox"][data-role="toggle"] {
|
||||
input[type="checkbox"][role="switch"] {
|
||||
appearance: none;
|
||||
background: lightgray;
|
||||
border: 1px solid gray;
|
||||
@ -43,23 +43,27 @@ input[type="checkbox"][data-role="toggle"] {
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
data-type="toggle"
|
||||
role="switch"
|
||||
name="activated"
|
||||
/>
|
||||
```
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
data-role="toggle"
|
||||
name="activated"
|
||||
/>
|
||||
<label>
|
||||
Enable:
|
||||
<input
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
name="activated"
|
||||
/>
|
||||
</label>
|
||||
|
||||
* 42 lines of code
|
||||
* Uses regular HTML markup - 0 javascript needed
|
||||
* Fully accessible
|
||||
* Labels work
|
||||
* Can be used anywhere - all you need is the stylesheet
|
||||
* `switch` role tells the browser that this is an on/off rather than a checked/unchecked component
|
||||
* Easily accessible to screen readers, keyboard users
|
||||
* Can be used anywhere - all you need is the stylesheet at the top level
|
||||
* Graceful degradation - if the CSS doesn't load we still get a checkbox
|
||||
</div>
|
||||
|
||||
</div>
|
@ -51,7 +51,11 @@ dialog::backdrop {
|
||||
|
||||
<ul>
|
||||
<li>31 lines of code</li>
|
||||
<li>A teensy bit of Javascript - I know, I'm a hypocrite</li>
|
||||
<li>A teensy bit of Javascript - this is currently unavoidable
|
||||
<ul>
|
||||
<li>But there is an open proposal for `Invoker buttons` (<a href="https://open-ui.org/components/invokers.explainer/" target="_blank" rel="noreferrer">link</a>) to address this</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Option to use as a popup <i>or</i> a modal</li>
|
||||
<li><code>::backdrop</code> pseudo-element for easy styling</li>
|
||||
</ul>
|
||||
|
39
src/slides/09-themes.md
Normal file
39
src/slides/09-themes.md
Normal file
@ -0,0 +1,39 @@
|
||||
## Themes
|
||||
|
||||
<div class="grid">
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary: #dedede;
|
||||
--color-secondary: #adadad;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
[class*="column"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--column-spacing, 1rem);
|
||||
}
|
||||
|
||||
.column-sm {
|
||||
--column-spacing: 0.5rem;
|
||||
}
|
||||
|
||||
.column-lg {
|
||||
--column-spacing: 1.5rem;
|
||||
}
|
||||
```
|
||||
<div>
|
||||
|
||||
* A few of the examples have had theme tokens injected into Styled Components
|
||||
* But we can also use CSS variables to inject our design tokens and use them everywhere
|
||||
* If we redefine a variable later on in the cascade, it applies to all subcomponents
|
||||
* Can also use sensible fallbacks for the instances where variables are undefined
|
||||
|
||||
</div>
|
||||
</div>
|
@ -9,4 +9,6 @@ type: statement
|
||||
* This entire presentation, with lots of duplication, and every single slide included, is only 92kb (16kb after Gzip)
|
||||
* When we build new components, let's see if the browser can't do it for us instead
|
||||
* Modern CSS is great
|
||||
* Javascript as a garnish, not a main course
|
||||
* Javascript as a garnish, not a main course
|
||||
* Building on the fundamentals of the web and then _progressively enhancing_ means we reach more users
|
||||
* And our applications will be faster and cheaper to run as a result
|
@ -6,4 +6,4 @@ type: statement
|
||||
|
||||
* W3C Aria Patterns - https://www.w3.org/WAI/ARIA/apg/patterns/
|
||||
* Every Layout - https://every-layout.dev/
|
||||
* Web.dev - https://web.dev/
|
||||
* Adrian Roselli: Patterns - https://adrianroselli.com/tag/pattern
|
@ -75,6 +75,10 @@ main {
|
||||
ul {
|
||||
width: 100%;
|
||||
margin: var(--space-size-3xl) auto;
|
||||
|
||||
ul {
|
||||
margin: var(--space-size-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,7 +110,7 @@ main {
|
||||
word-wrap:
|
||||
}
|
||||
|
||||
input[type="checkbox"][data-role="toggle"] {
|
||||
input[type="checkbox"][role="switch"] {
|
||||
appearance: none;
|
||||
background: lightgray;
|
||||
border: 1px solid gray;
|
||||
|
Loading…
Reference in New Issue
Block a user