CSS Aid

Developers won't write the basic css properties again!

Getting Started

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load the CSS Aid library.

https://raw.githubusercontent.com/saurav12/css-aid/master/css/cssaid.min.css
Copy Source

For SASS/SCSS - Get it from the repo's scss/custom/_cssaid.scss

Margins

Use margin utilities to quickly style the margins of an element. Great for any element.

m--15
mt--15
mr--15
mb--15
ml--15

Use margin utilities to quickly style the margins of an element. Great for any element.

Use *-imp in the end/suffix to overwrite the styles with !important

Paddings

Use padding utilities to quickly style the paddings of an element. Great for any element.

p--20
pt--20
pr--20
pb--20
pl--20

Use padding utilities to quickly style the paddings of an element. Great for any element.

Use *-imp in the end/suffix to overwrite the styles with !important

Flex (Flexbox)

Make a layout in flex, just by using simple classes. Manage layout, alignment, columns, etc. with ease.

Flex Layout

fx → display: flex

Inline-Flex Layout

infx → display: inline-flex

Flex Direction

fx--fd-r → flex-direction: row

1
2
3
4

fx--fd-rr → flex-direction: row-reverse

1
2
3
4

fx--fd-c → flex-direction: column

1
2
3
4

fx--fd-cr → flex-direction: column-reverse

1
2
3
4
Flex Wrap

fx--fw-w → flex-wrap: wrap

1
2
3
4
5
6
7
8

fx--fw-wr → flex-wrap: wrap-reverse

1
2
3
4
5
6
7
8

fx--fw-nw → flex-wrap: no-wrap

1
2
3
4
5
6
7
8
Align Items (Flex)

fx--ai-fs → align-items: flex-start

1
2
3
4

fx--ai-fe → align-items: flex-end

1
2
3
4

fx--ai-c → align-items: center

1
2
3
4

fx--ai-b → align-items: baseline

1
2
3
4

fx--ai-s → align-items: stretch

1
2
3
4
Justify Content (Flex)

fx--jc-fs → justify-content: flex-start

1
2

fx--jc-fe → justify-content: flex-end

1
2

fx--jc-sa → justify-content: space-around

1
2

fx--jc-sb → justify-content: space-between

1
2

Use *-imp in the end/suffix to overwrite the styles with !important

Tables

Use display table utilities to quickly style the layout of an element. Great for any table like layout.

Table, Table Row & Table Cell

sec--table → display: table

sec--table-row → display: table-row

sec--table-cell → display: table-cell

1
2
3
4

For full width tables use class .fw with .sec--table

Use *-imp in the end/suffix to overwrite the styles with !important

Vertical Alignment

Use vertical alignment utilities to quickly align the layout vertically. Great for any layouts.

Vertical Align

valign--t → vertical-align: top

1
2
3
4

valign--m → vertical-align: middle

1
2
3
4

valign--b → vertical-align: bottom

1
2
3
4

Other classes also includes:

  • valign--bl → vertical-align: baseline

  • valign--tt → vertical-align: text-top

  • valign--tb → vertical-align: text-bottom

  • valign--sub → vertical-align: sub

  • valign--sup → vertical-align: sup

Use *-imp in the end/suffix to overwrite the styles with !important

Width & Height

Use width & height utilities to quickly set width & height to an element.

Width

width--full → width: 100%

width--full-vw → width: 100vw

width: 100%

width--half → width: 50%

width--half-vw → width: 50vw

width: 50% | 50vw
Height

height--full → height: 100%

width--full-vh → height: 100vh

height: 100% | 100vh

height--half → height: 50%

width--half-vh → height: 50vh

height: 50% | 50vh

You can also use .width--auto and .height--auto for resetting width & height respectively.

Use *-imp in the end/suffix to overwrite the styles with !important

Cursor Types

Just use simple classes to change your cursors.

Cursors

cursor--[cursor-name] → cursor: [cursor-name]

Hover your cursor on below columns to see them in action

alias
all-scroll
auto
cell
col-resize
context-menu
copy
crosshair
default
e-resize
ew-resize
help
move
n-resize
n-resize
ne-resize
nesw-resize
no-drop
none
not-allowed
ns-resize
nw-resize
nwse-resize
pointer
progress
row-resize
sresize
se-resize
sw-resize
text
vertical-text
w-resize
wait

Use *-imp in the end/suffix to overwrite the styles with !important

Social Media Colors

Just use simple classes for social media colors.

Colors (Social)

color--social-[social-media-name] → color: [social-media-name]

Use *-imp in the end/suffix to overwrite the styles with !important