Style Tools

ng-alain builds a set of style tools for size, spacing, color, and more based on Ant Design.

Install ng-alain snippets plugin in VSCode for intellisense these class names.

Spacing

ng-alain believes that these styles tool only using in the content area. Built on the design principles developed by Ant Design, A spacing width is based on 8px as a reference unit, and derived from three rule sizes.

NameFormulaSizeDescription
xs$gutter / 24pxSmaller
sm$gutter8pxSmall
md$gutter * 216pxMedium
lg$gutter * 324pxLarge
xl$gutter * 432pxExtra Large
xxl$gutter * 648pxOversized

According these rules, derived from marginpadding, and naming rules as follows:

  • Type: padding, margin

  • Direction(Optional): top, right, bottom, left, x(equal to left, right), y(equal to top, bottom)

Clean

[<Type>p|m][t|r|b|l|x|y]?0

Name Rule

[<Type>p|m][t|r|b|l|x|y]?-[sm|md|lg]

Demo:

.p-sm { padding: 8px !important; }
.pt-sm { padding-top: 8px !important; }
.m-sm { margin: 16px !important; }
.mt-md { margin-top: 16px !important; }

.p0 { padding: 0 !important; }

Color

Ant Design does not have a button color, but is based on visual effects. The default is daybreak blue, for example: button type primary of nz-button.

ng-alain still does not break this rule, building a set of color classes for text and background based on the color section.

NamePrimary ColorDescription
red
#f5222d
Dust Red: Fighting, unrestrained
volcano
#fa541c
Volcano: Eye-catching
orange
#fa8c16
Sunset Orange: Warm and cheerful
gold
#faad14
Calendula Gold: Vital and active
yellow
#fadb14
Sunrise Yellow: Birth, sunshine
lime
#a0d911
Lime: Natural, vital
green
#f5222d
Polar Green: Health, innovation
cyan
#13c2c2
Cyan: Hope, strong
blue
#1890ff
Daybreak Blue: Inclusive, technology, Pratt & Whitney
geekblue
#2f54eb
Geek Blue: Explore and delve into
purple
#722ed1
Golden Purple: Elegant, romantic
magenta
#eb2f96
Magenta: Smooth, neutral

Ant Design's base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design.

Category

NameColor Size
light5
normal6
dark7

Name Rule

[<Type>text|bg]-[red|volcano|orange|gold|yellow|lime|green|cyan|blue|geekblue|purple|magenta|grey](-[light|dark])?(-h)?

normal itself is the basic color, so it can be ignored grey is very often used, so add extra grey-light, grey-darker alias to indicate depth

DEMO:

// Text color
.text-red-light { color: #fabeb9 !important; }
.text-red { color: #f04134 !important; }
.text-red-dark { color: #a31837 !important; }

// background-color color
.bg-red-light { background-color: #fabeb9 !important; }
.bg-red { background-color: #f04134 !important; }
.bg-red-dark { background-color: #a31837 !important; }

// hover color
.bg-red-light-h { &:hover { background-color: #fabeb9 !important; } }
.bg-red-h { &:hover { background-color: #f04134 !important; } }
.bg-red-dark-h { &:hover { background-color: #a31837 !important; } }

Aliase

AliaseColor Name
primary@blue-6
#1890ff
success@green-6
#52c41a
error@red-5
#ff4d4f
warning@gold-6
#faad14
info@blue-6
#1890ff
processing@blue-6
#1890ff
highlight@red-5
#ff4d4f
normal#d9d9d9
#d9d9d9

DEMO:

// Text color
.text-error-light { color: #fabeb9 !important; }
.text-error { color: #f04134 !important; }
.text-error-dark { color: #a31837 !important; }

// background-color color
.bg-error-light { background-color: #fabeb9 !important; }
.bg-error { background-color: #f04134 !important; }
.bg-error-dark { background-color: #a31837 !important; }

// hover color
.bg-error-light-h { &:hover { background-color: #fabeb9 !important; } }
.bg-error-h { &:hover { background-color: #f04134 !important; } }
.bg-error-dark-h { &:hover { background-color: #a31837 !important; } }

Full Colors

You can use @enable-all-colors: true to turn on all 120 color rules.

.text-red-1 { color: #fff1f0 !important; }
.text-red-6 { color: #f04134 !important; }
.text-red-10 { color: #5c0011 !important; }

.bg-red-6 { color: #f04134 !important; }
.bg-red-6-h { color: #f04134 !important; }

Clearfix

Clear floats .clearfix.

Display

AliaseCSS
d-nonedisplay: none
d-blockdisplay: block
d-inline-blockdisplay: inline-block
d-flexdisplay: flex
d-inline-flexdisplay: inline-flex
justify-content-startjustify-content: flex-start
justify-content-endjustify-content: flex-end
justify-content-centerjustify-content: center
justify-content-betweenjustify-content: space-between
justify-content-aroundjustify-content: space-around
align-items-startalign-items: flex-start
align-items-endalign-items: flex-end
align-items-centeralign-items: center
align-items-baselinealign-items: baseline
align-items-stretchalign-items: stretch
align-content-startalign-content: flex-start
align-content-endalign-content: flex-end
align-content-centeralign-content: center
align-content-betweenalign-content: space-between
align-content-aroundalign-content: space-around
align-content-stretchalign-content: stretch
align-self-autoalign-self: auto
align-self-startalign-self: flex-start
align-self-endalign-self: flex-end
align-self-centeralign-self: center
align-self-baselinealign-self: baseline
align-self-stretchalign-self: stretch
flex-centerdisplay: flex; align-items: center;
flex-center-betweendisplay: flex; align-items: center; align-content: space-between;

Position

NameDescription
overflow-autooverflow: auto
overflow-hiddenoverflow: hidden
fixed-topFixed top
fixed-bottomFixed bottom

Text

Sizing

Ant Design is based on 14px.

NameDescription
text-xs12px
text-sm14px
text-md16px
text-lg18px
text-xl22px

Alignment

NameDescription
text-leftText left
text-centerText center
text-rightText right

Overflow

The container must be display: inline-block or display: block.

NameDescription
text-nowrapOutputs a single line
text-truncateTruncate string with ellipsis

Transformation

NameDescription
text-lowercaseLowercase of text
text-uppercaseUppercase of text
text-capitalizeCapitalize of text
text-deletedDeleted line

Weight and italics

NameDescription
font-weight-normalfont-weight: normal
font-weight-boldfont-weight: 700
font-italicfont-style: italic

Other

NameDescription
text-hover*:hover { color: @primary-color; }
disabledDisabled

Borders

Border

NameDescription
borderborder: 1px solid #f5f5f5 !important;
border-0border: 0 !important;
border-top-0border-top: 0 !important;
border-right-0border-right: 0 !important;
border-bottom-0border-bottom: 0 !important;
border-left-0border-left: 0 !important;

Color

Supports all color & aliase of color section, such as border-red, border-success.

Rounded

NameDescription
rounded-0border-radius: 0;
rounded-circleborder-radius: 50%;
rounded-smborder-radius: 2px;
rounded-mdborder-radius: 4px;
rounded-lgborder-radius: 6px;

Width

NameDescription
width-sm160px
width-md240px
width-lg320px
width-[0-10]0%-100%

Responsive

Like Bootstrap responsive rules, all apply hidden-xs classes are hidden when screen less than 480px.

NameScreen
hidden-xs<480px
hidden-sm<768px
hidden-md<992px
hidden-lg<1200px
hidden-pc<768px
hidden-mobile>768px

Rotate

.rotate-[360 / 15]

DEMO:

// Rotate 15 degrees
.rotate-15
// Rotate 90 degrees
.rotate-90
// Rotate 360 degrees
.rotate-360

Other

NameDescription
block-centermargin: 0 auto
pointcursor: pointer
no-dataNo result
no-resizeSetting does not allow adjustment elements
bg-centerBackground image is vertically centered
scrollbarCustom scrollbar for a div
color-weakWeak mode

Widgets

Masonry

Online DEMO

NameDescription
row-masonryRows
row-masonry-{xs|sm|md|lg|xl}-{1-10}Rows, Responsive style
col-masonryColumns

ng-zorro

nz-card

NameDescription
ant-card__body-nopaddingForce body without spacing

nz-modal

NameDescription
modal-{sm|md|lg|xl}Set size of modal, wrapClassName: 'modal-lg'
modal-body-nopaddingWithout padding in body element
modal-headerUse html template to custom modal, DEMO
modal-footerUse html template to custom modal, DEMO

nz-table

NameDescription
ant-table-rep__titleTitle
ant-table-rep__hide-header-footerShow title or bottom when mobile screen

nz-tag

NameDescription
ant-tag__plusAdd button style