Skip to content
Get packs

Guide · Open source

How to use Milligram: install and add it to a page

Updated · written with AI from the project's own documentation and checked against our catalogue data

Milligram is a minimalist CSS framework: a small set of ready-made styles for headings, buttons, forms, tables and grids, so a simple page looks reasonable without much custom CSS. This guide shows how to install it with npm, Yarn or Bower and what it is and is not designed to do. By the end you will know whether it fits a simple site or prototype and how to start using it.

Milligrammilligram/milligram · ★ 10.2k · MIT

Quick start

  1. 1Install the package. Run npm install milligram, yarn add milligram or bower install milligram in your project folder.
  2. 2Find the stylesheet. Open the installed milligram package folder and locate its CSS file.
  3. 3Link it in your page. Reference the stylesheet from the head of your HTML page.
  4. 4Write plain HTML. Use standard headings, buttons, forms, tables and grid markup, which Milligram styles without extra classes.
  5. 5Check the reference examples. Compare your markup with the sections and examples at milligram.io.
  6. 6Test in a browser. Open the page and confirm the styles apply as expected.

What Milligram is and what it covers

Milligram is a minimal setup of styles for a fast and clean starting point. The project describes it as not being a UI framework, so it does not ship a large library of ready-made components such as dropdowns or modals.

The README says the library is only 2kb gzipped and was designed for better performance and fewer properties to reset. The documentation's table of contents lists the areas it styles: typography, blockquotes, buttons, lists, forms, tables, grids, code and utilities.

  • Typography, blockquotes, buttons and lists
  • Forms, tables and grids
  • Code and utilities
  • Browser support and examples are documented on the project site

Install Milligram with npm, Yarn or Bower

The README lists three package-manager install options. Pick the one your project already uses. Milligram is installed through a package manager, so you need npm, Yarn or Bower available on your machine.

  • npm: npm install milligram
  • Yarn: yarn add milligram
  • Bower: bower install milligram
npm install milligram

Add Milligram styles to your web page

Once installed, you include the Milligram stylesheet in your HTML so its styles apply to your headings, buttons, forms and tables. The README does not give a full link-tag example, so check the package files and the documentation at milligram.io for the exact stylesheet path to reference in your project.

Write your page with normal HTML elements. Milligram styles the elements themselves, so you do not need to add many classes to get a reasonable look.

  • Install the package with one of the commands above
  • Locate the stylesheet inside the installed package folder
  • Reference that stylesheet from your page's head
  • Write plain HTML and check the result in a browser

Use the grid, buttons and forms

Milligram documents grids, buttons and forms as separate sections on its site. Use the examples at milligram.io as the reference for markup, since the README itself only lists the section names and does not reproduce the markup.

If you want to reduce CSS resets, Milligram is designed so there are fewer properties to override, which keeps your own stylesheet smaller.

  • Grids: documented under the Grids section at milligram.io
  • Buttons: documented under the Buttons section
  • Forms: documented under the Forms section
  • Tables: documented under the Tables section

When Milligram is the wrong choice

Milligram is not the right tool if you need many ready-made interface components. The README states it is not a UI framework. It also requires editing HTML and CSS, so it does not suit someone who wants a no-code site builder.

The latest release shown in the source is v1.4.1, and the README does not describe a maintenance schedule. Teams that depend on frequently updated tooling should weigh that before adopting it.

  • Need dropdowns, modals or other full components: consider a larger kit
  • Want a no-code builder: Milligram requires HTML and CSS editing
  • Need actively maintained tooling with a stated schedule: check the project's activity first

What people use it for

  • A simple personal or small business website that needs a clean base look
  • A quick prototype where you want readable forms, buttons and tables fast
  • A project where small CSS file size matters
  • A site where you want to write your own HTML with minimal framework styling

Frequently asked questions

Is Milligram free to use?

Milligram is licensed under the MIT License, as stated in the README. The MIT License is a permissive open-source licence; read the licence text for the terms that apply to your project.

How do I install Milligram?

Install it through a package manager: npm install milligram, yarn add milligram or bower install milligram. The README lists these three options.

What are the requirements for Milligram?

The README lists npm, Yarn or Bower as the prerequisites for installing it. You also need to be comfortable editing HTML and CSS, since the project does not offer a no-code builder.

How big is Milligram?

The README says it is only about 2kb gzipped. That figure comes from the project's own description.

What are good alternatives to Milligram?

Comparable projects include Bootstrap, Bulma, Skeleton and Pure. Bootstrap and Bulma offer larger component sets, while Skeleton and Pure are also minimal options to compare.

Is Milligram a UI framework with components?

No. The README says it is not about a UI framework, so it does not provide a large set of ready-made components like dropdowns or modals.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Milligram suits developers who want a light, minimal set of styles for a simple website or prototype and prefer writing their own HTML. Skip it if you need many ready-made components, a no-code builder, or tooling with a clear maintenance schedule, and consider a larger kit or one of the comparable projects instead.

Install options & downloads