logo

Mg+

Micro css library v1.2.5-preview

Github

Extended version of Milligram

Base elements

Typography

The base type is 1.6rem (16px) over 1.6 line height (24px)

Anchor Emphasis Small Strong Underline

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6
Text Text Text Text Text Text Text Text

Blockquotes

Yeah!! Milligram is amazing.

Buttons

Default Button

Lists

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
  1. Ordered list item 1
  2. Ordered list item 2
Description list item 1
Description list item 1.1

Tables

Name Age Height Location
Stephen Curry 27 1,91 Akron, OH
Klay Thompson 25 2,01 Los Angeles, CA

Codes

        
          {
            "jsonSample": true,
            "jsonObject": {
              "jsonKey": "jsonValue"
            },
            "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptate.",
          }

Grids

Row sizing and placement
x4
x3
x2
x1
x6
x12
x6 offset3
x6 start
x6 end
Hidden effect (s,m,l,xl)
hidden until small screen
hidden until medium screen
hidden until large screen
hidden until extra large screen
display until small screen
display until medium screen
display until large screen
display until extra large screen
Row alignment
start
x4
x3
x2
x2
center
x4
x3
x2
end
x4
x3
x2
Col alignment
top
x4
x4
middle
x4
x4
bottom
x4
x4
Row grow
x4 grow
x4
x4 grow
x4
x4 grow
x4

Radio

Check

Toggle

Select

Group

  • France
  • Spain
  • Deuthshland
  • France
  • Spain
  • Deuthshland

Range

Forms

Alert

This is an default alert box.
This is an danger alert box.
This is an success alert box.
This is an warning alert box.

Badges

default danger success warning

Loader

Loading...
Loaded

Tabs

1 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.
2 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.
3 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.

Collapse

Content 1
Collapse div
Content 2

Collapsible navs

Timeline

vertical (default)

  • Step 1
    active
  • Step 2
    active
  • Step 3
    current
  • Step 4
    not active

inline

  • Step 1
    active
  • Step 2
    active
  • Step 3...
    current
  • Step 4
    not active

Icons

Navigation

Actions

Sizing (s to 5xl)

Colors

Primary
Secondary
Tertiary
Quaternary
Quinary
hidden when dark
hidden when light
basic colors
red
orange
blue
green