whitecss

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
whitecss
700.0.28 years ago8 years agoMinified + gzip package size for whitecss in KB

Readme

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

  1. 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

  1. 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 |

  1. 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 |

  1. 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 |

  1. Position

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

  1. 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 |

  1. 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 |