CSS3 Utilities

A few common CSS3 tool classes are encapsulated in this project.

https://cjiali.github.io/css3-utilities/

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