Milligram

What Is Milligram?

Milligram is a minimalist, lightweight CSS framework built for developers who want sensible default styling without the weight, complexity, or visual opinionation of larger toolkits. Rather than shipping a sprawling component library with dozens of pre-built widgets, Milligram focuses on a small, carefully chosen set of styles that make plain HTML look clean and modern out of the box, while staying small enough that it barely registers in a page's payload.

The framework is best understood by its defining characteristic: size. Milligram is famous for being extremely small in its minified and gzipped form, advertised by its creator as only around two kilobytes when compressed. That figure is the entire pitch. Where a full-featured framework might add tens or hundreds of kilobytes of CSS, Milligram aims to give you typographic polish, a responsive grid, and lightly styled form and button elements for a footprint so small it is effectively free in performance terms.

Milligram is open source and released under the permissive MIT license, created by Cristian Bote and maintained as a community project. It is not a product you sign up for, not a SaaS, and not a browser extension. It is a single CSS file (with an accompanying normalize layer) that a developer links into a page, either from a content delivery network or as a local asset bundled with the rest of the site's styles.

It is important to position Milligram accurately against its peers. It belongs to the family of "classless" or near-classless lightweight frameworks, alongside tools like Pico CSS, that style semantic HTML elements directly rather than asking you to memorize a large vocabulary of utility classes. Milligram does provide a handful of helper classes, most notably for its grid and button variations, but the philosophy is to keep markup clean and let the browser's default elements do most of the work. That makes it a natural fit for documentation, prototypes, personal sites, and small projects where a designer wants a tasteful starting point rather than a heavy design system to wrangle.

How Milligram Works

Milligram works by providing a thin layer of opinionated defaults on top of normalized browser styles. It is built to be paired with Normalize.css, which smooths out the inconsistencies between browsers' default stylesheets, and then layers its own typography, spacing, and element styling on top. The result is that a page of ordinary HTML, headings, paragraphs, lists, links, tables, and forms, immediately looks intentional and readable without any extra markup.

The framework leans heavily on modern CSS fundamentals. Its grid system is built with flexbox, exposed through a small number of classes such as .container, .row, and .column. You compose layouts by declaring rows and columns, and the flexbox engine handles distribution and responsiveness. Because it uses flexbox rather than a custom float-based system, the grid is concise and behaves predictably across breakpoints.

Typography is a core concern. Milligram sets a comfortable base font size, line height, and vertical rhythm, and it standardizes the appearance of headings so that a document hierarchy reads cleanly. It styles links, blockquotes, code, and tables with restrained defaults. Form controls, inputs, textareas, selects, and buttons, receive consistent padding, borders, and focus states, which is often the most tedious styling to write by hand and one of the most valuable things a small framework can provide.

Buttons illustrate Milligram's approach to variation. Instead of a large set of color and size modifiers, it offers a few utility classes such as .button-outline and .button-clear to produce alternative button styles, keeping the surface area small. Color theming is intentionally limited; Milligram defines a primary accent and expects you to override its variables or styles if you want a different palette.

Because Milligram is just CSS, there is no build step required to use it, no JavaScript runtime, and no configuration file. A developer links the stylesheet, writes semantic HTML, and optionally adds the grid and button helper classes where needed. For teams that do use a build pipeline, Milligram is distributed through package managers and can be imported into a bundler like any other CSS dependency, but the framework imposes nothing on that toolchain. This zero-friction model is exactly why it appears so often in quick demos, code sandboxes, and starter templates.

How to Tell if a Website Uses Milligram

Because StackOptic analyzes a URL from the server side, it inspects the same signals you can check by hand with browser tools or by viewing source. Minimalist CSS frameworks are generally harder to fingerprint than large, opinionated ones, because they add so little markup, but Milligram still leaves recognizable traces.

Stylesheet filename and CDN path. The strongest signal is a link to Milligram's stylesheet. Sites loading it from a CDN commonly reference a path containing milligram and a version, for example a cdnjs or jsdelivr URL ending in milligram.min.css. Seeing a stylesheet literally named milligram.min.css in the page's <head> is close to definitive.

The companion Normalize.css link. Milligram's documentation pairs it with Normalize.css, so pages often load normalize.css immediately before the Milligram stylesheet. That ordering, a normalize layer followed by milligram.min.css, is a recognizable pattern.

Characteristic grid classes. Look in the rendered HTML for the .container, .row, and .column class structure. While these names are generic enough that other frameworks use similar ones, in combination with the stylesheet link they reinforce the conclusion.

Button helper classes. The presence of .button-outline or .button-clear on anchor or button elements is a Milligram-flavored signal, since those specific modifier names are part of its small button vocabulary.

Here is how to check each signal yourself:

Method	What to do	What Milligram reveals
View Source	Right-click, "View Page Source"	A <link> to milligram.min.css, often preceded by normalize.css
Browser DevTools	Open the Network tab and the Elements panel	The Milligram stylesheet request and .container/.row/.column classes in the DOM
curl -s	Run `curl -s https://example.com	grep -i milligram`
Wappalyzer	Run the extension on the live page	May identify "Milligram" under UI frameworks when the CDN path is present
BuiltWith	Look up the domain	Possible historical and current detection of the framework

A fast command-line check is curl -s https://example.com | grep -i "milligram". If that returns a stylesheet link, you are almost certainly looking at a Milligram-styled page. For a broader methodology, see our guide on how to find out what technology a website uses.

It is worth being honest about the limits of detection here. Because Milligram is so small, some developers copy its CSS directly into their own bundle or rename the file, which removes the obvious milligram.min.css link. When that happens, the framework effectively becomes invisible to filename-based detection, and you are left inferring it from the characteristic grid and button class names plus the visual style, which is far less certain. This is a general truth about minimal and classless frameworks: the less markup a tool adds, the harder it is to fingerprint, and a confident answer often depends on the stylesheet still being loaded under its recognizable name. Server-side analysis helps because it fetches the unmodified HTML and its linked assets directly, making any surviving CDN reference easy to spot. If you want to compare the fingerprinting difficulty of utility-first tools, our piece on how to tell if a website uses Tailwind CSS is a useful companion. You can also examine the colors and type a site uses with how to find what fonts and colors a website uses.

Key Features

• Tiny footprint. Advertised at roughly two kilobytes gzipped, making it one of the smallest CSS frameworks available and effectively free in performance terms.
• Flexbox grid. A concise responsive grid built on flexbox using .container, .row, and .column classes.
• Clean typography. Sensible defaults for font size, line height, headings, and vertical rhythm that make plain HTML read well.
• Styled forms and buttons. Consistent, restrained styling for inputs, selects, textareas, and buttons, including outline and clear button variants.
• Normalize.css foundation. Built to pair with a normalize layer for cross-browser consistency.
• No JavaScript and no build step. Pure CSS that you link and use immediately, with optional package-manager distribution for bundlers.
• MIT licensed and open source. Free to use, modify, and self-host without restriction.

Pros and Cons

Pros

• Extremely small and fast, with negligible impact on page weight and load time.
• Almost no learning curve; semantic HTML plus a handful of grid and button classes.
• Produces a clean, modern look without the heavy visual identity of larger frameworks.
• Ideal for prototypes, documentation, and small projects where simplicity is the goal.

Cons

• Minimal component set; no dropdowns, modals, navbars, or other complex UI out of the box.
• Limited theming options compared with frameworks built around design tokens.
• Less actively maintained and updated than larger, better-funded projects.
• Not suited to large applications that need a comprehensive, systematized design language.

Milligram vs Alternatives

Milligram sits at the lightweight, low-opinionation end of the CSS framework spectrum. The table below compares it with common alternatives.

Framework	Approach	Size	Best for
Milligram	Lightly opinionated, near-classless	Tiny (about 2 KB gzipped)	Prototypes, docs, small sites wanting clean defaults
Pico CSS	Semantic, class-light	Small	Semantic HTML projects wanting elegant defaults
Pure CSS	Modular, utility-leaning	Small, modular	Projects that want to include only specific modules
Bootstrap	Component-rich, class-heavy	Large	Applications needing a full component library
Tailwind CSS	Utility-first	Varies (purged)	Teams building bespoke designs from utilities

If you suspect a site uses a different lightweight option, the same techniques apply; compare Milligram with the semantic Pico CSS or the heavier, component-rich Bootstrap to see where each fits. Our guide on how to tell if a website uses Bootstrap shows how a larger framework's fingerprints differ.

Use Cases

Milligram is most at home where simplicity and speed matter more than a rich component set. Developers reach for it when building documentation sites, where readable typography and a clean default look are the priority and heavy UI components would only get in the way. It is a frequent choice for quick prototypes and proofs of concept, because it makes a rough HTML page presentable in seconds without any configuration.

It also suits personal websites, portfolios, and small landing pages where the author wants tasteful defaults without committing to a large framework. Coding tutorials and example projects often use Milligram precisely because it is small enough to include without distracting from the lesson. For developers who dislike utility-class soup and prefer to write semantic markup, Milligram offers a comfortable middle ground: more styling than a bare browser default, far less ceremony than a class-heavy system.

Consider a few concrete scenarios. A developer writing technical documentation for an open-source library might link Milligram so the docs look clean and professional with zero design effort, leaving them free to focus on the content. A hackathon team racing to ship a demo might use it to make their app presentable in the final hours without burning time on CSS. An engineer building a personal blog or a simple marketing page for a side project might choose Milligram to keep the page featherweight and fast. In each case the common thread is a desire for a clean baseline with the smallest possible cost.

From a technology-research perspective, detecting Milligram on a site is a small but informative signal. It tends to indicate a developer-built, performance-conscious, or deliberately minimal project rather than a marketing site assembled by a design team. That context can help when profiling the kind of organization or individual behind a domain, and surfacing it automatically across many sites is exactly the sort of insight a detection tool provides in seconds.

Frequently Asked Questions

Is Milligram still maintained in 2026?

Milligram is a mature, stable project rather than a rapidly evolving one. Because it is so small and focused, it does not need frequent updates the way a large framework does; its core set of styles has remained largely consistent for years. As an open-source MIT-licensed project it can be self-hosted and used freely regardless of release cadence, though teams that want very active development and a large community may prefer a more heavily maintained alternative.

How can I tell if a website uses Milligram for free?

Yes, it is free to check. View the page source and look for a <link> referencing milligram.min.css, often loaded from a CDN like cdnjs or jsDelivr and frequently preceded by a normalize.css link. You can also run curl -s URL | grep -i milligram from any terminal, or use a browser extension like Wappalyzer. Bear in mind that if a developer has inlined or renamed the CSS, the obvious filename signal may be absent.

What is the difference between Milligram and Bootstrap?

The difference is scope. Bootstrap is a large, component-rich framework with a full vocabulary of classes and ready-made UI elements like navbars, modals, and carousels, suited to building complete application interfaces. Milligram is the opposite: a tiny stylesheet that lightly styles semantic HTML and offers only a flexbox grid and a few button variants. You choose Milligram when you want clean defaults at almost no cost, and Bootstrap when you need a comprehensive component library.

Does Milligram require JavaScript?

No. Milligram is pure CSS and has no JavaScript dependency. Everything it provides, typography, the flexbox grid, form and button styling, is delivered through its stylesheet. This is part of what keeps it so small and fast. If you need interactive components such as dropdowns or modals, you would add your own JavaScript or use a separate library, since Milligram deliberately does not include behavioral code.

Can Milligram be customized?

Yes, within its minimalist philosophy. Because it is plain CSS, you can override its styles in your own stylesheet, adjust its variables, or extend it with additional rules. It does not, however, ship an extensive theming or design-token system like some modern frameworks, so deep customization means writing your own CSS on top of it rather than configuring a build. For small projects that level of control is usually more than enough.

Want to identify Milligram and the rest of a site's stack automatically? Run any URL through StackOptic at https://stackoptic.com.