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

Headless Components Design

takanorip
December 18, 2020

Headless Components Design

takanorip

December 18, 2020
Tweet

More Decks by takanorip

Other Decks in 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...