css-quick-starter

(minified) Collection of most commonly used CSS classes..

Installation:

• Do npm install css-quick-starter in your project root directory.
• Then include the style sheet css-quick-starter/dist/css-quick-starter.min.css in your html file.
  Thats it!!! you are ready to use all its classes. Happy styling :-)

Classes include:

note You can prefix any class with i to make the corresponding properties important.

padding .p-0 to .p-50 for padding 0px to 50px
padding left .pl-0 to .pl-50 for padding-left 0px to 50px
padding right .pr-0 to .pr-50 for padding-right 0px to 50px
padding top .pt-0 to .pt-50 for padding-top 0px to 50px
padding bottom .pb-0 to .pb-50 for padding-bottom 0px to 50px
padding horizontal .ph-0 to .ph-50 for padding-left & padding-right 0px to 50px
padding vertical .pv-0 to .pv-50 for padding-top to padding-bottom 0px to 50px

margin .m-0 to .m-50 for margin 0px to 50px
margin left .ml-0 to .ml-50 for margin-left 0px to 50px
margin right .mr-0 to .mr-50 for margin-right 0px to 50px
margin top .mt-0 to .mt-50 for margin-top 0px to 50px
margin bottom .mb-0 to .mb-50 for margin-bottom 0px to 50px
margin horizontal .mh-0 to .mh-50 for margin-left & margin-right 0px to 50px
margin vertical .mv-0 to .mv-50 for margin-top & margin-bottom 0px to 50px

border radius .borr-0 to borr-25 for border radius 0px to 25px
border width .borw-0 to borw25 for border width 0px to 25px
border right width .borrw-0 to borrw25 for border right width 0px to 25px
border left width .borlw-0 to borrw25 for border left width 0px to 25px
border top width .bortw-0 to borrw25 for border top width 0px to 25px
border bottom width .borbw-0 to borrw25 for border bottom width 0px to 25px
border horizontal width .borhw-0 to borrw25 for border right & left width width 0px to 25px
border vertical width .borvw-0 to borrw25 for border top & bottom width 0px to 25px

font size .fs-1 to fs-25 for font size 1px to 50px
font weight .fw-100, fw-200, ... , fw-600 for font-weight 100 to 600 (step value 100)

text align .ta-l, .ta-c, .ta-r for text-align left, right & center

line height .lh-1 to .lh-10 for line-height 1 to 10

overflow .of-h, of-a for overflow hidden & auto
overflow x .ofx-h, ofx-a for overflow-x hidden & auto
overflow y .ofy-h, ofy-a for overflow-y hidden & auto

height .h-0 to .h-500 for height 0px to 500px
min height .minh-0 to .minh-500 for min-height 0px to 500px
max height .maxh-0 to .maxh500 for max-height 0px to 500px

width .w-0 to .w-500 for width 0px to 500px
min width .minw-0 to .minw-500 for min-width 0px to 500px
max width .maxw-0 to .maxw-500 for max-width 0px to 500px

display .disp-inline, .disp-block, .disp-inline-block, .disp-flex, .disp-none for display inline|block|inline-block|flex|none

flex wrap .flw-wrap, .flw-nowrap, .flw-wrap-reverse, for flex: wrap|nowrap|wrap-reverse
justify content .jc-fs, .jc-fe, .jc-c, .jc-sa, .jc-sb for justify-content: flex-start|flex-end|center|space-around|space-between
align items .ai-fs, .ai-fe, .ai-c, .ai-s *for align-items: flex-start|flex-end|center|stretch
order .order-1 to .order-25 for order: 1px to 25px
flex grow .fg-1 to .fg-25 for flex-grow 1 to 25

Some Examples:

.pl-20 --> {padding-left: 20px;}, .ta-c --> {text-align:center;}, .ita-c --> {text-align:center!important;}, .mv-20 --> {margin-top:20px; margin-bottom:20px;}, .ai-s --> { align-items: stretch;}

Thanks
Sudhir Kumar K
Profile | Blog