Granum v2.4.0

Developer Documentation

1. Getting Started

Include the CSS and JS files in your HTML. The JS file is optional but recommended for progressive enhancements.

<link rel="stylesheet" href="granum.min.css">
<script src="granum.min.js" defer></script> <!-- optional -->

It is possible to include core styles and icons separately or skip icons completely.

<link rel="stylesheet" href="granum.core.min.css">
<link rel="stylesheet" href="granum.icons.min.css"> <!-- optional -->
<script src="granum.min.js" defer></script> <!-- optional -->

To make a page mobile-friendly and responsive, include the viewport meta tag into the <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Layout & Grid

Flexbox Rows

Use .row for horizontal layouts. Add .wrap to allow wrapping, and .gap for spacing.

Row options: .gap .mid .stretch .wrap .line .bord .resp .resp-s .vert .full .resize .scroll
Column 1: default .col-0 .col-1 .col-2 .col-3 .stick .scroll .push
Column 2: default .col-0 .col-1 .col-2 .col-3 .stick .scroll .shift

Column 1

Column 2
Text
Text
Text
Text

Auto-Filling Grid

Use .grid-* to create responsive grids that automatically fill available space based on minimum cell widths.

Column width: .grid-xs .grid-s .grid-m .grid-l .gap
Third column span: default .span-2 .span-3 .span-4

Cell 1

Cell 2

Cell 3

Cell 4

Columns

Use .columns-* for columns.

Column width: .columns-xs .columns-s .columns-m .columns-l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique purus nec erat suscipit, eget rhoncus ipsum porta. Donec ut enim quam. Nulla neque purus, convallis eget justo vitae, aliquam hendrerit velit. Mauris metus tortor, eleifend id nibh quis, maximus pharetra ante. In auctor neque vitae ultrices sagittis. Aliquam posuere purus ac vulputate commodo. Quisque aliquet velit in sem aliquet laoreet.

Stack

Use .stack to avoid outer margins. Use .stack.line to add borders between items.

Container style: .bord .pad
Stack style: none .stack .stack.line

Paragraph 1

Paragraph 2

Paragraph 3

Stick

Use .stick to stick an element to the top or bottom.

.stick

Header

Article

Splitter

Use .resize on child nodes of the same .row container.

Container styles: .resp .vert .full

Left column

Table
Value
Some very long text written to trigger horizontal scroll

Center
column

Right column

3. Typography & Content

Basic Elements

Text Link Unlink Bold Strong Italic Emphasis Ins ~~Del~~ Mark
Code Kbd Quote Cite Definition Small Abbr x_sub x^super

Block quote

Preformatted text
Code: var = value

Text

Sans serif Serif Monospace Small Regular-size Bold Middle

Align left

Align center

Align right

No auto wrap. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique purus nec erat suscipit, eget rhoncus ipsum porta.

Spacing

.fit .bord .rad .stripe .shade .pad .pads .mar .mars .center
Maximum width: .wide-xs .wide-s .wide-m .wide-l .wide

Div

Paragraph

Links and Buttons

.act .inact .nodec .link .neutral .success .icon-link .ic .bord .hover

Text Link Label

Images

.rad .c .center .wide .fit .inact

Tags, badges, progress

Tag Border Info Bg 1 Invert Small 8

Link 1 Link ⁸ Link ⁵

30% Default
40% Neutral
50% Note
60% Info
70% Success
80% Warning
90% Danger

Table

Style options: .bord .line .hover .wide .mid .fit .c .fix-head .fix-col

Name	Number	Date	String
Alice	0	01.07.2000	Coffee
Ben	100	02.02.2000	Water
Charlie	-22	01.07.2025	Juice
Dan	15	01.12.2024	Tea
Total	93

List

Style options:
.row .fit .resp .vert .gap .scroll .hover .mid .line .bread

Before

Alpha
Beta
Gamma
Delta
line

After

Pagination

Breadcrumbs

Home
Articles
About

Home
Articles
About

Card

.bord .rad .shade

Header

Contents
of
card

4. Colors & Theming

Semantic Colors

Apply contextual colors to text, backgrounds, or borders using utility classes.

.text .bg .bord .stripe .shade .hilite .rad .hover .act .tag .c

Default Note Information Success Warning Danger
Link Neutral Note Information Success Warning Danger
Link with icon Colored link with icon Colored icon only

Dark Mode

Invert the entire page or just specific element. Enable dark mode in your browser or OS. Or check the following checkboxes.

.invert example <div>
.invert entire page (JS sets html.invert)

Invert page (pure CSS using html:has(#invert:checked))

Example Info Link Bord Shade

Table

Info

5. Forms & Inputs

Grid Forms

Use .form.resp for aligned, responsive form layouts.

Form options: body.container div.container .form .resp .just .cling
Button position: .shift .span .wide .just-c .just-r
Button style: .inact .neutral .success .danger .bord .bg .text

Form validation

Inside .form, use .tip > .success, .tip > .danger after input for tips.
Use .form.lazy to show tips only after user interaction.
Use button.detect to enable the button only if the form is valid.

Validation mode: .lazy

Checkboxes & Switches

Standard Checkbox
Toggle Switch
Radio
Radio

Custom Select

Enhanced with JavaScript

Customized dropdown <select>-like input using [popover] and radio buttons.
JavaScript sets focus after opening, copies value to button's first span text and closes popover after selection, enables filtering.

Button options: .input .wide
Popover options: .resp .wide
List options: .hover
Label options: none .check .check.icon-text .check.icon-text.info
Radio options: .hide

Customized Inputs

Use .input wrapper for composite input.
Use .dropzone for file input to turn it in a drop zone.

INCORRECTOK

Input Types

Container options: inline .row.gap.mid.wrap .row.gap.vert

Contenteditable...

6. Interactive Components

Dropdown navigation

Style options: .hilite .mid .resp .vert .hover .click .gap .fit .line .scroll .scrollbar
Transition: none (.trans-off) .trans-slow .trans .trans-fast

Modals & Drawers

Pure CSS, no JavaScript required. Requires Invoker Commands API. Closes on Escape key, command button, or click outside. Has styleable ::backdrop. Traps focus. Autofocus. Nestable. Appearance transition. Show in hash :target match (with JS).

Mode of dialog: default modal .full .drawer .shift
Transition: none (.trans-off) .trans-slow .trans .trans-fast

Scrollable Dialog Example

Scrollable Dialog

Mode of dialog: default modal .full .drawer .shift .trans

Popups

Transition: none (.trans-off) .trans-slow .trans .trans-fast

Use [popover].

Tooltips

Tabs

Enhanced with JavaScript

Controlled via hash links.

Tabs
Tab 1
Tab 2

This is the content for Tab 1.

This is the content for Tab 2.

Toggle content with `:checked`

Use .check on the label or checkbox to toggle the following element.

Label 1 (with state)

Target content

Label 2 (free placement of target) ...

Target content

Toggle content with `:target`

Enhanced with JavaScript

Use .target on target element. Add .act on link for initially opened state. Add .mem on target element for state persistance. Add .toggle on hash link for JS enhancements (toggle off and avoid page jump).

Show target

Target content 1
Close

Show target (enhanced)

Target content 2
Close

Slider with `:target`

← One →

‹

Two

›

Three

Four

Gallery

Enhanced with JavaScript

Legacy Modals, Popups and Tooltips

Modals & Drawers with `:target`

Deprecated

Triggered via URL hash fragments. Pure CSS, no JavaScript required!

Open Modal Open Fullscreen Open Drawer

Popup disclosure

Using native <details> elements.

Before

Options ▾

Edit Item Delete Item

After

Popups on hover

Enhanced with JavaScript

Using a :hover state. Add .pos for automatic positioning with JS.

Style options: .pos (a popup window will be moved to the body on hover)

Before

Default

Info
Text

Nested

More info

After.

Tooltips with `[data-hint]`

Deprecated

Hover over me Or me

7. Utilities

Visibility

.hide .show

Revert element's display to default (block for div)

Responsive Display Toggles

Show/hide elements based on viewport or .container width. Resize your browser window or container to see them appear/disappear.

Viewport: Not large Not medium Not small

Container: Not large Not medium Not small

JavaScript detection

Show/hide elements based on JavaScript availability.

JavaScript disabled

JavaScript enabled

Printable

Hide elements when printing.

This will not be printed

8. Icons

Compact icons using `mask-image`

Icons animation

Animation type: none .anim-spin .anim-blink .anim-pulse .anim-flip .anim-turn .anim-swing

Icons toggle

Some icons switch in active mode (.act, :has(+:target), .check:has(:checked), [open]>summary). Click icons to toggle.

9. JavaScript Functionality

Requires JavaScript

Dynamic Class Toggling (`[data-nodes]`)

Toggle CSS classes on target elements based on input state.

Highlight Target No shadow (reverse action) Serif

This div will get 'success', 'bord', 'shade', 'serif' classes when checked

Toggle sub-list (`#open`)

Style options: .fit

Color
- Red
- Green
- Blue
Font
- Serif
- Sans
- Mono

List filtering

Add .keep to a list item to exclude it from filtering.

Emits granum-filter event.

1 One
2 Two
3 Three
4 Four
5 Five: keep

Table Sorting & Filtering

Click the headers to sort, or type in the search box to filter.

Add .keep to a row to exclude it from filtering.

Emits granum-filter and granum-sort events.

Name	Number	Date	String
Alice	0	01.07.2000	Cafe
Dan	150.50 km	2024-12-01	café
ben	150.15 km	02.02.2000	café
Charlie	-22	7/1/2025	coffee
No name		-

Dialogs

Confirm Prompt

State Persistence (`.mem`)

Type something below, then refresh the page. Input values and details state are saved to the localStorage.

Remember this checkbox state

Show details

The details

Populate inputs from URL (`[data-get]`)

Click to populate or clear inputs.

Check multiple boxes

Toggle the following boxes

Manage Items

Operates on closest div, ul, tr parent by default. To override, define selector in [data-item] (for closest parent) or in [data-src] (global selector). To keep at least one item, add .keep to the #item-del link.

Emits granum-manage event.

Add item as a copy of hidden <li>.

Drag Items

Use .drag-container, table, ul as container, .drag-item for items, and a[href="#drag"] for handler. For correct work on touch devices, .drag-container is strictly required.

Emits granum-drag event.

One

Two

Three

One
Two
Three

	One
	Two
	Three

Copy input value

Copy
Text to copy Copy

Show password

Show

Synchronize textarea and contenteditable

Go back

Back

10. Events

All granum-* custom events bubble and are cancelable.

Filter

Occurs after filtering a list or table.

type: granum-filter
target: Items container (list or table)
detail.query: Filter string
detail.found: Matching items count

Sort

Occurs after sorting a table.

type: granum-sort
target: Sorted column header
detail.order: 1 for ascending, -1 for descending

Drag

Occurs after applying a drag sort.

type: granum-drag
target: Items container
detail.item: Dragged item

Manage

Occurs after managing items.

type: granum-manage
target: Items container
detail.action: Action (del for delete, up for move up, down for move down, copy for create a copy)
detail.item: Managed item (for copy action contains source item)
detail.copy: Created item (only for copy action)

Granum v2.4.0

1. Getting Started

2. Layout & Grid

Flexbox Rows

Auto-Filling Grid

Columns

Stack

Stick

Splitter

3. Typography & Content

Basic Elements

Text

Spacing

Links and Buttons

Images

Tags, badges, progress

Table

List

Pagination

Breadcrumbs

Card

4. Colors & Theming

Semantic Colors

Dark Mode

5. Forms & Inputs

Grid Forms

Form validation

Checkboxes & Switches

Custom Select

Customized Inputs

Input Types

6. Interactive Components

Dropdown navigation

Modals & Drawers

Scrollable Dialog

Popups

Tooltips

Tabs

Toggle content with :checked

Toggle content with :target

Slider with :target

Gallery

Modals & Drawers with :target

Modal Title

Popup disclosure

Popups on hover

Tooltips with [data-hint]

7. Utilities

Visibility

Responsive Display Toggles

JavaScript detection

Printable

8. Icons

Compact icons using mask-image

Icons animation

Icons toggle

9. JavaScript Functionality

Dynamic Class Toggling ([data-nodes])

Toggle sub-list (#open)

List filtering

Table Sorting & Filtering

Dialogs

State Persistence (.mem)

Populate inputs from URL ([data-get])

Check multiple boxes

Manage Items

Drag Items

Copy input value

Show password

Synchronize textarea and contenteditable

Go back

10. Events

Filter

Sort

Drag

Manage

Toggle content with `:checked`

Toggle content with `:target`

Slider with `:target`

Modals & Drawers with `:target`

Tooltips with `[data-hint]`

Compact icons using `mask-image`

Dynamic Class Toggling (`[data-nodes]`)

Toggle sub-list (`#open`)

State Persistence (`.mem`)

Populate inputs from URL (`[data-get]`)