0.0.2 • Published 8 years ago
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 |