Mg+

Minimalist CSS framework

Github

Extended version of Milligram

Based on Milligram and FlexBoxGrid
Core elements Extensions

Core elements

Typography

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

Anchor Emphasis Small Strong Underline

Heading

Heading

Heading

Heading

Heading
Heading

            

Blockquotes

Yeah!! Milligram is amazing.


            

Buttons

Default Button

            

Lists

  • Unordered list item 1
  • Unordered list item 2
  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


              .milligram {
                color: #9b4dca;
              }
              

            

Extensions

select (native)


            

Radio


            

Check


            

Toggle


            

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.

            
× This is an danger alert box.

            

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.

            

Group

  • France
  • Espagne
  • Deuthshland

            

Grids

Row sizing and placement
x4
x3
x2
x6
x6
x6 offset3
x6 start
x6 end
Hidden effect (s,m,l,xl)
hidden less than small screen
hidden less than medium screen
hidden less than large screen
hidden less than 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

              

Forms