milligram

A minimalist CSS framework.

10,193

738

10,193

124

View on GitHub View on NPM

Top Related Projects

normalize.css

52,321

A modern alternative to CSS resets

water.css

8,277

A drop-in collection of CSS styles to make simple websites just a little nicer

mvp

4,952

MVP.css — Minimalist classless CSS stylesheet for HTML elements

sakura

4,104

:cherry_blossom: a minimal css framework/theme.

Quick Overview

Milligram is a minimalist CSS framework that aims to provide a lightweight and clean starting point for web development projects. It offers a simple and responsive grid system, basic styling for common HTML elements, and a set of utility classes, all while maintaining a tiny footprint of less than 2KB when gzipped.

Pros

Extremely lightweight, making it ideal for performance-conscious projects
Easy to learn and implement due to its simplicity and minimal approach
Provides a clean, modern aesthetic out of the box
Compatible with all modern browsers and responsive by default

Cons

Limited set of components compared to larger CSS frameworks
May require additional customization for more complex designs
Lack of advanced features like JavaScript components or extensive pre-built UI elements
Not suitable for projects that require a comprehensive design system

Code Examples

Basic grid system:

<div class="container">
  <div class="row">
    <div class="column">First column</div>
    <div class="column">Second column</div>
    <div class="column">Third column</div>
  </div>
</div>

Button styles:

<button class="button">Default Button</button>
<button class="button button-outline">Outline Button</button>
<button class="button button-clear">Clear Button</button>

Form elements:

<form>
  <fieldset>
    <label for="nameField">Name</label>
    <input type="text" placeholder="John Doe" id="nameField">
    <label for="ageField">Age</label>
    <select id="ageField">
      <option value="18-25">18-25</option>
      <option value="26-35">26-35</option>
      <option value="36+">36+</option>
    </select>
    <input class="button-primary" type="submit" value="Send">
  </fieldset>
</form>

Getting Started

To use Milligram in your project, you can either download the CSS file or include it via a CDN:

Download and include in your HTML:

<link rel="stylesheet" href="path/to/milligram.min.css">

Or use a CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">

Once included, you can start using Milligram's classes and styles in your HTML. For example:

<div class="container">
  <h1>Hello, Milligram!</h1>
  <p>This is a simple paragraph using Milligram's default styles.</p>
  <button class="button">Click me</button>
</div>

Competitor Comparisons

normalize.css

52,321

A modern alternative to CSS resets

Pros of normalize.css

Focused solely on normalizing browser styles, providing a consistent base
Smaller file size, making it more lightweight
Widely adopted and battle-tested across numerous projects

Cons of normalize.css

Lacks built-in design elements or components
Requires additional CSS for layout and styling
May need more customization for specific project requirements

Code Comparison

normalize.css:

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}

milligram:

html {
  box-sizing: border-box;
  font-size: 62.5%;
}
body {
  color: #606c76;
  font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.6;
}

normalize.css focuses on resetting browser defaults, while milligram provides a more opinionated starting point with predefined styles and typography. normalize.css is better suited for projects requiring a clean slate, whereas milligram offers a quick way to achieve a minimalist design out of the box.

minireset.css

2,764

A tiny modern CSS reset

Pros of minireset.css

Extremely lightweight (less than 1KB minified and gzipped)
Focuses solely on resetting default browser styles
Easier to integrate into existing projects without conflicting styles

Cons of minireset.css

Lacks pre-styled components and typography
Requires more custom CSS to achieve a polished look
Less opinionated, which may lead to more work for developers

Code Comparison

minireset.css:

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

Milligram:

.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background-color: #9b4dca;
  border: 0.1rem solid #9b4dca;
  border-radius: .4rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  height: 3.8rem;
  letter-spacing: .1rem;
  line-height: 3.8rem;
  padding: 0 3.0rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

This comparison highlights the different approaches of the two libraries. minireset.css focuses on resetting default styles, while Milligram provides more opinionated, pre-styled components and typography.

water.css

8,277

A drop-in collection of CSS styles to make simple websites just a little nicer

Pros of Water.css

Smaller file size (2KB vs 2.5KB for Milligram)
Automatic dark mode support
No class names required, making it easier to implement

Cons of Water.css

Less customizable than Milligram
Fewer pre-styled components
Limited grid system compared to Milligram's flexbox-based grid

Code Comparison

Water.css (basic usage):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<body>
  <h1>Hello, World!</h1>
  <p>This is styled with Water.css</p>
</body>

Milligram (basic usage):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.min.css">
<body class="container">
  <h1>Hello, World!</h1>
  <p>This is styled with Milligram</p>
</body>

Both Water.css and Milligram are lightweight CSS frameworks designed for simplicity. Water.css focuses on providing a clean, classless design that works out of the box, while Milligram offers more customization options and a more comprehensive grid system. The choice between the two depends on project requirements and personal preference.

mvp

4,952

MVP.css — Minimalist classless CSS stylesheet for HTML elements

Pros of MVP

More comprehensive set of pre-styled elements and components
Includes utility classes for quick styling adjustments
Offers a dark mode option out of the box

Cons of MVP

Larger file size due to more features and styles
Less minimalistic approach, which may not suit all projects
Potentially steeper learning curve for customization

Code Comparison

MVP:

:root {
  --color-primary: #07c;
  --color-lightGray: #d3d3d3;
  --color-gray: #808080;
  --color-darkGray: #333;
  --color-white: #fff;
}

Milligram:

:root {
  --color-initial: #fff;
  --color-primary: #9b4dca;
  --color-secondary: #606c76;
  --color-tertiary: #f4f5f6;
  --color-quaternary: #d1d1d1;
}

Both frameworks use CSS custom properties for theming, but MVP offers a more extensive color palette and naming convention. Milligram focuses on a minimal set of colors, aligning with its lightweight philosophy.

MVP provides more out-of-the-box styling and components, making it suitable for rapid prototyping and projects requiring a quick setup. Milligram, on the other hand, offers a more minimalistic approach, allowing for greater flexibility in custom designs but requiring more manual styling.

sakura

4,104

:cherry_blossom: a minimal css framework/theme.

Pros of Sakura

Smaller file size (2.2KB vs 2.5KB for Milligram)
More minimalistic and "classless" approach, requiring less markup
Focuses on readability and typography out of the box

Cons of Sakura

Less customization options compared to Milligram
Fewer pre-styled components and utilities
May require more custom CSS for complex layouts

Code Comparison

Sakura:

html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

Milligram:

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.6;
}

Both frameworks set a base font size of 62.5% for easier rem calculations. Sakura combines font-family settings in the html selector, while Milligram separates them into body. Milligram also includes additional typography settings in the body selector.

bulmaswatch

1,643

Themes for Bulma

Pros of Bulmaswatch

Offers multiple themes and color schemes for Bulma, providing greater design flexibility
Built on top of Bulma, a more comprehensive CSS framework with additional components
Includes a live theme previewer for easy customization

Cons of Bulmaswatch

Larger file size due to the full Bulma framework and additional themes
May require more customization to achieve a unique look compared to Milligram's minimalist approach
Steeper learning curve for those unfamiliar with Bulma's class structure

Code Comparison

Milligram (basic button):

<button class="button">Default Button</button>

Bulmaswatch (basic button):

<button class="button is-primary">Primary Button</button>

Both frameworks offer simple class-based styling, but Bulmaswatch (via Bulma) provides more specific class modifiers for different button types and states.

Summary

Milligram is a minimalist CSS framework focused on simplicity and small file size, while Bulmaswatch is a theme collection built on top of Bulma, offering more components and design options. Milligram is ideal for lightweight projects requiring minimal styling, whereas Bulmaswatch is better suited for larger projects needing diverse themes and more extensive UI components.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

A minimalist CSS framework.

Why it's awesome

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

Download

Install with Bower

$ bower install milligram

Install with npm

$ npm install milligram

Install with Yarn

$ yarn add milligram

Contributing

Want to contribute? Follow these recommendations.

License

Designed with â¥ by CJ Patoilo. Licensed under the MIT License.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of normalize.css

Cons of normalize.css

Code Comparison

Pros of minireset.css

Cons of minireset.css

Code Comparison

Pros of Water.css

Cons of Water.css

Code Comparison

Pros of MVP

Cons of MVP

Code Comparison

Pros of Sakura

Cons of Sakura

Code Comparison

Pros of Bulmaswatch

Cons of Bulmaswatch

Code Comparison

Summary

Convert designs to code with AI

README

Why it's awesome

Download

Table of Contents

Contributing

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days