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

• Margin
• Padding
• Font
• Border
• Color
• Position
• Width
• Typography

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