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.
npm install granum
Drawer
Scroll test
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
xsub
xsuper
Block quote
Preformatted text
Code: window.innerWidth = , window.devicePixelRatio =
Heading
Longer headings · Longer texts
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
Sans-serif Serif Mono
Color
Error Warning Success Info Note
Error Warning Success Info Note
8 ERR WARN OK INFO NOTE
Colorize icon and text Colorize only icon
Invert
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
Unordered list test
- Basic
- List
- Sub
- Item
- Last
Ordered list test
- Ordered
- List
- Subitem
- Item
- Final
Definition list test
- Term
- Definition
- Word
- Describe
- Explain
Tables
Style
Sortable
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
text
text
Full height
Sticky header and footer
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.
Splitter
Splitter test
First item (article.col-2)3
4
5
Forms
Alternative form layouts
Interactive
Toggle Toggle+scroll Modal Drawer Topbar
Target
Scroll test
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
- * Expandable tree (auto,
[id].mem
)- Subtree (auto)
- Local link
- External link
- Text
- Item
- Subtree (auto)
- Expandable tree (toggle mem)
- Alpha
- Beta
- Gamma
Toggle class
Drag
Icons
- menu
- list
- grid
- more
- find
- config
- user
- share
- edit
- add
- delete
- refresh
- ok
- info
- warning
- ban
- up
- down
- left
- right
- folder
- file
- image
- download
- copy
- chart
- pin
- time
- send
- lock
- world
Extended iconset
ShowAdd-ons
Fill text.
Fill text.