grain

Built into everything. Dependent on nothing.

Deploy like infrastructure. Adopt like a framework. Copy a folder, serve a page — no internet required, no ongoing dependency on anything outside the folder you already copied.

full version (modern devices)

<link rel="stylesheet" href="grain.css"> <script src="grain.js"></script>

lite version (old devices / low-power)

<link rel="stylesheet" href="grain-lite.css"> <script src="grain-lite.js"></script>

offline-first no CDN self-hosted fonts ~103kb fonts MIT license

tokens

colors

--gr-bg · #faf8f2

--gr-ink · #0f0e0b

--gr-mid · #9e9b91

--gr-subtle · #e8e3d6

--gr-accent · #b8973a

--gr-accent2 · #5a8fa8

--gr-accent3 · #6b8c52

typography

Courier Prime — mono
self-hosted · OFL license

Lora — serif body
self-hosted · OFL license

override colors

:root {
  --gr-accent: #your-color;
  --gr-bg:     #your-bg;
}

typography

Heading One

Heading Two

Heading Three

Heading Four

Body copy set in Lora serif. The tension between monospace structure and humanist type is intentional — it reads like a document that knows what it is.

Paragraphs breathe at 1.85 line-height. Italic text holds its own. Bold is spare.

small label · uppercase mono

accent label

Muted text for secondary content.

frame

Default — solid border, copper corners.

Dashed subtle frame.

Accent border frame.

nav

buttons

Tab to see focus ring →

badges & chips

badges

default accent accent2 accent3 filled

chips (hover)

offline-first open source no CDN MIT

status

active pending error offline

cards

resource

Kolibri Integration

UI layer for offline Kolibri deployments in low-bandwidth schools.

tool

Local Dashboard

School intranet dashboard built with Grain on a Raspberry Pi server.

list

01.
School Intranet Portal
Student resources, timetables, announcements
02.
NGO Field Dashboard
Data collection and reporting for field workers
03.
Community Health Tool
Patient records on a local mesh network

forms

name

class Used for roster lookup.

subject

notes

error state this field is required

tabs

Grain is built for places where bootstrap fails — not because it can't load, but because it assumes a connection that doesn't exist.

<link rel="stylesheet" href="grain.css">

Copy the folder to your server. Open index.html. That's it. Works on Apache, Nginx, Python's http.server, or directly from a USB drive.

toast

table

name	role	status
Aisha Mohammed	teacher	active
James Okonkwo	admin	active
Priya Sharma	student	pending

progress

literacy rate72%

device coverage58%

offline readiness91%

cursor

default

ink

blue

slow

fast

grid

default — auto-fit min 22ch

item

Auto

Columns form based on available space.

item

Fit

No breakpoint math required.

item

Grid

Add more items — layout adjusts.

narrow — min 14ch

tag one tag two tag three tag four tag five tag six

wide — min 32ch, gap-lg

wide column a

Content with breathing room. Wide columns suit long-form reading contexts.

wide column b

Resize the window to watch both columns collapse into one below ~32ch.

gr-grid--3 with spanning

span-2

Featured

Spans two columns. Use .gr-span-2 on the item.

col

Side

Single column item.

span-full

Full Width

Spans all columns with .gr-span-full.

alignment — gr-grid--middle

Short

Medium height card

A bit more content here to make it taller.

Short

quick reference

.gr-grid auto-fit min 22ch .gr-grid .gr-grid--narrow auto-fit min 14ch .gr-grid .gr-grid--wide auto-fit min 32ch .gr-grid .gr-grid--2/3/4 fixed columns .gr-span-2/3/full item spanning .gr-grid--gap-none/sm/md/lg/xl

ascii art

 ___  _   ___ ___ _____
/ __|| | | _ \ __|_   _|
| (__ | |_|   / _|  | |
\___||___|_|_\___| |_|

Use .gr-ascii with .gr-ascii--accent or .gr-ascii--mid. Pair with typewriter via data-grain-type (full version only).

typewriter

Add data-grain-type="your text" to any element. Full version only.

grid

default — auto-fit, min 22ch

col

gr-grid--narrow — min 16ch (more columns)

col

gr-grid--wide — min 32ch (fewer, wider columns)

col

gr-grid--2 · gr-grid--3 — explicit counts

always 2

always 3

gr-span-full — spanning

gr-span-full

col

real-world — cards in a grid

school

Semanhyiya School

Deployed on local intranet. 340 students, zero internet dependency.

NGO

Field Dashboard

Health worker data collection on a Raspberry Pi mesh network.

community

Resource Portal

Village information board served from a solar-powered server.