Granum

CSS micro framework.

Ultra compact set of styles and behaviours for basic web pages.

v1.2.128

3 KB minified and gzipped.
12 KB with icons and components.

Docs GitHub CDN

npm install granum

Drawer

More horizontal

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

More vertical

text

text

text

text

text

text

text

text

text

text

text

text

text

text

text

text

text

text

Typography

Text, links, code, quotes, lists, colors, tags, badges, bars, modifiers. Dark mode. Minimal styling.

Tables

Sort, filter rows. Borders, width, alignment, hover. Responsive, scrollable. Fixed headers, footers, first column.

Grids

Responsive, regular, fractional grids. Cell widths, gaps, wrapping.

Forms

Inline, stacked, aligned, responsive forms. Inputs, buttons, lookups, calendar, validation, restore.

Interactive

Toggle, modal, dropdown, popup, tooltip, drawer, topbar, tabs, gallery, tree. Responsive classes. Copy items. Drag sort. Splitter.

Icons

32 general purpose simple SVG icons.
Extended iconset with 80 icons.

Typography

Text Link No-link Code Kbd Quote Small Mark Abbr x_sub x^super

Block quote

Preformatted text
Code: window.innerWidth = , window.devicePixelRatio =

Heading

Heading 1
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 2
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 3
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 4
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 5
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 6
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Font

Small Regular Larger Large Largest
Sans-serif Serif Mono

Color

Error Warning Success Info Note
Error Warning Success Info Note
Error Warning Success Info Note
8 ERR WARN OK INFO NOTE

Colorize icon and text Colorize only icon

	 Badge9
	Users3
	Texts5
	Errors8
	Warnings
	Messages99+
	Notes1000
  

Link With icon42

Invert

Text Link No-link Mark Abbr .inv a.inv .inv.bg OK

Text Link No-link Mark Abbr .inv a.inv .inv.bg OK

Text Link No-link Mark Abbr .inv a.inv .inv.bg OK

Modifiers

Class	div	ul	a	.row	table	form
.fit No (margin, padding, border, radius, list-style), 1rem, smaller inner margins	*	*	*	*	dense	*
.mar Margin	*	*	*	*	*	*
.bord Border	*	*	*	*	*	*
.pad Padding	*	*	*	h-gap	line	*
.mid Centrify vertically	-	-	-	valign row, item	valign table, tr, td	-
.l Align	*	horizontal	right margin	v-gap, align item	wide; .roll.l=fixHeight	*
.resp Responsive component	-	*	scroll into view	stack	stack	stack
.act Active link, input validation	-	-	color	.drop on focus	-	validation
.hover Shade on hover	*	*	*	ul a	tr	-
.stack No edge margins	*	*	-	-	*	-

Lists

Basic
List
- Sub
- Item
Last

Ordered
List
1. Subitem
2. Item
Final

Term: Definition
Word: Describe; Explain

Tables

	Name	Area	People	Cities
	Europe	10.2	0.7	Istanbul, Moscow, London, Paris
	Asia	44.6	4.6	Tokyo, Delhi, Shanghai, Mumbai
	Africa	30.4	1.3	Cairo, Lagos
	North America	24.7	0.6	Mexico, New York
	South America	17.8	0.43	Sao Paulo, Buenos Aires
	Australia	8.6	0.04	Sydney
	Antarctica	14	0
	Σ	150.3	7.6

Features by file

File and features	Source size
granum-basic.css typography, colors, lists, table, simple responsive grid and navbar, responsive forms, buttons, toggle	6.0k
granum.css everything mentioned above plus: bars, tags, modals, tabs, drawer, sticky, full height	9.0k
granum.js check all boxes, align table columns, sort table, confirm link and form, prompt link, togglers, toggle classes, responsive classes, add/remove/order items	5.8k
granum-icons.css 32 SVG icons as CSS background	7.7k
granum-grid.css advanced responsive grid	1.3k
granum-dropdown.css dropdown menu, popups, tooltips	1.4k
granum-dialog.js custom alert, confirm, prompt	2.2k
granum-restore.js restore input values from URL or from local storage	1.7k
granum-gallery.js image gallery	1.2k
granum-lookup.js (requires granum-dropdown.css) lookup input	3.5k
granum-calendar.js (requires granum-dropdown.css) date input	3.5k
granum-edit.js visual text editor	3.6k
granum-drag.js drag sort	1.5k
granum-full.css + granum-full.js everything mentioned above	36k 19.6k + 22.9k

Grids

First
Second
Subtitle
Third

Auto

One

Two middle

Three
text
text

User Name

Europe 25.01.2021

Full height

Centered

Advanced grid

Grid type Padding

A

B

C

D

One
Two
Three
More

Sticky header and footer

Header

First line

Line

Line

Line

Line

Line

Line

Line

Line

Line

Line

Line

Line

Line

Last line

Stack

Stacked paragraph one.

Stacked paragraph two.

Stacked paragraph three.

Stacked div one.

Stacked div two.

Stacked div three.

Splitter

Mode

First item (article.col-2)

Second item (div)

Third item
3

Fourth item
4

Fifth item
5

Fixed scrollable layout

Header

Name	Number	Note
Alpha	1	WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
Beta	2	-
Gamma	3	-
Delta	4	-
Epsilon	5	WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
Total	15	-

Forms

Alternative form layouts

Interactive

Native:
Confirm
Prompt

Toggle Toggle+scroll Modal Drawer Topbar

Target

Pop

Info-topHint top

Pop left

Info-right Hint right

* Expandable tree (auto, [id].mem)
- Subtree (auto)
  - Local link
  - External link
  - Text
- Item
Expandable tree (toggle mem)
- Alpha
- Beta
- Gamma

Tools	Item	Status

Toggle class

Responsive
Link
Check
Radio
Select

Switch Item 1 Item 2

Check Item 1 Item 2

Off On Item 1 Item 2

Item 1 Item 2

Small Medium Large

Drag

Icons

Extended iconset

Add-ons

Drag me

Draggable content

Fill text.

Fill text.