Gallo CSS — A classless framework
Write semantic HTML. Get beautiful results. No class names, no configuration, no build steps required, just drop in the Gallo 🐓
Heading 2 — Jumps over the lazy dog
Heading 3 — Pack my box with five dozen
Heading 4 — Liquor jugs
Heading 5 — Subheading in italics
Heading 6 — Smallest heading
Paragraph — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
The measure of intelligence is the ability to change.
Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world.
Albert Einstein
Inline Text
This is how a link looks inline with text, and here is one that has been visited.
Bold and strong text alongside emphasized and italic text sit naturally within a paragraph.
Small muted helper text and highlighted mark text for calling out details.
CSS abbreviations get a dotted underline and a help cursor. Superscripts like E = mc2 and subscripts like H2O also render correctly.
This paragraph uses the .muted utility class to
reduce text emphasis — useful for helper text, timestamps, or secondary captions.
Code
Inline code and keyboard shortcuts like
⌘ K are styled distinctly from the surrounding text.
const greet = (name) => `Hello, ${name}!`;
console.log(greet("world")); // Hello, world!Monospace
The --g-mono token applies to code,
kbd, and samp elements. Use
samp for sample output from a program or system.
$ git status
On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree clean
Running npm run build produced:
dist/index.html 1.23 kB │ gzip: 0.61 kB
Press ⌘ + Shift + P to open the command palette.
Lists
- Unordered list item one
- Unordered list item two
- Unordered list item three
- Ordered list item one
- Ordered list item two
- Ordered list item three
- Definition term
- The description or explanation of the term above.
- Another term
- Another description for the second term.
Forms
Table
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Disclosure
What is Gallo CSS?
Gallo is a classless CSS framework that styles raw HTML elements with no class names required. Just drop in the stylesheet and your content looks great.
How do I use it?
Link the stylesheet and write semantic HTML. No additional class names, build tools, or configuration required.
What elements are supported?
All standard HTML5 elements: headings, paragraphs, lists, forms, tables, media, code blocks, blockquotes, and more. See each section on this page for a live demo.
Dialog
The dialog element renders with a styled surface,
shadow, and a blurred backdrop. Use .showModal() to open it as a true modal.