Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quaerat quam optio veritatis consectetur placeat.
Made by Robots
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quaerat quam optio veritatis consectetur placeat.
Secretly Wolverine
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quaerat quam optio veritatis consectetur placeat.
Typography
CSS3 introduces a few new units, including the rem unit, which stands for "root em". The rem unit is relative to the font-size of the root element <html>. That means that we can define a single font
size on the root element, and define all rem units to be a percentage of that. The typography has font-size defined in 1.6rem (16px) and line-height in 1.6 (24px).
Heading<h1> 5.0rem (50px)
Heading<h2> 4.2rem (42px)
Heading<h3> 3.6rem (36px)
Heading<h4> 3.0rem (30px)
Heading<h5> 2.4rem (24px)
Heading<h6> 1.5rem (15px)
Blockquotes
The Blockquote represents a section that is quoted from another source.
Yeah!! Milligram is amazing.
Alerts
All of your foos are belong to us!
All of your foos are belong to us!
All of your foos are belong to us!
All of your foos are belong to us!
All of your foos are belong to us!
Badges & Labels
label
Red Label
Green Label
Yellow Label
Primary Label
Secondary Label
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, sequi neque? Obcaecati ab et aspernatur ut, minima esse numquam totam blanditiis, aliquam eaque sequi minus voluptate eligendi incidunt eos? In.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, sequi neque? Obcaecati ab et aspernatur ut, minima esse numquam totam blanditiis, aliquam eaque sequi minus voluptate eligendi incidunt eos? In.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, sequi neque? Obcaecati ab et aspernatur ut, minima esse numquam totam blanditiis, aliquam eaque sequi minus voluptate eligendi incidunt eos? In.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, sequi neque? Obcaecati ab et aspernatur ut, minima esse numquam totam blanditiis, aliquam eaque sequi minus voluptate eligendi incidunt eos? In.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, sequi neque? Obcaecati ab et aspernatur ut, minima esse numquam totam blanditiis, aliquam eaque sequi minus voluptate eligendi incidunt eos? In.
Wells
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis, molestias harum nam, fuga pariatur amet sapiente numquam ex, obcaecati nihil minus excepturi voluptatem! Omnis nostrum dolores, labore facere mollitia.
Buttons
The Button, an essential part of any user experience. Buttons come in three basic styles in Milligram: The <button> element has flat color by default, whereas .button-outline has a simple outline around, and .button-clear is entirely clear.
The List is a very versatile and common way to display items. Milligram has three types of lists: The unordered list use <ul> element will be marked with a outline circles, the ordered list use <ol> element and
your items will be marked with numbers, the description list use <dl> element and your items will not be marking, only spacings.
The Form has never been exactly fun, and it can be downright painful on a mobile device with its on-screen keyboard. Milligram help to make this much easier with design focused on the user experience.
Male
Female
Other
Tables
The Table element represents data in two dimensions or more. We encourage the use of proper formatting with <thead> and <tbody> to create a <table>. 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
Grids
The Grid is a fluid system with a max width of 70.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 the CSS 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.
.column
.column
.column
.column
.column
.column-50.column-offset-25
Codes
The Code element represents a fragment of computer code. Just wrap anything in a <code> and it will appear like this. if you need a block, by default, enter the <code> within the <pre> element.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iste, placeat voluptates sapiente blanditiis fuga ullam. Iure dolorum libero fugit quidem, voluptate veniam aut animi nihil voluptas mollitia, aliquid inventore.
