u-classnames v0.0.3

UTILITY-CSS

BREAK POINT / POSTFIX

• *-xs -> @media (max-width: 575.98px)
• *-sm -> @media (min-width:576px) and (max-width: 767.98px)
• *-md -> @media (min-width:768px) and (max-width: 991.98px)
• *-lg -> @media (min-width:992px) and (max-width: 1199.98px)
• *-xl -> @media (min-width:1200)

UTILITIES

border

• .u-bdn -> border: none
• .u-bdtn -> border-top: none
• .u-bdrn -> border-right: none
• .u-bdbn -> border-bottom: none
• .u-bdln -> border-left: none

clear

• .u-clr -> text-align: right
• .u-cll -> text-align: left
• .u-clb -> text-align: both
• .u-cln -> text-align: none

clearfix

• .u-cf

display

• .u-db -> display: block
• .u-di -> display: inline
• .u-dt -> display: table
• .u-df -> display: flex
• .u-dg -> display: grid
• .u-dli -> display: list-item
• .u-dtr -> display: table-row
• .u-dtc -> display: table-cell
• .u-dn -> display: none
• .u-dib -> display: inline-block
• .u-dif -> display: inline-flex

flex

  <div class='u-df u-fxdr u-fxdc-xs u-jcbt u-aic'>
    <div class='u-fx'>foo</div>
    <div class='u-fx'>bar</div>
  </div>

flex-direction

• .u-fxdr -> flex-direction: row
• .u-fxdc -> flex-direction: column
• .u-fxdrr -> flex-direction: row-reverse
• .u-fxdcr -> flex-direction: column-reverse

flex

• .u-fx -> flex: 1 1 auto

flex-grow

• .u-fxg0 -> flex-grow: 0
• .u-fxg1 -> flex-grow: 1

flex-shrink

• .u-fxs0 -> flex-shrink: 0
• .u-fxs1 -> flex-shrink: 1

justify-content

• .u-jcs -> justify-content: flex-start
• .u-jce -> justify-content: flex-end
• .u-jcc -> justify-content: center
• .u-jcbt -> justify-content: space-between
• .u-jcar -> justify-content: space-around

flex-wrap

• .u-fxw -> flex-wrap: wrap
• .u-fxwn -> flex-wrap: nowrap

align-items

• .u-ais -> align-items: flex-start
• .u-aie -> align-items: flex-end
• .u-aic -> align-items: center
• .u-aibl -> align-items: baseline
• .u-aist -> align-items: stretch

align-content

• .u-acs -> align-content: flex-start
• .u-ace -> align-content: flex-end
• .u-acc -> align-content: center
• .u-acbt -> align-content: space-between
• .u-acar -> align-content: space-around
• .u-acst -> align-content: stretch

align-self

• .u-ass -> align-self: flex-start
• .u-ase -> align-self: flex-end
• .u-asc -> align-self: center
• .u-asbl -> align-self: baseline
• .u-asst -> align-self: stretch

float

• .u-flr -> text-align: right
• .u-fll -> text-align: left
• .u-fln -> text-align: none

font-size

[val] には 10 ~ 16 / 18 / 20 / 22 / 24 / 26 / 28 / 30 / 32 / 35 / 40 / 50 のいずれかの数値が入る(単位 px)

  <div class='u-fz18 u-fz12-sm'>hoge</div>

• .u-fzval -> font-size: [val]px

font-style

• .u-fsn -> font-style: normal
• .u-fsi -> font-style: italic

font-weight

• .u-fwb -> font-weight: bold

margin

[val] には -20 ~ 100 までの数値が入る(単位 px / 5px刻み)

  <div class='u-mt30 u-mt10-xs'>hoge</div>

• .u-mval -> margin: [val]px
• .u-mrval -> margin-right: [val]px
• .u-mbval -> margin-bottom: [val]px
• .u-mlval -> margin-left: [val]px
• .u-myval -> margin-top: [val]px; margin-bottom: [val]px

• .u-mxval -> margin-right: [val]px; margin-left: [val]px

• .u-ma -> margin: auto

• .u-mxa -> margin-right: auto; margin-left: auto

max-height / max-width

• .u-mah100p -> max-height: 100%
• .u-maw100p -> max-width: 100%

padding

[val] には 0 ~ 100 までの数値が入る(単位 px / 5px刻み)

• .u-pval -> padding: [val]px
• .u-prval -> padding-right: [val]px
• .u-pbval -> padding-bottom: [val]px
• .u-plval -> padding-left: [val]px
• .u-pyval -> padding-top: [val]px; padding-bottom: [val]px
• .u-pxval -> padding-right: [val]px; padding-left: [val]px

position

• .u-pos -> position: static
• .u-por -> position: relative
• .u-poa -> position: absolute
• .u-pof -> position: fixed

text-align

• .u-tar -> text-align: right
• .u-tac -> text-align: canter
• .u-tal -> text-align: left
• .u-taj -> text-align: justify

vartical-align

• .u-vabl -> vartical-align: baseline
• .u-vat -> vartical-align: top
• .u-vam -> vartical-align: middle
• .u-vab -> vartical-align: bottom
• .u-vatb -> vartical-align: text-bottom
• .u-vatt -> vartical-align: text-top

white-space

• .u-wsn -> white-space: nowrap