Headless Components Design

Transcript

1. Headless Components
   Design
   takanorip / 20201218 / UIT紅白歌合戦
   

   View Slide

2. Self Introduction
   ● takanorip / Takanori Oki
   ● UI designer @ClassDo Inc. / Frontend developer
   ● Organizer of WPSG(Web Platform Study Group)
   ○ YouTube
   ○ Spotify
   

   View Slide

3. CSS in JS…?
   

   View Slide

4. We don’t want to write CSS anymore
   

   View Slide

5. Headless UI
   ● https://headlessui.dev/
   ● “Completely unstyled, fully accessible UI components, designed to
   integrate beautifully with Tailwind CSS.”
   

   View Slide

6. import { useState } from 'react'
   import { Switch } from '@headlessui/react'
   function NotificationsToggle() {
   const [enabled, setEnabled] = useState(false)
   return (
   checked={enabled}
   onChange={setEnabled}
   className={`${
   enabled ? 'bg-blue-600' : 'bg-gray-200'
   } relative inline-flex h-6 rounded-full w-8`}
   >
   Enable notifications
   className={`${
   enabled ? 'translate-x-4' : 'translate-x-0'
   } inline-block w-4 h-4 transform bg-white rounded-full`}
   />
   
   )
   }
   

   View Slide

7. tailwindcss
   “A utility-first CSS framework packed with classes”
   
   
   
   
   
   ChitChat
   You have a new message!
   
   
   

   View Slide

8. Issues in Components Design
   

   View Slide

9. What do we do when the style boundary
   and the function boundary are slightly
   different?
   

   View Slide

10. Let’s make Original Headless UI?
    

    View Slide

11. Current Design System
    Basic Components with style Organism Components
    

    View Slide

12. Original utility-first CSS Original Function Components
    Headless Design System
    

    View Slide

13. Design tokens -> Utility-first CSS
    ● Color
    ● Fonts
    ● Spaces
    ● etc...
    

    View Slide