Granum v2.4.3

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">

Layout & Grid

Flexbox Rows

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

Wrapper: .container
Row modifiers: .gap .mid .stretch .wrap .line .bord .resp .resp-m .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

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

Columns

Use .columns-* for columns.

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

Stack

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

Wrapper modifiers: .bord .pad
Stack modifiers: none .stack .stack.line

Stick

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

.stick

Splitter

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

Wrapper: .container
Row modifiers: .resp .resp-m .vert .full

Spacing

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

Typography & Content

Basic Elements

Preformatted text
Code: var = value

Text

Links and Buttons

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

Images

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

Tags, badges, progress

Table

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

List

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

Pagination

Breadcrumbs

Card

.bord .rad .shade

Colors & Theming

Semantic Colors

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

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

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)

Forms & Inputs

Grid Forms

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

Wrapper: <body> container
Form modifiers: .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

Floating Labels

For floating labels, put input (or textarea) and label inside .input and add single space placeholder.

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.

Modifiers for complex select:
Button modifiers: .input .wide
Popover modifiers: .resp .wide
List modifiers: .hover
Label modifiers: none .check .check.icon-text .check.icon-text.info
Radio modifiers: .hide

Customized Inputs

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

Input Types

Wrapper modifiers: inline .row.gap.mid.wrap .row.gap.vert

Interactive Components

Dropdown navigation

Wrapper: .container.resize
Modifiers: .hilite .mid .resp .resp-m .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

Popups

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

Use [popover].

Tooltips

Tabs

Enhanced with JavaScript

Controlled via hash links.

Toggle content with :checked

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

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, avoid page jump, optionally restore state with .mem).

Slider with :target

← One →

‹

Two

›

Three

Four

Gallery

Enhanced with JavaScript

Gallery (pure CSS)

Gallery (pure CSS, no container)
Gallery (with JS enhancements: previous, next, Escape key)

Utilities

Visibility

.hide .show

Responsive Visibility

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

JavaScript Detection

Show/hide elements based on JavaScript availability.

Printable

Hide elements when printing.

Icons

Iconset using mask-image

Modifiers: .inact .hover .small
Color: none .link .neutral .note .success .info .warning .danger
Animation: none .anim-spin .anim-blink .anim-pulse .anim-flip .anim-turn .anim-swing

Icons animation

Animation: 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.

JavaScript Functionality

Requires JavaScript

Class Toggling ([data-nodes])

Toggle CSS classes on target elements based on input state.

Toggle sub-list (#open)

Modifiers: .fit

List filtering

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

Emits granum-filter event.

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.

Dialogs

State Persistence (.mem)

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

Populate inputs from URL ([data-get])

Check Multiple Checkboxes

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.

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.

Copy input value

Show Password

Synchronize Textarea and Contenteditable

Go Back

Events

All granum-* custom events bubble and are cancelable.

Filter list or table

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 table

Occurs after sorting a table.

type

granum-sort

target

Sorted column header

detail.order

1 for ascending, -1 for descending

Drag item

Occurs after applying a drag sort.

type

granum-drag

target

Items container

detail.item

Dragged item

Manage items

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)