ohmygrid v0.4.0

v.0.4.0

Changelog

• English
• Spanish

install

• npm i ohmygrid -S
• scss
  • @import "~ohmygrid/src/scss/index"

example

    <div class='omg display-flex justify-center'></div>

display

• display-block
  • display: block;
• display-flex
  • display: flex;
• display-inline
  • display: inline;
• display-none
  • display: none;

flex

• align-center
  • align-items: center;
• align-end
  • align-items: flex-end;
• align-start
  • align-items: flex-start;
• flex-10
  • flex: 0 0 10%;
  • max-width: 10%;
• flex-12.5
  • flex: 0 0 12.5%;
  • max-width: 12.5%;
• flex-20
  • flex: 0 0 20%;
  • max-width: 20%;
• flex-25
  • flex: 0 0 25%;
  • max-width: 25%;
• flex-30
  • flex: 0 0 30%;
  • max-width: 30%;
• flex-33
  • flex: 0 0 33.33333%;
  • max-width: 33.33333%;
• flex-40
  • flex: 0 0 40%;
  • max-width: 40%;
• flex-50
  • flex: 0 0 50%;
  • max-width: 50%;
• flex-60
  • flex: 0 0 60%;
  • max-width: 60%;
• flex-66
  • flex: 0 0 66.66666%;
  • max-width: 66.66666%;
• flex-70
  • flex: 0 0 70%;
  • max-width: 70%;
• flex-75
  • flex: 0 0 75%;
  • max-width: 75%;
• flex-80
  • flex: 0 0 80%;
  • max-width: 80%;
• flex-90
  • flex: 0 0 90%;
  • max-width: 90%;
• flex-100
  • flex: 0 0 100%;
  • max-width: 100%;
• flex-grow
  • flex-grow: 1;
• flex-wrap
  • flex-grow: wrap;
• flex-wrap-reverse
  • flex-grow: wrap-reverse;
• justify-around
  • justify-content: space-around;
• justify-between
  • justify-content: space-between;
• justify-center
  • justify-content: center;
• justify-end
  • justify-content: flex-end;
• justify-start
  • justify-content: flex-start;

float

• float-left
  • float: left;
• float-right
  • float: right;
• float-fix::after
  • content: '';
  • clear: both;
  • display: block;

margin

• 1 to 10
• margin-1
  • margin: 5px;
• margin-top-1
  • margin-top: 5px;
• margin-right-1
  • margin-right: 5px;
• margin-bottom-1
  • margin-bottom: 5px;
• margin-left-1
  • margin-left: 5px;
• margin-x-1
  • margin-left: 5px;
  • margin-right: 5px;
• margin-y-1
  • margin-bottom: 5px;
  • margin-top: 5px;

padding

• 1 to 10
• padding-1
  • padding: 5px;
• padding-top-1
  • padding-top: 5px;
• padding-right-1
  • padding-right: 5px;
• padding-bottom-1
  • padding-bottom: 5px;
• padding-left-1
  • padding-left: 5px;
• padding-x-1
  • padding-left: 5px;
  • padding-right: 5px;
• padding-y-1
  • padding-bottom: 5px;
  • padding-top: 5px;

size

• size-height
  • height: 100%;
• size-width
  • width: 100%;