CSS3 Utilities
A few common CSS3 tool classes are encapsulated in this project.
Layout
position
The classes are named using the format {notation}-{style}.
Where notation is one of:
- position - for classes that set postion
- fixed - for classes that set postion
- sticky - for classes that set postion
Where style is one of:
- static - for classes that set position style
- relative - for classes that set position style
- absolute - for classes that set position style
- fixed - for classes that set position style
- sticky - for classes that set position style
- top - for classes that set position style with absolute or sticky to top
- bottom - for classes that set position style with absolute or sticky to bottom
- left - for classes that set position style with absolute or sticky to left
- right- for classes that set position style with absolute or sticky to right
display
The classes are named using the format .display{style}.
Where style is one of:
- -head - for classes that set flex
- -body - for classes that set flex
- -foot - for classes that set flex
- blank - for classes that apply flex layout with flex-direction:column on the element
flex
The classes are named using the format {notation}{style}.
Where notation is one of:
- flex - for classes that set flex
- justify - for classes that set justify-content
- align - for classes that set align-content
- align - for classes that set align-content
- items - for classes that set align-items
- self - for classes that set align-self
Where style is one of:
- row - for classes that set flex style
- col - for classes that set flex style
- row-reverse - for classes that set flex style
- col-reverse - for classes that set flex style
- wrap - for classes that set flex style
- nowrap - for classes that set flex style
- wrap-reverse - for classes that set flex style
- start - for classes that set justify-content style
- end - for classes that set justify-content style
- center - for classes that set justify-content style
- between - for classes that set justify-content style
- around - for classes that set justify-content style
- start - for classes that set align-content style
- end - for classes that set align-content style
- center - for classes that set align-content style
- between - for classes that set align-content style
- around - for classes that set align-content style
- stretch - for classes that set align-content style
- start - for classes that set align-items style
- end - for classes that set align-items style
- center - for classes that set align-items style
- baseline - for classes that set align-items style
- stretch - for classes that set align-items style
- auto - for classes that set align-self style
- start - for classes that set align-self style
- end - for classes that set align-self style
- center - for classes that set align-self style
- baseline - for classes that set align-self style
- stretch - for classes that set align-self style
float
The classes are named using the format {notation}{style}.
Where notation is one of:
- float - for classes that set float
- clear - for classes that set clear
Where style is one of:
- left - for classes that set float style
- right - for classes that set float style
- top - for classes that set float style
- bottom - for classes that set float style
- start - for classes that set float style
- end - for classes that set float style
- none} - for classes that set float style
- top - for classes that set clear style
- right - for classes that set clear style
- bottom - for classes that set clear style
- left - for classes that set clear style
- none - for classes that set clear style
- both} - for classes that set clear style
In particular, you can use .clearfix to clear floating at both ends.
grid
The classes are named using the format {breakpoint}col-<1|2|3|4|5|6|7|8|9|10|11|12>.
Where breakpoint is one of:
- xs- - for classes that set the column width for xs(min-width:0px)
- sm- - for classes that set the column width for sm(min-width:576px)
- md- - for classes that set the column width for md(min-width:768px)
- lg- - for classes that set the column width for lg(min-width:992px)
- xl- - for classes that set the column width for xl(min-width:1200px)
- blank - for classes that set the column width for xs(min-width:0px)
Notice: the column classes should be used as .row or .row-condensed element's children.
Box
sizing
The classes are named using the format:
| Notation | width|height | min-width|min-height | max-width|max-height | 视口宽高 |
|---|---|---|---|---|
| Format | {notation}-{size} | {notation}-min-{size} | {notation}-max-{size} | {notation}-{size}-{unit} |
Where notation is one of:
- w,width - for classes that set width
- h,height - for classes that set height
Where size is one of:
- 0 - for classes that set the width or height to 0%
- 20 - for classes that set the width or height to 20%
- 25 - for classes that set the width or height to 25%
- 33 - for classes that set the width or height to 33%
- 40 - for classes that set the width or height to 40%
- 50 - for classes that set the width or height to 50%
- 60 - for classes that set the width or height to 60%
- 66 - for classes that set the width or height to 66%
- 75 - for classes that set the width or height to 75%
- 80 - for classes that set the width or height to 80%
- 100 - for classes that set the width or height to 100%
Where unit is one of:
- vw - for classes that set width to {size}*100vw
- vh - for classes that set height to {size}*100vh
spacing
The classes are named using the format {notation}{side}-{size}.
Where notation is one of:
- m,margin - for classes that set margin
- p,padding - for classes that set padding
Where side is one of:
- -t,-top - for classes that set margin-top or padding-top
- -b,-bottom - for classes that set margin-bottom or padding-bottom
- -l,-left - for classes that set margin-left or padding-left
- -r,-right- for classes that set margin-right or padding-right
- -x - for classes that set both *-left and *-right
- -y - for classes that set both *-top and *-bottom
- blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
- no - for classes that set the margin or padding it to 0
- xs - for classes that set the margin or padding to $spacer * .25
- sm - for classes that set the margin or padding to $spacer * .5
- md - for classes that set the margin or padding to $spacer
- lg - for classes that set the margin or padding to $spacer * 1.5
- xl - for classes that set the margin or padding to $spacer * 3
- auto - for classes that set the margin to auto
border
The classes are named using the format {notation}{side}-{size} or {notation}-{color}.
Where notation is one of:
- b,border - for classes that set border
Where side is one of:
- -t,-top - for classes that set border-top
- -b,-bottom - for classes that set border-bottom
- -l,-left - for classes that set border-left
- -r,-right- for classes that set border-right
- -x - for classes that set both *-left and *-right
- -y - for classes that set both *-top and *-bottom
- blank - for classes that set a border on all 4 sides of the element
Where size is one of:
- no - for classes that set the border to 0
- xs - for classes that set the border to $spacer * .25
- sm - for classes that set the border to $spacer * .5
- md - for classes that set the border to $spacer
- lg - for classes that set the border to $spacer * 1.5
- xl - for classes that set the border to $spacer * 3
- blank - for classes that set the border to 1px
Where color is one of:
- red - for classes that set the border-color to red
- orange - for classes that set the border-color to orange
- yellow - for classes that set the border-color to yellow
- olive - for classes that set the border-color to olive
- green - for classes that set the border-color to green
- cyan - for classes that set the border-color to cyan
- blue - for classes that set the border-color to blue
- purple - for classes that set the border-color to purple
- mauve - for classes that set the border-color to mauve
- pink - for classes that set the border-color to pink
- brown - for classes that set the border-color to brown
- grey - for classes that set the border-color to grey
- gray - for classes that set the border-color to gray
- silver - for classes that set the border-color to silver
- black - for classes that set the border-color to black
- dark - for classes that set the border-color to dark
- white - for classes that set the border-color to white
- theme - for classes that set the border-color to theme color
radius
The classes are named using the format {notation}{side}-{size} or {notation}{side}-<circle|rounded>.
Where notation is one of:
- r,radius - for classes that set border-radius
Where side is one of:
- -t,-top - for classes that set both border-top-left-radius and border-top-right-radius
- -b,-bottom - for classes that set both border-bottom-left-radius and border-bottom-right-radius
- -l,-left - for classes that set both border-top-left-radius and border-bottom-left-radius
- -r,-right- for classes that set both border-top-right-radius and border-bottom-right-radius
- blank - for classes that set a border on all 4 sides of the element
Where size is one of:
- no - for classes that set the border to 0
- xs - for classes that set the border to $spacer * .25
- sm - for classes that set the border to $spacer * .5
- md - for classes that set the border to $spacer
- lg - for classes that set the border to $spacer * 1.5
- xl - for classes that set the border to $spacer * 3
- blank - for classes that set the border to 1px
shadow
.sha, .shadow
Color
theme
The classes are named using the format .theme-{color}.
Where color is one of:
- red - for classes that set the system theme to red
- orange - for classes that set the system theme to orange
- yellow - for classes that set the system theme to yellow
- olive - for classes that set the system theme to olive
- green - for classes that set the system theme to green
- cyan - for classes that set the system theme to cyan
- blue - for classes that set the system theme to blue
- purple - for classes that set the system theme to purple
- mauve - for classes that set the system theme to mauve
- pink - for classes that set the system theme to pink
- brown - for classes that set the system theme to brown
- grey - for classes that set the system theme to grey
- gray - for classes that set the system theme to gray
- silver - for classes that set the system theme to silver
- black - for classes that set the system theme to black
- dark - for classes that set the system theme to dark
- white - for classes that set the system theme to white
- theme - for classes that set the system theme to theme color
- primary - for classes that set the system theme to primary color
color
The classes are named using the format {color}.
Where color is one of:
- red - for classes that set the color to red
- orange - for classes that set the color to orange
- yellow - for classes that set the color to yellow
- olive - for classes that set the color to olive
- green - for classes that set the color to green
- cyan - for classes that set the color to cyan
- blue - for classes that set the color to blue
- purple - for classes that set the color to purple
- mauve - for classes that set the color to mauve
- pink - for classes that set the color to pink
- brown - for classes that set the color to brown
- grey - for classes that set the color to grey
- gray - for classes that set the color to gray
- silver - for classes that set the color to silver
- black - for classes that set the color to black
- dark - for classes that set the color to dark
- white - for classes that set the color to white
- theme - for classes that set the color to theme color
- primary - for classes that set the color to primary color
background
The classes are named using the format {notation}-{color}.
Where notation is one of:
- bg,background - for classes that set background-color
Where color is one of:
- red - for classes that set the background-color to red
- orange - for classes that set the background-color to orange
- yellow - for classes that set the background-color to yellow
- olive - for classes that set the background-color to olive
- green - for classes that set the background-color to green
- cyan - for classes that set the background-color to cyan
- blue - for classes that set the background-color to blue
- purple - for classes that set the background-color to purple
- mauve - for classes that set the background-color to mauve
- pink - for classes that set the background-color to pink
- brown - for classes that set the background-color to brown
- grey - for classes that set the background-color to grey
- gray - for classes that set the background-color to gray
- silver - for classes that set the background-color to silver
- black - for classes that set the background-color to black
- dark - for classes that set the background-color to dark
- white - for classes that set the background-color to white
- theme - for classes that set the background-color to theme color
gradient
The classes are named using the format {notation}-{color}.
Where notation is one of:
- gra,gradient - for classes that set background-image
Where color is one of:
- red - for classes that set the background-image to line-gradient with red color
- orange - for classes that set the background-image to line-gradient with orange color
- yellow - for classes that set the background-image to line-gradient with yellow color
- olive - for classes that set the background-image to line-gradient with olive color
- green - for classes that set the background-image to line-gradient with green color
- cyan - for classes that set the background-image to line-gradient with cyan color
- blue - for classes that set the background-image to line-gradient with blue color
- purple - for classes that set the background-image to line-gradient with purple color
- mauve - for classes that set the background-image to line-gradient with mauve color
- pink - for classes that set the background-image to line-gradient with pink color
- brown - for classes that set the background-image to line-gradient with brown color
- grey - for classes that set the background-image to line-gradient with grey color
- gray - for classes that set the background-image to line-gradient with gray color
- silver - for classes that set the background-image to line-gradient with silver color
- black - for classes that set the background-image to line-gradient with black color
- dark - for classes that set the background-image to line-gradient with dark color
- white - for classes that set the background-image to line-gradient with white color
- theme - for classes that set the background-image to line-gradient with theme color
focus
The classes are named using the format {notation}{color}.
Where notation is one of:
- focus - for classes that set box-shadow on :focus element
Where color is one of:
- -red - for classes that set the box-shadow to red
- -orange - for classes that set the box-shadow to orange
- -yellow - for classes that set the box-shadow to yellow
- -olive - for classes that set the box-shadow to olive
- -green - for classes that set the box-shadow to green
- -cyan - for classes that set the box-shadow to cyan
- -blue - for classes that set the box-shadow to blue
- -purple - for classes that set the box-shadow to purple
- -mauve - for classes that set the box-shadow to mauve
- -pink - for classes that set the box-shadow to pink
- -brown - for classes that set the box-shadow to brown
- -grey - for classes that set the box-shadow to grey
- -gray - for classes that set the box-shadow to gray
- -silver - for classes that set the box-shadow to silver
- -black - for classes that set the box-shadow to black
- -dark - for classes that set the box-shadow to dark
- -white - for classes that set the box-shadow to white
- -theme - for classes that set the box-shadow to theme color
- blank - for classes that set the box-shadow to primary color
hover
The classes are named using the format {notation}{color}.
Where notation is one of:
- hover - for classes that set box-shadow on :hover element
Where color is one of:
- -red - for classes that set the box-shadow to red
- -orange - for classes that set the box-shadow to orange
- -yellow - for classes that set the box-shadow to yellow
- -olive - for classes that set the box-shadow to olive
- -green - for classes that set the box-shadow to green
- -cyan - for classes that set the box-shadow to cyan
- -blue - for classes that set the box-shadow to blue
- -purple - for classes that set the box-shadow to purple
- -mauve - for classes that set the box-shadow to mauve
- -pink - for classes that set the box-shadow to pink
- -brown - for classes that set the box-shadow to brown
- -grey - for classes that set the box-shadow to grey
- -gray - for classes that set the box-shadow to gray
- -silver - for classes that set the box-shadow to silver
- -black - for classes that set the box-shadow to black
- -dark - for classes that set the box-shadow to dark
- -white - for classes that set the box-shadow to white
- -theme - for classes that set the box-shadow to theme color
- blank - for classes that set the box-shadow to primary color
Text
The classes are named using the format {notation}-{style}.
Where notaion is one of:
- txt,text - for classes that set the text
Where style is one of:
- nowrap - for classes that set the text to not wrap
- truncate - for classes that set the text to truncate with ...
- hide - for classes that set the text to replace by image
- RMB - for classes that set the text to insert character ￥ before
- dollar - for classes that set the text to insert character $ before
- justify - for classes that set the text to vertical center
- left - for classes that set the text to left justification
- right - for classes that set the text to right justification
- center - for classes that set the text to justify center
- abc,lowercase - for classes that set the text to lowercase
- ABC,uppercase - for classes that set the text to uppercase
- Abc,capitalize - for classes that set the text to capitalize
- light - for classes that set the text to light
- bold - for classes that set the text to bold
In particular, you can use .txt or .text to reset the text style.
font-size
You can use the classes .h<1|2|3|4|5|6> to set the text's font size.
text-shadow
The classes are named using the format <txt|text>-<sha|shadow>-{color}.
Where color is one of:
- red - for classes that set the text-shadow to red(#e54d42)
- orange - for classes that set the text-shadow to orange(#f37b1d)
- yellow - for classes that set the text-shadow to yellow(#fbbd08)
- olive - for classes that set the text-shadow to olive(#8dc63f)
- green - for classes that set the text-shadow to green(#39b54a)
- cyan - for classes that set the text-shadow to cyan(#1cbbb4)
- blue - for classes that set the text-shadow to blue(#007bff)
- purple - for classes that set the text-shadow to purple(#6739b6)
- mauve - for classes that set the text-shadow to mauve(#9c26b0)
- pink - for classes that set the text-shadow to pink(#e03997)
- brown - for classes that set the text-shadow to brown(#a5673f)
- grey - for classes that set the text-shadow to grey(#eee)
- gray - for classes that set the text-shadow to gray(#aaa)
- silver - for classes that set the text-shadow to silver(#777)
- black - for classes that set the text-shadow to black(#333)
- dark - for classes that set the text-shadow to dark(#000)
- white - for classes that set the text-shadow to white(#fff)
- theme - for classes that set the text-shadow to theme color(#39b54a)
- primary - for classes that set the text-shadow to primary color(#007bff)
Button
@import "button";
.btn, .button
Component
page
The classes are named using the format .page{component}.
Where component is one of:
- -head - for classes that set some style as the .page children element
- -body - for classes that set some style as the .page children element
- -foot - for classes that set some style as the .page children element
- blank - for classes that apply flex layout with flex-direction:column on the element
container
The classes are named using the format .container{component}.
Where component is one of:
- head - for classes that set some style as the .container children element
- body - for classes that set some style as the .container children element
- foot - for classes that set some style as the .container children element
- aside - for classes that set some style as the .container children element
- blank - for classes that apply flex layout with flex-direction:column on the element
In particular, you can use .container--vertical to change the flex-direction value (default:row).
panel
The classes are named using the format .panel{component} or panel--{status}.
Where component is one of:
- -head - for classes that set some style as the .panel children element
- -body - for classes that set some style as the .panel children element
- -foot - for classes that set some style as the .panel children element
- blank - for classes that apply flex layout with flex-direction:column on the element
Where status is one of:
- rounded - for classes that set some style as the .panel children element
- bordered - for classes that set some style as the .panel children element
- filled - for classes that set some style as the .panel children element
cell
The classes are named using the format .cell{component} or cell--{status}.
Where component is one of:
- -head - for classes that set the border-radius on .cell children element
- -body - for classes that set the border style on .cell children element
- -foot - for classes that set background-color on .cell children element
- blank - for classes that apply flex layout with flex-direction:row on the element
Where status is one of:
- rounded - for classes that set the border-radius on the .cell children element
- bordered - for classes that set the border on the .cell children element
- filled - for classes that set the background-color on the .cell children element
table
The classes are named using the format .table--{status}.
Where component is one of:
- condensed - for classes that set a condensed table
- bordered - for classes that set a bordered table
- striped - for classes that set a zebra-striping table
- hoverable - for classes that set a hoverable table
Notice: the classes should be used on a table element with class .table.
tips
The classes are named using the format {notation}{side}.
Where notation is one of:
- tips - for classes that set a animation on the element
Where side is one of:
- -top - for classes that set the tips showing side to top
- -right - for classes that set the tips showing side to right
- -bottom - for classes that set the tips showing side to bottom
- -left - for classes that set the tips showing side to left
animation
The classes are named using the format {notation}-{type}.
Where notation is one of:
- ani,animation - for classes that set a animation on the element
Where type is one of:
- reverse - for classes that set the animation of reverse on the element
- fade-in - for classes that set the animation of fade-in on the element
- fade-out - for classes that set the animation of fade-out on the element
- scale-up - for classes that set the animation of scale-up on the element
- scale-down - for classes that set the animation of scale-down on the element
- slide-top - for classes that set the animation of slide-top on the element
- slide-bottom - for classes that set the animation of slide-bottom on the element
- slide-left - for classes that set the animation of slide-left on the element
- slide-right - for classes that set the animation of slide-right on the element
- shake - for classes that set the animation of shake on the element
- spin - for classes that set the animation of spin on the element
Other
overflow
The classes are named using the format .overflow{side}-{style}.
Where side is one of:
- -x - for classes that set overflow-x stlyle
- -y - for classes that set overflow-y stlyle
- blank - for classes that set overflow stlyle
Where style is one of:
- hidden - for classes that set overflow to hidden
- scroll - for classes that set overflow to scroll
- auto - for classes that set overflow to auto
- visible - for classes that set overflow to visible
vertical
The classes are named using the format .overflow-{style}.
Where style is one of:
- baseline - for classes that set vertical-align to baseline
- top - for classes that set vertical-align to top
- middle - for classes that set vertical-align to middle
- bottom - for classes that set vertical-align to bottom
- text-bottom - for classes that set vertical-align to text
- text-top - for classes that set vertical-align to text
- sub - for classes that set vertical-align to sub
- super - for classes that set vertical-align to super
cursor
The classes are named using the format .cusor-{style}.
Where style is one of:
- default - for classes that set cursor to default
- pointer - for classes that set cursor to pointer
- help - for classes that set cursor to help
- move - for classes that set cursor to move
visibility
The classes are named using the format .visibility-{style}.
Where style is one of:
- visible - for classes that set visibility to visible
- hidden - for classes that set visibility to hidden
- collapse - for classes that set visibility to collapse
zindex
The classes are named using the format .zindex{suffix}.
Where suffix is one of:
- -content - for classes that set z-index to 1000
- -static - for classes that set z-index to 1000
- -relative - for classes that set z-index to 1000
- -dropdown - for classes that set z-index to1010
- -sticky - for classes that set z-index to 1020
- -absolute - for classes that set z-index to 1030
- -fixed - for classes that set z-index to 1030
- -mask - for classes that set z-index to1040
- -modal - for classes that set z-index to 1050
- -popover - for classes that set z-index to 1060
- -tooltip - for classes that set z-index to 1070
- blank - for classes that set z-index to 0