Styling with TiaUI

TiaUI is a design system based on ThemeUI.

We treat it as a library with its own dev cycle, releases, and semver. You can find it on github 👉 https://github.com/AskTia/tia-ui

If you ever need to look up a component, its storybook is published on Chromatic 👉 https://5efa84bae8e40500223e8b9e-bnaqzlpuwp.chromatic.com/

The basics

TiaUI is an extension of ThemeUI. Everything ThemeUI can do, TiaUI can do. You can use all the same APIs. Our library is preconfigured to spit out interfaces that follow our design system.

Plus a growing pile of pre-built components.

The core component is a <Box>. Like a div with extra skillz.

You style any UI component through the sx prop. It supports the usual CSS features you're used to, makes them theme-aware, and adds shorthand properties.

For example:

<Box sx={{ p: 2 }} />

Creates a Box with 4px padding. px: 2 adds left/right padding, py adds top/bottom padding, pl left padding, etc. Same approach for margins with m.

Values that don't map to a theme value are treated as raw CSS 🤘

You can see our scales on the storybook page for scales

sx supports styling child components through your favorite CSS selectors. We'll skip that part today but you might find it in the code.

Responsive design

We use breakpoints for responsive design. Turn any sx value into a 3-element array to change how it looks at different viewport sizes. Resize the window and look at the button:

<Button
  sx={{
    bg: ["red", "secondary", "primary"],
    fontSize: [1, 2, 3],
    p: [2, 2, 3],
  }}
>
  I'm a button
</Button>

Exercise

Take the starter repo and use fake data from src/fakeDoggos.json to render a homepage of doggos. Make it responsive so that you get a nice set of pictures at any screen size.

Use the <Image> component to render images. I suggest <Grid> for the layout.

Solution

You can find my solution at https://github.com/AskTia/tia-react-train/tree/solution-tia-ui