Get boba!
boba Version 1.7.2
  • Introduction
  • Installation
  • Customize
  • Compatibility
  • Changelog
  • Breakpoints
  • Colors
  • Typography
  • Containers
  • Grid
  • Navbar
  • Sections
  • Sidebar
  • Banners
  • Breadcrumbs
  • Cards
  • Collapsible
  • Messages
  • Notifications
  • Pagination
  • Tabs
  • Tables
  • Blockquotes
  • Buttons
  • Code
  • Counters
  • Descriptions
  • Dividers
  • Labels
  • Lists
  • Progress
  • Checkboxes
  • Inputs
  • Radios
  • Selects
  • Switches
  • Textareas
  • Animations
  • Background
  • Borders
  • Display
  • Flex
  • Images
  • Shadows
  • Shapes
  • Sizing
  • Spacing
  • Text

Overview

Learn how to build your website with boba!

Introduction

tl;dr: a lightweight, modular, CSS-only design framework.


Our Story

Boba [boe-buh], also known as bubble tea, boba tea, milk tea, etc., originates from the distant land of Taiwan.

However, our story begins one spring night at 2AM in sunny San Francisco. We were deep in discussion about the many other bulky open source design frameworks available and decided that we deserved better. Thus, boba was born — our own lightweight, modular, and CSS-only design framework took flight.

Oh, and the name? We're just huge boba fanatics. Like really, you know the saying, "a boba a day keeps the doctor away?" Thought so.


Versions

A brief overview of the three flavors of boba available.

boba-lite (~10 KB gzip)

The most basic version of boba.

Components do not have colored variations and no color utilities are included.

Use this version if you want to use boba but have your own color palette in mind.

boba (~22 KB gzip)

The original version of boba.

Components have color variations and basic color utilities are included.

Use this version if you want to use boba's color palette as we envisioned it.

boba-extended (~27 KB gzip)

The most complete version of boba.

Components have color variations and all color utilities are included.

Use this version for the most built-in flexibility when customizing boba's color palette.


Feature Comparison

For a more complete breakdown of the various versions of boba.
boba-lite boba boba-extended
Responsive ✔ ✔ ✔
Typography ✔ ✔ ✔
Grid System ✔ ✔ ✔
Navigation ✔ ✔ ✔
Components ✔ ✔ ✔
Elements ✔ ✔ ✔
Forms ✔ ✔ ✔
Non-Color Utilities ✔ ✔ ✔
 
Navigation Colors ✖ ✔ ✔
Components Colors ✖ ✔ ✔
Elements Colors ✖ ✔ ✔
Forms Colors ✖ ✔ ✔
Basic Color Utilities ✖ ✔ ✔
Background Tints ✖ ✔ ✔
 
Extended Color Utilities ✖ ✖ ✔
Color Shades ✖ ✖ ✔

The Team

A power-duo from the north.
Jason Manson-Hing

"Why is there no boba emoji?"

GitHub
Andrew Chung

"Taro is my city."

GitHub