Skip to content

Instantly share code, notes, and snippets.

@anareyna

anareyna/suit-utils.styl

Created January 12, 2017 20:24
Show Gist options
  • Save anareyna/faf6235bf740504a20e1c0ee0d43faad to your computer and use it in GitHub Desktop.
Save anareyna/faf6235bf740504a20e1c0ee0d43faad to your computer and use it in GitHub Desktop.
Download ZIP
All utility classes as seen on http://suitcss.github.io
Raw
suit-utils.styl
.u-alignBaseline
vertical-align baseline !important
.u-alignBottom
vertical-align bottom !important
.u-alignMiddle
vertical-align middle !important
.u-alignTop
vertical-align top !important
.u-block
display block !important
.u-hidden
display none !important
.u-hiddenVisually
border 0 !important
clip rect(1px, 1px, 1px, 1px) !important
height 1px !important
overflow hidden !important
padding 0 !important
position absolute !important
width 1px !important
.u-inline
display inline !important
.u-inlineBlock
display inline-block !important
max-width 100%
.u-table
display table !important
.u-tableCell
display table-cell !important
.u-tableRow
display table-row !important
.u-cf::before,
.u-cf::after
content " "
display table
.u-cf
&::after
clear both
.u-nbfc
overflow hidden !important
.u-nbfcAlt
display table-cell !important
width 10000px !important
.u-floatLeft
float left !important
.u-floatRight
float right !important
.u-linkClean,
.u-linkClean:hover,
.u-linkClean:focus,
.u-linkClean:active
text-decoration none !important
.u-linkComplex,
.u-linkComplex:hover,
.u-linkComplex:focus,
.u-linkComplex:active
text-decoration none !important
.u-linkComplex:hover .u-linkComplexTarget,
.u-linkComplex:focus .u-linkComplexTarget,
.u-linkComplex:active .u-linkComplexTarget
text-decoration underline !important
.u-linkBlock,
.u-linkBlock:hover,
.u-linkBlock:focus,
.u-linkBlock:active
display block !important
text-decoration none !important
.u-after1of12
margin-right 8.33333% !important
.u-after1of10
margin-right 10% !important
.u-after1of8
margin-right 12.5% !important
.u-after1of6,
.u-after2of12
margin-right 16.66667% !important
.u-after1of5,
.u-after2of10
margin-right 20% !important
.u-after1of4,
.u-after2of8,
.u-after3of12
margin-right 25% !important
.u-after3of10
margin-right 30% !important
.u-after1of3,
.u-after2of6,
.u-after4of12
margin-right 33.33333% !important
.u-after3of8
margin-right 37.5% !important
.u-after2of5,
.u-after4of10
margin-right 40% !important
.u-after5of12
margin-right 41.66667% !important
.u-after1of2,
.u-after2of4,
.u-after3of6,
.u-after4of8,
.u-after5of10,
.u-after6of12
margin-right 50% !important
.u-after7of12
margin-right 58.33333% !important
.u-after3of5,
.u-after6of10
margin-right 60% !important
.u-after5of8
margin-right 62.5% !important
.u-after2of3,
.u-after4of6,
.u-after8of12
margin-right 66.66667% !important
.u-after7of10
margin-right 70% !important
.u-after3of4,
.u-after6of8,
.u-after9of12
margin-right 75% !important
.u-after4of5,
.u-after8of10
margin-right 80% !important
.u-after5of6,
.u-after10of12
margin-right 83.33333% !important
.u-after7of8
margin-right 87.5% !important
.u-after9of10
margin-right 90% !important
.u-after11of12
margin-right 91.66667% !important
.u-before1of12
margin-left 8.33333% !important
.u-before1of10
margin-left 10% !important
.u-before1of8
margin-left 12.5% !important
.u-before1of6,
.u-before2of12
margin-left 16.66667% !important
.u-before1of5,
.u-before2of10
margin-left 20% !important
.u-before1of4,
.u-before2of8,
.u-before3of12
margin-left 25% !important
.u-before3of10
margin-left 30% !important
.u-before1of3,
.u-before2of6,
.u-before4of12
margin-left 33.33333% !important
.u-before3of8
margin-left 37.5% !important
.u-before2of5,
.u-before4of10
margin-left 40% !important
.u-before5of12
margin-left 41.66667% !important
.u-before1of2,
.u-before2of4,
.u-before3of6,
.u-before4of8,
.u-before5of10,
.u-before6of12
margin-left 50% !important
.u-before7of12
margin-left 58.33333% !important
.u-before3of5,
.u-before6of10
margin-left 60% !important
.u-before5of8
margin-left 62.5% !important
.u-before2of3,
.u-before4of6,
.u-before8of12
margin-left 66.66667% !important
.u-before7of10
margin-left 70% !important
.u-before3of4,
.u-before6of8,
.u-before9of12
margin-left 75% !important
.u-before4of5,
.u-before8of10
margin-left 80% !important
.u-before5of6,
.u-before10of12
margin-left 83.33333% !important
.u-before7of8
margin-left 87.5% !important
.u-before9of10
margin-left 90% !important
.u-before11of12
margin-left 91.66667% !important
.u-posFit,
.u-posAbsoluteCenter,
.u-posAbsolute
position absolute !important
.u-posFixedCenter,
.u-posAbsoluteCenter
left 50% !important
top 50% !important
-webkit-transform translate(-50%, -50%) !important
transform translate(-50%, -50%) !important
.u-posFit,
.u-posFullScreen
bottom 0 !important
left 0 !important
margin auto !important
right 0 !important
top 0 !important
.u-posFullScreen,
.u-posFixedCenter,
.u-posFixed
-webkit-backface-visibility hidden
backface-visibility hidden
position fixed !important
.u-posRelative
position relative !important
.u-posStatic
position static !important
.u-size1of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 8.33333% !important
.u-size1of10
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 10% !important
.u-size1of8
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 12.5% !important
.u-size1of6,
.u-size2of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 16.66667% !important
.u-size1of5,
.u-size2of10
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 20% !important
.u-size1of4,
.u-size2of8,
.u-size3of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 25% !important
.u-size3of10
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 30% !important
.u-size1of3,
.u-size2of6,
.u-size4of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 33.33333% !important
.u-size3of8
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 37.5% !important
.u-size2of5,
.u-size4of10
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 40% !important
.u-size5of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 41.66667% !important
.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 50% !important
.u-size7of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 58.33333% !important
.u-size3of5,
.u-size6of10
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 60% !important
.u-size5of8
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 62.5% !important
.u-size2of3,
.u-size4of6,
.u-size8of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 66.66667% !important
.u-size7of10
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 70% !important
.u-size3of4,
.u-size6of8,
.u-size9of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 75% !important
.u-size4of5,
.u-size8of10
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 80% !important
.u-size5of6,
.u-size10of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 83.33333% !important
.u-size7of8
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 87.5% !important
.u-size9of10
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 90% !important
.u-size11of12
-ms-flex-preferred-size auto !important
flex-basis auto !important
width 91.66667% !important
.u-sizeFit
-ms-flex-preferred-size auto !important
flex-basis auto !important
.u-sizeFill
-webkit-box-flex 1 !important
-ms-flex 1 1 0% !important
flex 1 1 0% !important
-ms-flex-preferred-size 0% !important
flex-basis 0% !important
.u-sizeFillAlt
-webkit-box-flex 1 !important
-ms-flex 1 1 auto !important
flex 1 1 auto !important
-ms-flex-preferred-size auto !important
flex-basis auto !important
.u-sizeFull
width 100% !important
.u-textBreak
word-wrap break-word !important
.u-textCenter
text-align center !important
.u-textLeft
text-align left !important
.u-textRight
text-align right !important
.u-textInheritColor
color inherit !important
.u-textKern
-webkit-font-feature-settings "kern" 1
font-feature-settings "kern" 1
-webkit-font-kerning normal
font-kerning normal
text-rendering optimizeLegibility
.u-textNoWrap
white-space nowrap !important
.u-textTruncate
max-width 100%
overflow hidden !important
text-overflow ellipsis !important
white-space nowrap !important
word-wrap normal !important
.u-flex
display -webkit-box !important
display -ms-flexbox !important
display flex !important
.u-flexInline
display -webkit-inline-box !important
display -ms-inline-flexbox !important
display inline-flex !important
.u-flexRow
-webkit-box-orient horizontal !important
-webkit-box-direction normal !important
-ms-flex-direction row !important
flex-direction row !important
.u-flexRowReverse
-webkit-box-orient horizontal !important
-webkit-box-direction reverse !important
-ms-flex-direction row-reverse !important
flex-direction row-reverse !important
.u-flexCol
-webkit-box-orient vertical !important
-webkit-box-direction normal !important
-ms-flex-direction column !important
flex-direction column !important
.u-flexColReverse
-webkit-box-orient vertical !important
-webkit-box-direction reverse !important
-ms-flex-direction column-reverse !important
flex-direction column-reverse !important
.u-flexWrap
-ms-flex-wrap wrap !important
flex-wrap wrap !important
.u-flexNoWrap
-ms-flex-wrap nowrap !important
flex-wrap nowrap !important
.u-flexWrapReverse
-ms-flex-wrap wrap-reverse !important
flex-wrap wrap-reverse !important
.u-flexJustifyStart
-webkit-box-pack start !important
-ms-flex-pack start !important
justify-content flex-start !important
.u-flexJustifyEnd
-webkit-box-pack end !important
-ms-flex-pack end !important
justify-content flex-end !important
.u-flexJustifyCenter
-webkit-box-pack center !important
-ms-flex-pack center !important
justify-content center !important
.u-flexJustifyBetween
-webkit-box-pack justify !important
-ms-flex-pack justify !important
justify-content space-between !important
.u-flexJustifyAround
-ms-flex-pack distribute !important
justify-content space-around !important
.u-flexAlignItemsStart
-webkit-box-align start !important
-ms-flex-align start !important
align-items flex-start !important
.u-flexAlignItemsEnd
-webkit-box-align end !important
-ms-flex-align end !important
align-items flex-end !important
.u-flexAlignItemsCenter
-webkit-box-align center !important
-ms-flex-align center !important
align-items center !important
.u-flexAlignItemsStretch
-webkit-box-align stretch !important
-ms-flex-align stretch !important
align-items stretch !important
.u-flexAlignItemsBaseline
-webkit-box-align baseline !important
-ms-flex-align baseline !important
align-items baseline !important
.u-flexAlignContentStart
-ms-flex-line-pack start !important
align-content flex-start !important
.u-flexAlignContentEnd
-ms-flex-line-pack end !important
align-content flex-end !important
.u-flexAlignContentCenter
-ms-flex-line-pack center !important
align-content center !important
.u-flexAlignContentStretch
-ms-flex-line-pack stretch !important
align-content stretch !important
.u-flexAlignContentBetween
-ms-flex-line-pack justify !important
align-content space-between !important
.u-flexAlignContentAround
-ms-flex-line-pack distribute !important
align-content space-around !important
.u-flex > *,
.u-flexInline > *
-ms-flex-negative 1
flex-shrink 1
.u-flexAlignSelfStart
-ms-flex-item-align start !important
align-self flex-start !important
.u-flexAlignSelfEnd
-ms-flex-item-align end !important
align-self flex-end !important
.u-flexAlignSelfCenter
-ms-flex-item-align center !important
-ms-grid-row-align center !important
align-self center !important
.u-flexAlignSelfStretch
-ms-flex-item-align stretch !important
-ms-grid-row-align stretch !important
align-self stretch !important
.u-flexAlignSelfBaseline
-ms-flex-item-align baseline !important
align-self baseline !important
.u-flexAlignSelfAuto
-ms-flex-item-align auto !important
-ms-grid-row-align auto !important
align-self auto !important
.u-flexOrderFirst
-webkit-box-ordinal-group 0 !important
-ms-flex-order -1 !important
order -1 !important
.u-flexOrderLast
-webkit-box-ordinal-group 2 !important
-ms-flex-order 1 !important
order 1 !important
.u-flexOrderNone
-webkit-box-ordinal-group 1 !important
-ms-flex-order 0 !important
order 0 !important
.u-flexGrow1
-webkit-box-flex 1 !important
-ms-flex 1 1 0% !important
flex 1 1 0% !important
.u-flexGrow2
-webkit-box-flex 2 !important
-ms-flex 2 1 0% !important
flex 2 1 0% !important
.u-flexGrow3
-webkit-box-flex 3 !important
-ms-flex 3 1 0% !important
flex 3 1 0% !important
.u-flexGrow4
-webkit-box-flex 4 !important
-ms-flex 4 1 0% !important
flex 4 1 0% !important
.u-flexGrow5
-webkit-box-flex 5 !important
-ms-flex 5 1 0% !important
flex 5 1 0% !important
.u-flexExpand
margin auto !important
.u-flexExpandLeft
margin-left auto !important
.u-flexExpandRight
margin-right auto !important
.u-flexExpandTop
margin-top auto !important
.u-flexExpandBottom
margin-bottom auto !important
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment