Granum Basic

CSS micro framework.
Minimal version of Granum

Ultra compact set of styles for basic web pages.

v1.2.128

2 KB minified and gzipped.

Docs GitHub CDN

npm install granum

Typography

Text, links, code, quotes, lists, colors, modifiers. Minimal styling.

Tables

Borders, width, alignment.
Hoverable, scrollable.

Grids

Responsive grids.
Navigation bars.

Forms

Inline, stacked, aligned, responsive forms.
Inputs, buttons, validation.

Typography ↑

Text Link No-link Code Kbd Quote Small Mark Abbr xsub xsuper

Block quote
Preformatted text
Some code with var
Heading

Heading 1

Some text.

Heading 2

Some text.

Heading 3

Some text.

Heading 4

Some text.
Heading 5
Some text.
Heading 6
Some text.
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
Modifiers
Classdiva.rowtableform
.fit
No (margin, padding, border, radius),
1rem, smaller inner margins
***dense*
.mar
Margin
*****
.bord
Border
*****
.pad
Padding
**h-gapline*
.mid
Centrify vertically
--valign row, itemvalign table, tr, td-
.l
Align
alignright marginv-gap, align itemwide*
.resp
Responsive component
--stackstackstack
.act
Active link, input validation
-color--validation
.hover
Shade on hover
**ul atr-

Lists ↑

  • Basic
  • List
    • Sub
    • Item
  • Last
  1. Ordered
  2. List
    1. Sub
    2. Item
  3. Final
Term
Definition
Word
Describe
Explain

Tables ↑

NameAreaPeople
Europe 10.2 0.7
Asia 44.6 4.6
Africa 30.4 1.3
North America 24.7 0.6
South America 17.8 0.43
Australia 8.6 0.04
Antarctica 14 0
Σ150.37.6

Grids ↑

Auto
One
Two middle
Three
text
text
User Name
⇄ Europe ↻ 25.01.2021

Forms ↑

  This is inline form


Required OK

Input types
Fieldset




Radio


Buttons

Link Text

Inside p

Inside .grid
Inside table

Interactive ↑

Toggle

Excluded in granum-basic.css:
.bar .tag .tabs .drawer .stick .full .pic .modal table.resp .rad