1 of 13

Headless Components Design

takanorip / 20201218 / UIT紅白歌合戦

2 of 13

Self Introduction

  • takanorip / Takanori Oki
  • UI designer @ClassDo Inc. / Frontend developer
  • Organizer of WPSG(Web Platform Study Group)
    • YouTube
    • Spotify

3 of 13

CSS in JS…?

4 of 13

We don’t want to write CSS anymore

5 of 13

Headless UI

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

6 of 13

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 of 13

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 of 13

Issues in Components Design

9 of 13

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

10 of 13

Let’s make Original Headless UI?

11 of 13

Current Design System

Basic Components with style

Organism Components

12 of 13

Headless Design System

Original utility-first CSS

Original Function Components

13 of 13

Design tokens -> Utility-first CSS

  • Color
  • Fonts
  • Spaces
  • etc...