# Milligram — Minimalist CSS Framework in Just 2KB

> Milligram provides a minimal set of styles for fast and clean starting points, weighing only 2KB gzipped with a mobile-first flexbox grid and clean typography.

## Install

Save as a script file and run:

# Milligram — Minimalist CSS Framework in Just 2KB

## Quick Use
```html
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
```
```bash
npm install milligram
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-8f661247
Author: Script Depot