Milligram
A minimalist CSS framework
Getting StartedWho’s using Milligram
Check out how people using Milligram to design fast and clean websites
Did you design a fast and clean website withMilligramtoo?
Share your websiteWhy 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!
Do you want to star it, tweet it, or share it with anyone? So do it! This means a lot to me ♥
Getting Started
There are some ways to get started. First, see all download options available below, then choose the most suitable option for your need. Now you should add the main file of the Milligram and the CSS Reset in the header of your project. Just that!
Install with Bower
Milligram is available to install using Bower.
$ bower install milligram
Install with npm
Milligram is also available to install using npm.
$ npm install milligram
Install with Yarn
Milligram is also available to install using Yarn.
$ yarn add milligram
What's included
Once downloaded, extract the compressed folder to see the main file in the uncompressed and minified version.
milligram/
├── dist/
│ ├── milligram.css
│ └── milligram.min.css
├── example.html
├── license
└── readme.md
Usage
First, use any method mentioned above to download Milligram. Then, just add these tags in the head. Milligram is also available viaCDN.
/* Google Fonts */
/* CSS Reset */
/* Milligram CSS */
/* You should properly set the path from the main file. */
CLI
A CLI for getting started with Milligram. It offers a super simple boilerplate project with Milligram.
$ npm install -g milligram-cli
Create a new app using the commandmilligram init
,then install dependencies and run withnpm start
.
$ milligram init new_app
$ cd new_app
$ npm start
See more examples ofgetting started.
Typography
CSS3 introduces a few new units, including therem
unit, which stands for"root em".Therem
unit is relative to the font-size of the root elementhtml
.That means that we can define a single font size on the root element, and define allrem
units to be a percentage of that. The typography hasfont-size
defined in 1.6rem (16px) andline-height
in 1.6 (24px).Milligramuses thefont-family
Roboto,created byChristian Robertson,and provided by Google.
Headingh1
4.6rem (46px)
Headingh2
3.6rem (36px)
Headingh3
2.8rem (28px)
Headingh4
2.2rem (22px)
Headingh5
1.8rem (18px)
Headingh6
1.6rem (16px)
/* Base font-size and line-height */
The base type is 1.6rem (16px) over 1.6 line height (24px)
/* Other elements to text markup */
Anchor
Emphasis
Small
Strong
Underline
/* Default Headings */
Heading
Heading
Heading
Heading
Heading
Heading
/* The base font-size is set at 62.5% for having the convenience of sizing rems in a way that is similar to using px. So basically 1.6rem = 16px. */
See more examples oftypography.
Blockquotes
The Blockquote represents a section that is quoted from another source.
Yeah!! Milligram is amazing.
Yeah!! Milligram is amazing.
See more examples ofblockquotes.
Buttons
The Button, an essential part of any user experience. Buttons come in three basic styles in Milligram: Thebutton
element has flat color by default, whereas.button-outline
has a simple outline around, and.button-clear
is entirely clear.
/* Default Button */
Default Button
/* Outlined Button */
/* Clear Button */
/* Easily apply the `.button` class for button style in the anchor element. */
See more examples ofbuttons.
Lists
The List is a very versatile and common way to display items. Milligram has three types of lists: The unordered list useul
element will be marked with a outline circles, the ordered list useol
element and your items will be marked with numbers, the description list usedl
element and your items will not be marking, only spacings.
- Unordered list item 1
- Unordered list item 2
- Ordered list item 1
- Ordered list item 2
- Description list item 1
- Description list item 1.1
/* Unordered list */
- Unordered list item 1
- Unordered list item 2
/* Ordered list */
- Ordered list item 1
- Ordered list item 2
/* Description list */
- Description list item 1
- Description list item 1.1
/* Easily change any `dl`, `ul` or an `ol` to get clear lists, number lists or outline circles. */
See more examples oflists.
Forms
The Form has never been exactly fun, and it can be downright painful on a mobile device with its on-screen keyboard. Milligram helps to make this much easier with design focused on the user experience.
/* Always wrap checkbox and radio inputs in a label and use a `.label-inline` inside of it */
See more examples offorms.
Tables
The Table element represents data in two dimensions or more. We encourage the use of proper formatting withthead
andtbody
to create atable
.The code becomes cleaner without disturbing understanding.
Name | Age | Height | Location |
---|---|---|---|
Stephen Curry | 27 | 1,91 | Akron, OH |
Klay Thompson | 25 | 2,01 | Los Angeles, CA |
Name
Age
Height
Location
Stephen Curry
27
1,91
Akron, OH
Klay Thompson
25
2,01
Los Angeles, CA
/* Prior to the creation of CSS, HTML `table` elements were often used as a method for page layout. This usage has been discouraged since HTML4, and the `table` element should not be used for layout purposes. */
See more examples oftables.
Grids
The Grid is a fluid system with a max width of112.0rem
(1120px),that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. Milligram is different than most because of its use of theCSS Flexible Box Layout Module standard.The advantage is the simplicity, and we know that a functional code is very important for maintainability and scalability. Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There is no restriction on number of columns, but we advise you to follow a design pattern of grid system. See more tips on best practices in thetips.
/* `.container` is main centered wrapper */
.column
.column
.column
.column
.column
.column column-50 column-offset-25
/* Every `.column` added inside a `.row` will automatically receive an equal amount of the available area. */
See more examples ofgrids.
Code
The Code element represents a fragment of computer code. Just wrap anything in acode
and it will appear like this. if you need a block, by default, enter thecode
within thepre
element.
.milligram {
color: #9b4dca;
}
.milligram {
color: #9b4dca;
}
See more examples ofcode.
Utilities
Milligram has some functional classes to improve the performance and productivity everyday.
/* Functional Classes */
/* Clear any float */
/* Float either directions */
See more examples ofutilities.
Tips
Tips, techniques, and best practice on using Cascading Style Sheets.
Mobile First
The Mobile First is the design strategy that takes priority development for mobile devices like smartphones and tablets. It means all styles outside of a media queries apply to all devices, then larger screens are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. Milligram use some breakpoints like these:
- Larger thanMobilescreen: 40.0rem(640px)
- Larger thanTabletscreen: 80.0rem(1280px)
- Larger thanDesktopscreen: 120.0rem(1920px)
/* Mobile First Media Queries */
/* Base style */
{... }
/* Larger than mobile screen */
@media (min-width: 40.0rem) {... }
/* Larger than tablet screen */
@media (min-width: 80.0rem) {... }
/* Larger than desktop screen */
@media (min-width: 120.0rem) {... }
Embed Font
Milligramuses thefont-family
Roboto,created byChristian Robertson,and provided by Google.
Customize your projects usingGoogle Fonts.To embed your selected fonts into a webpage, copy this code into the
/* Embed Font */
/* Use the following CSS rules to specify these families */
Extending The Inheritances
The style of an element can be defined in several different locations, which interact in a complex way. It is this form of interaction makes CSS powerful, but it can make it confusing and difficult to debug.
/* Extending The Inheritances */
/* Custom color */
.button-black {
background-color: black;
border-color: black;
}
.button-black.button-clear,
.button-black.button-outline {
background-color: transparent;
color: black;
}
.button-black.button-clear {
border-color: transparent;
}
/* Custom size */
.button-small {
font-size:.8rem;
height: 2.8rem;
line-height: 2.8rem;
padding: 0 1.5rem;
}
.button-large {
font-size: 1.4rem;
height: 4.5rem;
line-height: 4.5rem;
padding: 0 2rem;
}
See more examples oftips.
Browser Support
While not designed for old browsers, Milligram has support for some old versions, but we recommend using the latest versions of their browsers.
- Bravelatest
- Chromelatest
- Edgelatest
- Firefoxlatest
- Operalatest
- Safarilatest
See more examples ofbrowser support.
Examples
You can view more examples of using Milligram.
Contributing
Want to contribute? Follow theserecommendations.
Subscribe to our newsletter
The latest news and resources sent straight to your inbox.