How to Build a UI Library One Element at a Time

Love Splash? They're hiring!

Check out their jobs here

How to Build a UI Library One Element at a Time

Video Sections (total time: 19 minutes)

Intro

30s

Why SUI

29s

Splash pre-SUI

1m 44s

A Piecemeal Approach

53s

SUI Examples

1m 52s

Diving into SUI with Megan Tong

15s

Standards, Conventions, and Design Patterns

5m 04s

Onboarding with SUI

58s

Faster Development with SUI

3m 20s

Safer Development with SUI

3m 49s

> Work at Splash

How to Build a UI Library One Element at a Time

Megan Tong, Front-End Engineer and Brett Boskoff, CTO and co-founder at Splash

Splash’s co-founder and CTO, Brett Boskoff, kicks this class off with a little bit of history. Splash launched with a huge—well—splash, in 2011, and rapidly built out new features. But, working so quickly to meet customer demand meant teams were working in silos. There wasn’t time to think about the big picture.

Several years and big name clients later, the Splash UI library was a mess, with numerous competing elements—buttons, dropdowns, and calendars from one page to another, and sometimes even within individual pages themselves.

Thus was the impetus for SUI, or Splash UI (which, fittingly, means water in Japanese) a company-wide framework for UI and design.

In this class, Brett explains how they’re doing things differently—and why that means taking a piecemeal approach. Then, Front-End Engineer, Megan Tong, walks through how the code is set up, and why SUI makes building at Splash faster and safer.

19 min watch · Tech

About Splash

Splash's design-first, and analytics-focused platform powers events for the likes of Spotify, Anheuser-Busch, and a little old event series we call Uncubed. Think you've got the chops to be a party scientist? Check out their open positions.