Donation Center Pattern Library

dabblet.css

/**
 * Donation Center Pattern Library
 */

ul {
	list-style: none;
	overflow: auto;
}

li {
	float: left;
	margin: 0 0 30px 30px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

li span {
	display: block;
	width: 135px;
	height: 135px;
	margin: 0 0 10px 0;
}

li p {
	margin: 5px;
}


/**
 * Begin Patterns
 */


/* Solids */

.bg-off-white {
	background-color: #f7f7f7;
}

.bg-bright-green {
	background-color: #7ABA40;
}

.bg-light-green {
	background-color: #F2F9F0;
}

.bg-gray {
	background-color: #DADADA;
}


/* Gradients */

.grad-green {
	background-color: #477829;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#78a24a), to(#104e04));
	background-image: -webkit-linear-gradient(top, #78a24a, #104e04);
	background-image: -moz-linear-gradient(top, #78a24a, #104e04);
	background-image: -ms-linear-gradient(top, #78a24a, #104e04);
	background-image: -o-linear-gradient(top, #78a24a, #104e04);
	background-image: linear-gradient(top, #78a24a, #104e04);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#78a24a', endColorstr='#104e04',GradientType=0);
}

.grad-light-gray {
	background-color: #fafafa;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f9f9f9));
	background-image: -webkit-linear-gradient(top, #fafafa, #f9f9f9);
	background-image: -moz-linear-gradient(top, #fafafa, #f9f9f9);
	background-image: -ms-linear-gradient(top, #fafafa, #f9f9f9);
	background-image: -o-linear-gradient(top, #fafafa, #f9f9f9);
	background-image: linear-gradient(top, #fafafa, #f9f9f9);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f9f9f9',GradientType=0);
}

.grad-gray {
	background-color: #DADADA;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#BEBEBE));
	background-image: -webkit-linear-gradient(top, #FAFAFA 0%, #BEBEBE 100%);
	background-image: -moz-linear-gradient(top, #FAFAFA 0%, #BEBEBE 100%);
	background-image: -ms-linear-gradient(top, #FAFAFA 0%, #BEBEBE 100%);
	background-image: -o-linear-gradient(top, #FAFAFA 0%, #BEBEBE 100%);
	background-image: linear-gradient(top, #FAFAFA 0%, #BEBEBE 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#BEBEBE',GradientType=0);
}

dabblet.html

<ul>
	<li>
		<span class="bg-off-white"></span>
		<p>bg-off-white</p>
	</li>
	<li>
		<span class="bg-light-green"></span>
		<p>bg-light-green</p>
	</li>
	<li>
		<span class="bg-bright-green"></span>
		<p>bg-bright-green</p>
	</li>
	<li>
		<span class="bg-gray"></span>
		<p>bg-gray</p>
	</li>
</ul>

<ul>
	<li>
		<span class="grad-green"></span>
		<p>grad-green</p>
	</li>
	<li>
		<span class="grad-light-gray"></span>
		<p>grad-light-gray</p>
	</li>
	<li>
		<span class="grad-gray"></span>
		<p>grad-gray</p>
	</li>
</ul>

settings.json

{"view":"split","prefixfree":"","page":"html"}