Headless Components Design

Transcript

1. Headless Components Design takanorip / 20201218 / UIT紅白歌合戦
2. Self Introduction • takanorip / Takanori Oki • UI designer @ClassDo Inc. / Frontend developer • Organizer of WPSG(Web Platform Study Group) ◦ YouTube ◦ Spotify
3. CSS in JS…?
4. We don’t want to write CSS anymore
5. Headless UI • https://headlessui.dev/ • “Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.”
6. import { useState } from 'react' import { Switch } from '@headlessui/react' function NotificationsToggle() { const [enabled, setEnabled] = useState(false) return ( <Switch checked={enabled} onChange={setEnabled} className={`${ enabled ? 'bg-blue-600' : 'bg-gray-200' } relative inline-flex h-6 rounded-full w-8`} > <span className="sr-only">Enable notifications</span> <span className={`${ enabled ? 'translate-x-4' : 'translate-x-0' } inline-block w-4 h-4 transform bg-white rounded-full`} /> </Switch> ) }
7. tailwindcss “A utility-first CSS framework packed with classes” <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center"> <div class="flex-shrink-0"> <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"> </div> <div> <div class="text-xl font-medium text-black">ChitChat</div> <p class="text-gray-500">You have a new message!</p> </div> </div>
8. Issues in Components Design
9. What do we do when the style boundary and the function boundary are slightly different?
10. Let’s make Original Headless UI?
11. Current Design System Basic Components with style Organism Components
12. Original utility-first CSS Original Function Components Headless Design System
13. Design tokens -> Utility-first CSS • Color • Fonts • Spaces • etc...