Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Headless Components Design

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
December 18, 2020

Headless Components Design

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

December 18, 2020
Tweet

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...