Pure CSS Icons is extremely excited about the effects that html5, css3, and javascript (the web stack) will have on the future of web design. We have always been proponents of reusable, well written code, so it just seemed natural for us to create a place where web designers can come to find excellent, pre-written design elements that will speed up their development process. Why recreate (rewrite?) the wheel, right?

PureCSSIcons.com 2 Step Plan

Step 1 – The Showcase model

As you may have noticed this site is currently a “Showcase” site. Meaning it does not have much, if any, of its own original content; it simply links to sites/articles that we find relevant and and of high quality. However, at the time of this writing there is not another source like this purely for CSS3/HTML5 icons. It is nice, easy, and quick (and cheap) to start this way, but it is not the way we want the site to remain!

Step 2 – The Resource Model

Eventually (sooner than later), we hope to get the community involved in making the site a true destination for completed code distribution. What this means is we hope to have a plethora of content that is posted in a way something like this:

HTML

<div class="check-box">
	<div class="check-mark"></div>
</div>

CSS

.check-box {
	display:block;
	width:16px;
	height:16px;
	background-color: #000;
	border:solid 1px #999;
	border-radius:9px;
	-webkit-border-radius:9px;
	-moz-border-radius:9px;
	position:relative;
	}

.check-mark {
	display:block;
	width:8px;
	height:3px;
	border-left:2px solid #FFF;
	border-bottom:2px solid #FFF;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate (-45deg);
	position:relative;
	top:4px;
	left:3px;
	}

Notes

This can also (and probably more relevantly) be used in <span> tags. It would take a bit more effort to use these in place of bullets in an unordered list, but it can, and will, be done.