{"id":11324,"library":"milligram","title":"Milligram CSS Framework","description":"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.","status":"active","version":"1.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/milligram/milligram","tags":["javascript","bootstrap","css","css3","flexbox","front-end","framework","html","html5"],"install":[{"cmd":"npm install milligram","lang":"bash","label":"npm"},{"cmd":"yarn add milligram","lang":"bash","label":"yarn"},{"cmd":"pnpm add milligram","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"<link rel=\"stylesheet\" href=\"milligram.css\">","symbol":"Milligram CSS via HTML","correct":"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css\">"},{"note":"For JavaScript/TypeScript projects using bundlers like Webpack, Vite, or Parcel. Milligram is a CSS-only library and does not export JavaScript symbols.","wrong":"import { milligram } from 'milligram';","symbol":"Milligram CSS via bundler","correct":"import 'milligram/dist/milligram.min.css';"},{"note":"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.","wrong":"@import 'milligram';","symbol":"Milligram CSS via CSS @import","correct":"@import url('https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css');"}],"quickstart":{"code":"// main.js or App.js (for a React/Vue/Angular project using a bundler)\n\n// 1. Ensure normalize.css is included for consistent base styles.\n//    You might already have this from a project setup tool.\nimport 'normalize.css';\n\n// 2. Import Milligram's main CSS file.\n//    This assumes you have installed it via npm/yarn: `npm install milligram`\nimport 'milligram/dist/milligram.min.css';\n\n// Now, your application's components will automatically pick up Milligram's styles.\n// For example, a simple React component demonstrating usage:\n\nimport React from 'react';\n\nfunction App() {\n  return (\n    <div className=\"container\" style={{maxWidth: '960px', margin: '0 auto', padding: '20px'}}>\n      <h1>Welcome to My App</h1>\n      <p>This paragraph is styled by Milligram. It's a lightweight and modern CSS framework.</p>\n\n      <button className=\"button-primary\">Click Me</button>\n      <button>Learn More</button>\n\n      <form>\n        <fieldset>\n          <label htmlFor=\"nameField\">Your Name</label>\n          <input type=\"text\" placeholder=\"Jane Doe\" id=\"nameField\" />\n          <label htmlFor=\"ageRange\">Age Range</label>\n          <select id=\"ageRange\">\n            <option value=\"0-18\">0-18</option>\n            <option value=\"19-35\">19-35</option>\n            <option value=\"36+\">36+</option>\n          </select>\n          <input className=\"button-primary\" type=\"submit\" value=\"Submit\" />\n        </fieldset>\n      </form>\n    </div>\n  );\n}\n\nexport default App;\n","lang":"javascript","description":"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."},"warnings":[{"fix":"Migrate to a modern browser target or use an older Milligram version for IE6/7 compatibility.","message":"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.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Use the native `disabled` HTML attribute on `<button>` elements, which Milligram now styles by default, or implement your own custom disabled button styling.","message":"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.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Explicitly define your desired font-family in your custom CSS or ensure `normalize.css` is included and provides the expected defaults.","message":"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.","severity":"breaking","affected_versions":">=1.2.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=1.1.0"},{"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.","message":"The `.blockquote` class was removed in Milligram v1.0.3.","severity":"breaking","affected_versions":">=1.0.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Incorrect order of CSS imports or missing Normalize.css.","error":"My custom styles are being unexpectedly overridden, or Milligram styles don't seem to apply correctly."},{"fix":"Explicitly define your desired font-family in your custom CSS if you had specific requirements that Milligram previously handled.","cause":"Milligram v1.2.0 removed its custom font family definition, relying on `normalize.css` defaults.","error":"My page's typography looks different after upgrading Milligram."},{"fix":"Use the native `disabled` HTML attribute on `<button>` elements, which Milligram styles by default, or create a custom class for disabled button styling.","cause":"The `.button-disabled` class was removed in Milligram v1.2.0.","error":"Buttons with a disabled class no longer appear styled as disabled."},{"fix":"Ensure your `html` and `body` elements have `box-sizing: border-box;` defined (often done via `normalize.css` or a reset) for consistent behavior.","cause":"Milligram v1.1.0 changed all elements to inherit `box-sizing` from the root.","error":"My layouts are broken, or elements are taking up unexpected space, potentially due to box-sizing."},{"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.","cause":"Incorrect import path for the Milligram CSS file in your JavaScript entry point or bundler configuration.","error":"Milligram styles are not loading, or I'm seeing a blank unstyled page in a JavaScript project."}],"ecosystem":"npm"}