WhiteCss

WhiteCSS is CSS utility framework, whitecss provides many usable class utilities for margin, padding, border, font, color etc.

Using npm

npm install whitecss --save

Using bower

bower install whitecss --save

Utilities

1. Margin

CLASS STYLE
.m-xxs margin: 2px
.m-xs margin: 5px
.m-sm margin: 10px
.m-md margin: 15px
.m-lg margin: 30px
.m-xlg margin: 50px
.m-xxlg margin: 100px
.m-none margin: 0
.m-t-none margin-top: 0
.m-r-none margin-right: 0
.m-b-none margin-bottom: 0
.m-l-none margin-left: 0
.m-x-none margin-left: 0; margin-right: 0
.m-y-none margin-top: 0; margin-bottom: 0
--- ---
.m-auto margin: auto
.m-l-auto margin-left: auto
.m-r-auto margin-right: auto
.m-x-auto margin-left: auto; margin-right: auto
CLASS STYLE
.m-t-sm margin-top: 10px
.m-r-sm margin-right: 10px
.m-b-sm margin-bottom: 10px
.m-l-sm margin-left: 10px
.m-x-sm margin-left: 10px, margin-right: 10px
.m-y-sm margin-top: 10px, margin-bottom: 10px

Same classes works for xss,xs,md,lg,xlg,xxlg just replace suffix with sm

2. Padding

CLASS STYLE
.p-xxs padding: 2px
.p-xs padding: 5px
.p-sm padding: 10px
.p-md padding: 15px
.p-lg padding: 30px
.p-xlg padding: 50px
.p-xxlg padding: 100px
.p-none padding: 0
.p-t-none padding-top: 0
.p-r-none padding-right: 0
.p-b-none padding-bottom: 0
.p-l-none padding-left: 0
.p-x-none padding-left: 0; padding-right: 0
.p-y-none padding-top: 0; padding-bottom: 0
CLASS STYLE
.p-t-sm padding-top: 10px
.p-r-sm padding-right: 10px
.p-b-sm padding-bottom: 10px
.p-l-sm padding-left: 10px
.p-x-sm padding-left: 10px, padding-right: 10px
.p-y-sm padding-top: 10px, padding-bottom: 10px

Same classes works for xss,xs,md,lg,xlg,xxlg just replace suffix with sm

3. Font

CLASS STYLE
.font-xs, .h6 font-size: 12px
.font-sm, .h5 font-size: 14px
.font-md, .h4 font-size: 18px
.font-lg, .h3 font-size: 24px
.font-xlg, .h2 font-size: 30px
.font-xxlg, .h1 font-size: 36px
.text-primary color: #2e6da4
.text-success color: #398439
.text-default color: #cccccc
.text-info color: #269abc
.text-warning color: #d58512
.text-danger color: #d43f3a

4. Border

CLASS STYLE
.b border-width: 1px
.b-t border-top-width: 1px
.b-r border-right-width: 1px
.b-b border-bottom-width: 1px
.b-l border-left-width: 1px
.b-primary border-color: #2e6da4
.b-success border-color: #398439
.b-default border-color: #cccccc
.b-info border-color: #269abc
.b-warning border-color: #d58512
.b-danger border-color: #d43f3a

5. Color

CLASS STYLE
.bg-primary background-color: #2e6da4
.bg-success background-color: #398439
.bg-default background-color: #cccccc
.bg-info background-color: #269abc
.bg-warning background-color: #d58512
.bg-danger background-color: #d43f3a

6. Position

CLASS STYLE
.p-relative position: relative
.p-absolute position: absolute
.p-fixed position: fixed
.p-static position: static

7. Width

CLASS STYLE
.w-10 width: 10% !important
.w-20 width: 20% !important
.w-25 width: 25% !important
.w-30 width: 30% !important
.w-40 width: 40% !important
.w-50 width: 50% !important
.w-60 width: 60% !important
.w-70 width: 70% !important
.w-75 width: 75% !important
.w-80 width: 80% !important
.w-90 width: 90% !important
.w-100 width: 100% !important
--- ---
.w-xss width: 50px !important
.w-xs width: 100px !important
.w-sm width: 150px !important
.w-md width: 300px !important
.w-lg width: 500px !important
.w-xlg width: 750px !important
.w-xxlg width: 900px !important

8. Typography

CLASS STYLE
.t-bold font-weight: bold;
.t-regular font-weight: 400;
.t-italic font-style: italic;
.t-capital text-transform: uppercase; letter-spacing: .25em;
.t-left text-align: left
.t-center text-align: center
.t-right text-align: right
.t-justify text-align: justify
.t-no-wrap white-space: nowrap
.t-underline text-decoration: underline
.t-deco-none text-decoration: none