About Milligram
Overview
Milligram is a minimalist CSS framework designed to give developers a fast and clean starting point for building websites. At only 2kb gzipped, it targets better performance and higher productivity by keeping properties to reset at a minimum, resulting in cleaner code.
Unlike full UI frameworks, Milligram does not attempt to cover every component or pattern. It suits developers who want a lightweight base without the overhead of larger alternatives like Bootstrap or Foundation.
Key Benefits
- Only 2kb gzipped, keeping page weight extremely low.
- Designed for better performance and higher productivity with fewer properties to reset.
- Uses the rem unit throughout, allowing consistent sizing tied to a single root font size.
- Ships in both uncompressed and minified versions for flexible integration.
- Available via Bower, npm, Yarn, or CDN for broad ecosystem compatibility.
- Includes a CLI tool (milligram-cli) that scaffolds a boilerplate project and runs it with a single command.
How It Works
You install Milligram via npm, Yarn, Bower, or a direct CDN link, then add the CSS Reset and the main Milligram stylesheet to your HTML head. From there, you write standard HTML elements — headings, buttons, forms, lists, grids — and Milligram's styles apply automatically without additional class wiring beyond a few optional modifiers.
Use Cases
- Front-end developers who need a minimal CSS baseline to start a new project without the weight of a full UI framework.
- Node.js developers who want a CLI-driven boilerplate that pairs Milligram with npm scripts out of the box.
- Web designers building fast, clean marketing or portfolio sites where load performance matters.
- Open-source contributors who want a well-documented, community-backed CSS starting point to build on.
- Students and early-career developers learning CSS layout and typography with a clean, readable stylesheet as reference.
Why Choose This Product
Milligram suits developers who want a minimal, dependency-light CSS foundation rather than a full component library. It is not positioned as a UI framework, so teams needing pre-built modals, dropdowns, or JavaScript interactions would need to add those separately.
Key Features
2kb Gzipped Size
The entire framework compresses to only 2kb gzipped, minimizing page weight for faster load times.
rem-Based Typography
All typography uses the rem unit with a base font-size of 1.6rem (16px) and Roboto font provided by Google.
Three Button Styles
Buttons come in three built-in styles: flat color default, outline (.button-outline), and clear (.button-clear).
Three List Types
Milligram styles unordered, ordered, and description lists with distinct spacing and marker treatments.
Multiple Install Methods
Milligram is available to install via Bower, npm, Yarn, or CDN link for flexible project integration.
CLI Boilerplate Tool
The milligram-cli package scaffolds a new boilerplate project with milligram init and runs it via npm start.
Uncompressed and Minified Builds
The distributed package ships both milligram.css and milligram.min.css for development and production use respectively.
CSS Reset Included
Milligram pairs with a CSS Reset stylesheet to normalize browser defaults before applying its own minimal styles.
