Milligram is a minimalist CSS framework for building clean, responsive UIs with almost no fuss. (Milligram – A minimalist CSS framework)

Core Principles & Philosophy
Key Features

Here are the main features/components Milligram gives you out of the box:

FeatureWhat it gives / how it works
TypographyBase font size 1.6rem (≈16px), line-height 1.6, headings sized in rems (h1, h2, …) in clean scalable way. Uses Roboto font. (Milligram – A minimalist CSS framework)
Grid / Layout systemA fluid grid with a max width (~ 112 rem or 1120px) that checks flexibly with the viewport. You can have a row with N .columns, and they split space equally. (Milligram – A minimalist CSS framework)
Basic UI elementsButtons (flat, outline, clear), forms (inputs, selects, etc.), tables, blockquotes, lists. All styled simply and lightly. (Milligram – A minimalist CSS framework)
Utilities & helper classesNot huge in number, but provides some useful helpers: e.g. floating, clearing floats, etc. (Milligram – A minimalist CSS framework)
Reset / NormalizationSome basic reset / normalization of default browser styles so your base is clean. (Milligram – A minimalist CSS framework)
Limitations / What It Doesn’t Do

Knowing what’s not included is as important as knowing what is:

  • No built-in JavaScript components (modals, tabs, dropdowns with behavior etc.). Milligram is CSS only. You’ll need to add JS yourself. (Milligram – A minimalist CSS framework)
  • Fewer “fancy” design components. For example, no carousels, no ready-to-use dashboard components etc. It gives you the basics; customization & extras are up to you.
  • Less styling flair by-default. Because it’s minimalist, you’ll often want to add your own aesthetic style (colors, shadows, animations etc.).
  • Support for older browsers might be limited (if they lack flexbox, etc.). It’s aimed at modern browser environments. (GitHub)
When to Use Milligram (Use Cases)

Here are scenarios where Milligram is a very good choice:

  • Prototyping: when you want something that looks decent fast, without pulling in a large framework.
  • Content-focused sites (blogs, documentation, portfolios) where typography and readability matter more than lots of UI widgets.
  • Projects where bundle size / performance is important.
  • When you want a clean base and you plan to build (or plug in) specific UI components as needed, rather than being constrained.
How to Get Started

Here are steps to include Milligram and use it in a simple project.

  1. Install / include the CSS You can:
  2. Add the reset / base + the Milligram CSS In your HTML’s <head>: <!-- Optionally include Google Fonts (Roboto) --> <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> <!-- Include CSS Reset / Normalize if required --> <!-- Milligram CSS --> <link rel="stylesheet" href="path/to/milligram.min.css">
  3. Build your layout Use its container / grid: wrap content in .container, then .row, and .column elements. E.g.: <div class="container"> <div class="row"> <div class="column">Column 1</div> <div class="column">Column 2</div> <div class="column">Column 3</div> </div> </div> All .columns in a .row will share space equally. (Milligram – A minimalist CSS framework)
  4. Use basic UI styles Use button classes: <button class="button">Default</button> <button class="button-outline">Outline</button> <button class="button-clear">Clear</button> Use form inputs, lists etc., as needed. Milligram will style them nicely by default. (Milligram – A minimalist CSS framework)
  5. Customize if needed If you want different fonts, colors, sizes, etc., you’ll likely write your own CSS that overrides or extends Milligram’s base. Because Milligram is small, overrides are easier.
Example Minimal Page Using Milligram

Here’s a small sample skeleton to see how it works:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Milligram Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
  <style>
    body {
      margin: 2rem;
    }
    .custom-header {
      text-align: center;
      margin-bottom: 2rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="custom-header">
      <h1>Welcome to Milligram</h1>
      <p>Simple & lightweight base framework</p>
    </header>
    <div class="row">
      <div class="column">
        <button class="button">Primary</button>
      </div>
      <div class="column">
        <button class="button-outline">Outline</button>
      </div>
      <div class="column">
        <button class="button-clear">Clear</button>
      </div>
    </div>
    <section>
      <h2>About It</h2>
      <p>Typography, grids, forms and basic styles are included out of the box.</p>
    </section>
  </div>
</body>
</html>

Tags:

2 Comments

  1. ganesh V
    Reply
    October 11, 2025,

    Please remove Copy access. good information.

  2. Nayan Thandur
    Reply
    October 16, 2025,

    I can tell you put a lot of work into these. Thanks so much for doing such a great job.

Leave a Reply

Your email address will not be published. Required fields are marked *