Granum

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

~16 KB minified and gzipped.
With icons, components and some JavaScript.

Core CSS is only ~8 KB gzipped.
Without icons and JavaScript.

Docs

Usage

npm

npm install granum

Manual

Download and include bundled styles and scripts from dist directory.

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

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/granum@2">
<!-- optional -->
<script src="https://cdn.jsdelivr.net/npm/granum@2/dist/granum.min.js" defer></script>

or

<link rel="stylesheet" href="https://unpkg.com/granum@2">
<!-- optional -->
<script src="https://unpkg.com/granum@2/dist/granum.min.js" defer></script>

Features

• lightweight
• modern
• responsive
• mobile friendly
• semantic
• valid
• cross-browser
• neutral style
• dark mode
• customizable theme using CSS variables
• no floats
• no hacks
• JavaScript is optional for enhancements

Components

• interactive components: modal, drawer, dropdown, popup, tooltips, tabs, gallery, slider
• responsive layouts: flex, grid, columns, dropdown, form
• scrollable table with fixed headers and first column
• tags, badges, progress
• mask-image SVG icons (100+)

Forms

• validation
• custom switch
• custom select
• custom input wrapper
• dropzone

Utility classes

• semantic colors
• spacing
• typography
• conditional visibility

JavaScript functionality

• toggle CSS class
• filter table and list
• sort table
• align table columns
• drag sort
• manage items (add, delete, reorder)
• persistent details state
• persistent input values
• populate inputs from URL
• check group of checkboxes
• alert, confirm, prompt
• password visibility
• copy to clipboard
• escape key
• customize CSS vars

Browser support

Modern browsers.

License

MIT