Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Headless Components Design takanorip / 20201218 / UIT紅白歌合戦
Slide 2
Slide 2 text
Self Introduction ● takanorip / Takanori Oki ● UI designer @ClassDo Inc. / Frontend developer ● Organizer of WPSG(Web Platform Study Group) ○ YouTube ○ Spotify
Slide 3
Slide 3 text
CSS in JS…?
Slide 4
Slide 4 text
We don’t want to write CSS anymore
Slide 5
Slide 5 text
Headless UI ● https://headlessui.dev/ ● “Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.”
Slide 6
Slide 6 text
import { useState } from 'react' import { Switch } from '@headlessui/react' function NotificationsToggle() { const [enabled, setEnabled] = useState(false) return (
Enable notifications
) }
Slide 7
Slide 7 text
tailwindcss “A utility-first CSS framework packed with classes”
ChitChat
You have a new message!
Slide 8
Slide 8 text
Issues in Components Design
Slide 9
Slide 9 text
What do we do when the style boundary and the function boundary are slightly different?
Slide 10
Slide 10 text
Let’s make Original Headless UI?
Slide 11
Slide 11 text
Current Design System Basic Components with style Organism Components
Slide 12
Slide 12 text
Original utility-first CSS Original Function Components Headless Design System
Slide 13
Slide 13 text
Design tokens -> Utility-first CSS ● Color ● Fonts ● Spaces ● etc...
