grit.css

Every component in grit.css on one page. Browse, copy, and build.

01 — Typography

Typography

Semantic HTML — no classes needed. .prose for long-form content.

Heading 1 — The quick brown fox

Heading 2 — The quick brown fox

Heading 3 — The quick brown fox

Heading 4 — The quick brown fox

Heading 5 — The quick brown fox
Heading 6 — The quick brown fox

This is a paragraph of body text. grit.css provides beautiful defaults for semantic HTML — no classes needed. You can include inline links, bold text, italic text, inline code, and highlighted text.

"Simplicity is the ultimate sophistication." — Leonardo da Vinci 
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("world"));

02 — Buttons

Buttons

.btn .btn-primary .btn-outline .btn-ghost .btn-pill .btn-sm .btn-lg .btn-block

Color Variants

Styles

Block Button

03 — Cards

Cards

.card .card-body .card-title .card-actions

Mountain landscape

Mountain Retreat

Escape to the mountains for a weekend of hiking, fresh air, and stunning views.

Weekly Report

Revenue is up 12% this quarter. Customer satisfaction scores hit an all-time high of 94%.

Server Status

Online

All systems operational. Last incident was 47 days ago. Uptime: 99.98%.

04 — Badges

Badges

.badge .badge-primary .badge-success .badge-outline .badge-lg

Default Primary Secondary Accent Success Warning Error Info Outline Large

05 — Alerts

Alerts

.alert .alert-info .alert-success .alert-warning .alert-error

Your trial expires in 3 days. Upgrade to keep your data.
Payment received — $49.00 charged to Visa ending 4242.
API rate limit at 80%. Consider upgrading your plan.
Failed to deploy build #347. Check logs for details.

06 — Tabs

Tabs

.tabs .tab .tab-active

07 — Toggle Switches

Toggle Switches

.toggle on <input type="checkbox">

08 — Avatars

Avatars

.avatar .avatar-sm .avatar-lg .avatar-xl

Small avatar Default avatar Large avatar XL avatar

10 — Tooltips

Tooltips

data-tooltip="..." attribute on any element

Hover this text

11 — Progress Bars

Progress Bars

.progress .progress-bar .progress-bar-success .progress-bar-warning .progress-bar-error

Storage — 45%
Build — Complete
Memory — 72%
Disk — 91%

13 — Dividers

Dividers

.divider — empty for a line, with text for a labeled break

OR
Section Break

14 — Skeleton Loading

Skeleton Loading

.skeleton .skeleton-text .skeleton-title .skeleton-avatar

15 — Chips

Chips

.chip

JavaScript TypeScript React Vue Svelte CSS

17 — Pagination

Pagination

.pagination .active .disabled

18 — Toast Notifications

Toast Notifications

.toast-container .toast .toast-success .toast-error .toast-out

19 — Accordion

Accordion

.accordion .accordion-body on <details>/<summary>

What is grit.css?
One CSS file with beautiful defaults and 30+ components. No JavaScript. No build step. 8KB gzipped.
Do I need a build tool?
No. Just add a <link> tag to your HTML and start writing. That's it.
Can I customize the theme?
Yes. Override any CSS custom property like --grit-primary and the entire framework updates. Dark mode works automatically via prefers-color-scheme.

20 — List Group

List Group

.list-group .active

Static

  • Inbox 12
  • Starred
  • Drafts
  • Sent
  • Trash

Linked

Dashboard Settings Profile Sign Out

21 — Spinner

Spinner

.spinner .spinner-sm .spinner-lg

22 — Stack

Stack (responsive row → col)

.stack — row on desktop, column on mobile

Left

Row on desktop, column on mobile.

Center

Resize the browser to see.

Right

Uses .stack class.

23 — Prose

Prose

.prose — typographic styling for long-form content

Why grit.css exists

CSS frameworks got complicated. Tailwind needs a compiler. Bootstrap ships 160KB and a JavaScript bundle. You need a PhD in config files before you write your first style.

We wanted something simpler. One file. One <link> tag. Your HTML looks good immediately.

How it works

grit.css styles semantic HTML out of the box — headings, paragraphs, lists, tables, forms, and blockquotes all look polished without adding a single class.

  • Drop in the CSS file
  • Write semantic HTML
  • Add a class when you need a component
    • Cards, modals, tabs, dropdowns
    • Alerts, badges, tooltips, progress bars
  • Write custom CSS when you need something unique
Simplicity is the ultimate sophistication. — Leonardo da Vinci

Getting started

  1. Add the stylesheet to your <head>
  2. Start writing HTML — it already looks good
  3. Check the documentation for component classes

That's it. No build step. No JavaScript. No config files. Just HTML and CSS, the way it should be.

24 — Tables

Tables

.table .table-striped .table-hover .table-responsive

Name Email Role Status Joined
Sarah Chen sarah@example.com Admin Active Jan 12, 2024
Marcus Johnson marcus@example.com Editor Active Mar 5, 2024
Emily Rodriguez emily@example.com Viewer Pending Jun 20, 2024
James Kim james@example.com Editor Suspended Aug 1, 2024
Olivia Patel olivia@example.com Admin Active Sep 14, 2024

25 — Color Palette

Color Palette

CSS custom properties: --grit-primary --grit-success --grit-error etc.

--grit-primary

#2563eb

--grit-secondary

#7c3aed

--grit-accent

#06b6d4

--grit-neutral

#1f2937

--grit-success

#16a34a

--grit-warning

#eab308

--grit-error

#dc2626

--grit-info

#0ea5e9

--grit-bg

#ffffff

--grit-surface

#f9fafb

--grit-surface-2

#f3f4f6

--grit-muted

#6b7280

26 — Themes

Themes

.theme-midnight .dark .light — or create your own by overriding CSS custom properties

Midnight

Dark blue theme

Badge Accent
Deploy in progress

Create Your Own

Every component reads from CSS custom properties

.my-theme {
  --grit-primary: #e11d48;
  --grit-bg: #0a0a0a;
  --grit-surface: #1a1a1a;
  --grit-text: #f5f5f5;
  --grit-border: #333;
}

27 — Composition

Composition

Combining components: .card + .badge + .avatar + .row/.col

Notifications

3

New deployment started

2 minutes ago

Build #346 completed

1 hour ago

Disk usage at 85%

3 hours ago

Team Members

avatar

Alex Rivera

Engineering

Admin
avatar

Maya Johnson

Design

Editor
avatar

Sam Park

Marketing

Viewer

28 — Forms

Forms

<input> <select> <textarea> .input-group .input-group-text <fieldset>

Create Account

Notifications

29 — Layout

Layout

.grid .grid-2 .grid-3 .grid-4 .grid-auto .row .col .between .center

Grid — 2 Columns

1
2

Grid — 3 Columns

1
2
3

Grid — 4 Columns

1
2
3
4

Grid — Auto (Responsive)

A
B
C
D
E

Row — Space Between

Left Center Right

Row — Center

Column — Gap

Row 1
Row 2
Row 3

30 — Utilities

Utilities

.text-sm .text-lg .text-muted .font-bold .font-mono .truncate .shadow .rounded

Text Sizes

text-sm — Small text for captions and fine print

Default — Regular body text size

text-lg — Slightly larger for emphasis

text-xl — Section headings and callouts

text-2xl — Large display text

Text Colors

text-muted text-primary text-success text-warning text-error text-info

Text Alignment

text-left — Aligned to the left

text-center — Centered text

text-right — Aligned to the right

Font Styles

font-bold — Bold weight text

font-mono — Monospaced text for code

Truncate

This is a very long line of text that will be truncated with an ellipsis when it exceeds the container width.

Shadow & Border

shadow + rounded
border + rounded