Milligram CSS Framework

1.4.1 · active · verified Sun Apr 19

Milligram is a minimalist CSS framework designed to provide a lightweight and clean starting point for web projects. Weighing in at only 2kb gzipped, it prioritizes performance and developer productivity by offering a basic set of styles with fewer properties to reset compared to larger UI frameworks. It focuses on core HTML elements like typography, forms, tables, buttons, and a simple grid system. The current stable version is 1.4.1, released in 2023, following a cadence of sporadic updates that address compatibility and add minor feature enhancements, such as responsive tables and new form input types. Its primary differentiation lies in its extreme minimalism, providing only essential styling without dictating a specific UI component library.

Common errors

```
My custom styles are being unexpectedly overridden, or Milligram styles don't seem to apply correctly.
```
cause Incorrect order of CSS imports or missing Normalize.css.

fix Ensure `normalize.css` is imported/linked *before* `milligram.css` in your project. Custom styles should typically be included *after* Milligram to allow for proper overrides.
```
My page's typography looks different after upgrading Milligram.
```
cause Milligram v1.2.0 removed its custom font family definition, relying on `normalize.css` defaults.

fix Explicitly define your desired font-family in your custom CSS if you had specific requirements that Milligram previously handled.
```
Buttons with a disabled class no longer appear styled as disabled.
```
cause The `.button-disabled` class was removed in Milligram v1.2.0.

fix Use the native `disabled` HTML attribute on `<button>` elements, which Milligram styles by default, or create a custom class for disabled button styling.
```
My layouts are broken, or elements are taking up unexpected space, potentially due to box-sizing.
```
cause Milligram v1.1.0 changed all elements to inherit `box-sizing` from the root.

fix Ensure your `html` and `body` elements have `box-sizing: border-box;` defined (often done via `normalize.css` or a reset) for consistent behavior.
```
Milligram styles are not loading, or I'm seeing a blank unstyled page in a JavaScript project.
```
cause Incorrect import path for the Milligram CSS file in your JavaScript entry point or bundler configuration.

fix Verify the import statement `import 'milligram/dist/milligram.min.css';` is correct and placed after any `normalize.css` import. Check your bundler configuration for proper CSS loading.

Warnings

breaking Milligram v1.2.0 removed support for Internet Explorer 6 and 7. Projects requiring compatibility with these legacy browsers should use an older version or provide custom fallbacks.
Fix: Migrate to a modern browser target or use an older Milligram version for IE6/7 compatibility.
breaking The `.button-disabled` class was removed in Milligram v1.2.0. Existing elements relying on this class for disabled styling will lose their visual state.
Fix: Use the native `disabled` HTML attribute on `<button>` elements, which Milligram now styles by default, or implement your own custom disabled button styling.
breaking Milligram v1.2.0 removed its custom font family definition, now deferring to the default specified by `normalize.css`. This may alter your project's typography if you previously relied on Milligram's implicit font stack.
Fix: Explicitly define your desired font-family in your custom CSS or ensure `normalize.css` is included and provides the expected defaults.
breaking In Milligram v1.1.0, all elements were updated to inherit `box-sizing` from the root element. This change ensures consistent box model behavior but could break layouts if your root element (html or body) does not have a `box-sizing` property defined or if you had specific element-level `box-sizing` overrides.
Fix: Ensure your root `html` or `body` element has a consistent `box-sizing` definition, typically `box-sizing: border-box;`. This is generally considered a best practice for modern CSS.
breaking The `.blockquote` class was removed in Milligram v1.0.3.
Fix: Milligram provides styling for the semantic `<blockquote`> HTML element directly; consider using the HTML tag instead of a class, or create your own custom class for blockquote styling.

Install

npm install milligram npm
yarn add milligram yarn
pnpm add milligram pnpm

Imports

Milligram CSS via HTML
wrong:
```
<link rel="stylesheet" href="milligram.css">
```
correct:
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
```
The most common method for including Milligram in a static HTML page. Always link to 'normalize.css' first for consistent base styles, as Milligram depends on it.
Milligram CSS via bundler
wrong:
```
import { milligram } from 'milligram';
```
correct:
```
import 'milligram/dist/milligram.min.css';
```
For JavaScript/TypeScript projects using bundlers like Webpack, Vite, or Parcel. Milligram is a CSS-only library and does not export JavaScript symbols.
Milligram CSS via CSS @import
wrong:
```
@import 'milligram';
```
correct:
```
@import url('https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css');
```
Can be used within another CSS or SCSS file. Ensure 'normalize.css' is imported before Milligram, either directly or as part of your base styles.

Quickstart

Demonstrates how to include Milligram's CSS within a JavaScript application (e.g., using a bundler like Webpack) and how it styles common HTML elements within a React component.

// main.js or App.js (for a React/Vue/Angular project using a bundler)

// 1. Ensure normalize.css is included for consistent base styles.
//    You might already have this from a project setup tool.
import 'normalize.css';

// 2. Import Milligram's main CSS file.
//    This assumes you have installed it via npm/yarn: `npm install milligram`
import 'milligram/dist/milligram.min.css';

// Now, your application's components will automatically pick up Milligram's styles.
// For example, a simple React component demonstrating usage:

import React from 'react';

function App() {
  return (
    <div className="container" style={{maxWidth: '960px', margin: '0 auto', padding: '20px'}}>
      <h1>Welcome to My App</h1>
      <p>This paragraph is styled by Milligram. It's a lightweight and modern CSS framework.</p>

      <button className="button-primary">Click Me</button>
      <button>Learn More</button>

      <form>
        <fieldset>
          <label htmlFor="nameField">Your Name</label>
          <input type="text" placeholder="Jane Doe" id="nameField" />
          <label htmlFor="ageRange">Age Range</label>
          <select id="ageRange">
            <option value="0-18">0-18</option>
            <option value="19-35">19-35</option>
            <option value="36+">36+</option>
          </select>
          <input className="button-primary" type="submit" value="Submit" />
        </fieldset>
      </form>
    </div>
  );
}

export default App;

view raw JSON →