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] (#2-padding)
• [Font] (#3-font)
• [Border] (#4-border)
• [Color] (#5-color)
• [Position] (#6-position)
• [Width] (#7-width)
• [Typography] (#8-typography)
• [Colors] (#9-colors)

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

9. Colors

CLASS	VALUE
.c-alice-blue	{color: #f0f8ff;}
.c-antique-white	{color: #faebd7;}
.c-aqua	{color: #00ffff;}
.c-aquamarine	{color: #7fffd4;}
.c-azure	{color: #f0ffff;}
.c-beige	{color: #f5f5dc;}
.c-bisque	{color: #ffe4c4;}
.c-black	{color: #000000;}
.c-blanched-almond	{color: #ffebcd;}
.c-blue	{color: #0000ff;}
.c-blue-violet	{color: #8a2be2;}
.c-brown	{color: #a52a2a;}
.c-burly-wood	{color: #deb887;}
.c-cadet-blue	{color: #5f9ea0;}
.c-chartreuse	{color: #7fff00;}
.c-chocolate	{color: #d2691e;}
.c-coral	{color: #ff7f50;}
.c-cornflower-blue	{color: #6495ed;}
.c-cornsilk	{color: #fff8dc;}
.c-crimson	{color: #dc143c;}
.c-cyan	{color: #00ffff;}
.c-dark-blue	{color: #00008b;}
.c-dark-cyan	{color: #008b8b;}
.c-dark-golden-rod	{color: #b8860b;}
.c-dark-gray	{color: #a9a9a9;}
.c-dark-grey	{color: #a9a9a9;}
.c-dark-green	{color: #006400;}
.c-dark-khaki	{color: #bdb76b;}
.c-dark-magenta	{color: #8b008b;}
.c-dark-olive-green	{color: #556b2f;}
.c-dark-orange	{color: #ff8c00;}
.c-dark-orchid	{color: #9932cc;}
.c-dark-red	{color: #8b0000;}
.c-dark-salmon	{color: #e9967a;}
.c-dark-sea-green	{color: #8fbc8f;}
.c-dark-slate-blue	{color: #483d8b;}
.c-dark-slate-gray	{color: #2f4f4f;}
.c-dark-slate-grey	{color: #2f4f4f;}
.c-dark-turquoise	{color: #00ced1;}
.c-dark-violet	{color: #9400d3;}
.c-deep-pink	{color: #ff1493;}
.c-deep-sky-blue	{color: #00bfff;}
.c-dim-gray	{color: #696969;}
.c-dim-grey	{color: #696969;}
.c-dodger-blue	{color: #1e90ff;}
.c-fire-brick	{color: #b22222;}
.c-floral-white	{color: #fffaf0;}
.c-forest-green	{color: #228b22;}
.c-fuchsia	{color: #ff00ff;}
.c-gainsboro	{color: #dcdcdc;}
.c-ghost-white	{color: #f8f8ff;}
.c-gold	{color: #ffd700;}
.c-golden-rod	{color: #daa520;}
.c-gray	{color: #808080;}
.c-grey	{color: #808080;}
.c-green	{color: #008000;}
.c-green-yellow	{color: #adff2f;}
.c-honey-dew	{color: #f0fff0;}
.c-hot-pink	{color: #ff69b4;}
.c-indian-red	{color: #cd5c5c;}
.c-indigo	{color: #4b0082;}
.c-ivory	{color: #fffff0;}
.c-khaki	{color: #f0e68c;}
.c-lavender	{color: #e6e6fa;}
.c-lavender-blush	{color: #fff0f5;}
.c-lawn-green	{color: #7cfc00;}
.c-lemon-chiffon	{color: #fffacd;}
.c-light-blue	{color: #add8e6;}
.c-light-coral	{color: #f08080;}
.c-light-cyan	{color: #e0ffff;}
.c-light-golden-rod-yellow {color: #fafad2;}
.c-light-gray	{color: #d3d3d3;}
.c-light-grey	{color: #d3d3d3;}
.c-light-green	{color: #90ee90;}
.c-light-pink	{color: #ffb6c1;}
.c-light-salmon	{color: #ffa07a;}
.c-light-sea-green	{color: #20b2aa;}
.c-light-sky-blue	{color: #87cefa;}
.c-light-slate-gray	{color: #778899;}
.c-light-slate-grey	{color: #778899;}
.c-light-steel-blue	{color: #b0c4de;}
.c-light-yellow	{color: #ffffe0;}
.c-lime	{color: #00ff00;}
.c-lime-green	{color: #32cd32;}
.c-linen	{color: #faf0e6;}
.c-magenta	{color: #ff00ff;}
.c-maroon	{color: #800000;}
.c-medium-aqua-marine{color: #66cdaa;}
.c-medium-blue	{color: #0000cd;}
.c-medium-orchid	{color: #ba55d3;}
.c-medium-purple	{color: #9370db;}
.c-medium-sea-green	{color: #3cb371;}
.c-medium-slate-blue	{color: #7b68ee;}
.c-medium-spring-green {color: #00fa9a;}
.c-medium-turquoise	{color: #48d1cc;}
.c-medium-violet-red	{color: #c71585;}
.c-midnight-blue	{color: #191970;}
.c-mint-cream	{color: #f5fffa;}
.c-misty-rose	{color: #ffe4e1;}
.c-moccasin	{color: #ffe4b5;}
.c-navajo-white	{color: #ffdead;}
.c-navy	{color: #000080;}
.c-old-lace	{color: #fdf5e6;}
.c-olive	{color: #808000;}
.c-olive-drab	{color: #6b8e23;}
.c-orange	{color: #ffa500;}
.c-orange-red	{color: #ff4500;}
.c-orchid	{color: #da70d6;}
.c-pale-golden-rod	{color: #eee8aa;}
.c-pale-green	{color: #98fb98;}
.c-pale-turquoise	{color: #afeeee;}
.c-pale-violet-red	{color: #db7093;}
.c-papaya-whip	{color: #ffefd5;}
.c-peach-puff	{color: #ffdab9;}
.c-peru	{color: #cd853f;}
.c-pink	{color: #ffc0cb;}
.c-plum	{color: #dda0dd;}
.c-powder-blue	{color: #b0e0e6;}
.c-purple	{color: #800080;}
.c-rebecca-purple	{color: #663399;}
.c-red	{color: #ff0000;}
.c-rosy-brown	{color: #bc8f8f;}
.c-royal-blue	{color: #4169e1;}
.c-saddle-brown	{color: #8b4513;}
.c-salmon	{color: #fa8072;}
.c-sandy-brown	{color: #f4a460;}
.c-sea-green	{color: #2e8b57;}
.c-sea-shell	{color: #fff5ee;}
.c-sienna	{color: #a0522d;}
.c-silver	{color: #c0c0c0;}
.c-sky-blue	{color: #87ceeb;}
.c-slate-blue	{color: #6a5acd;}
.c-slate-gray	{color: #708090;}
.c-slate-grey	{color: #708090;}
.c-snow	{color: #fffafa;}
.c-spring-green	{color: #00ff7f;}
.c-steel-blue	{color: #4682b4;}
.c-tan	{color: #d2b48c;}
.c-teal	{color: #008080;}
.c-thistle	{color: #d8bfd8;}
.c-tomato	{color: #ff6347;}
.c-turquoise	{color: #40e0d0;}
.c-violet	{color: #ee82ee;}
.c-wheat	{color: #f5deb3;}
.c-white	{color: #ffffff;}
.c-white-smoke	{color: #f5f5f5;}
.c-yellow	{color: #ffff00;}
.c-yellow-green	{color: #9acd32;}