Css3-utilities NPM

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

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