Milligram — Minimalist CSS Framework in Just 2KB

Introduction

Milligram is an ultra-lightweight CSS framework that provides just enough styling to look clean without imposing opinions. At only 2KB gzipped, it is ideal for prototypes, documentation sites, and projects where minimal overhead matters.

What Milligram Does

• Provides a responsive 12-column flexbox grid system
• Styles typography, buttons, forms, lists, tables, and blockquotes
• Applies a consistent baseline with sensible defaults for HTML elements
• Ships with both minified CSS and Sass source for customization
• Stays out of the way by avoiding utility classes or JavaScript dependencies

Architecture Overview

Milligram is pure CSS with no JavaScript component. The source is written in Sass and compiled to a single stylesheet. The grid uses flexbox with .container, .row, and .column classes. Every component follows a minimal-markup philosophy: standard HTML elements receive default styling, reducing the need for custom class names.

Installation & Configuration

• Install via npm: npm install milligram or link from a CDN
• Import the Sass source to override variables like $color-primary and $font-family
• No build step required for the precompiled CSS version
• Normalize.css is included as a dependency for cross-browser consistency
• Works with any templating language or static site generator

Key Features

• 2KB gzipped footprint keeps page loads fast
• Mobile-first responsive grid based on flexbox
• Clean typography using the Roboto font by default
• Form elements styled consistently across browsers
• Easy to extend or override thanks to flat specificity

Comparison with Similar Tools

• Water.css — classless approach that styles bare HTML; Milligram adds a grid and utility elements
• Pico CSS — similar minimal philosophy with dark mode; Milligram is smaller and more established
• Bulma — full-featured framework at 200KB+; Milligram trades features for extreme lightness
• Skeleton — similar lightweight ethos but unmaintained; Milligram uses modern flexbox
• Bootstrap — comprehensive framework with JS components; Milligram focuses on CSS-only minimalism

FAQ

Q: Does Milligram include JavaScript? A: No. It is CSS-only, so there is no JS dependency and no interactive components like modals or dropdowns.

Q: Can I customize the colors and fonts? A: Yes. Import the Sass source and override variables like $color-primary, $color-secondary, and $font-family before compilation.

Q: Is Milligram suitable for production applications? A: It works well for content-heavy sites, dashboards, and internal tools. Complex UIs with many interactive patterns may need a more feature-rich framework.

Q: How does Milligram compare in size to Tailwind CSS? A: Tailwind's full build is much larger, though purging reduces it. Milligram's 2KB is smaller than even a purged Tailwind build for most projects.

Sources

• https://github.com/milligram/milligram
• https://milligram.io/