Adding no-sprite example

jakearchibald · Oct 10, 2012 · 244ea7a · 244ea7a
1 parent 1967767
commit 244ea7a
Show file tree

Hide file tree

Showing 23 changed files with 143 additions and 0 deletions.
diff --git a/no-sprites/bin/dev.sh b/no-sprites/bin/dev.sh
@@ -0,0 +1,2 @@
+sass -l --update style:style
+sass -l --watch  style:style
diff --git a/no-sprites/bin/prod.sh b/no-sprites/bin/prod.sh
@@ -0,0 +1 @@
+sass --style compressed --update style:style
diff --git a/no-sprites/index.html b/no-sprites/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" href="style/all.css">
+	</head>
+	<body>
+		<ul>
+			<li>
+				<span class="i i-amazon"></span>
+				amazon
+			</li>
+			<li>
+				<span class="i i-creativecommons"></span>
+				creativecommons
+			</li>
+			<li>
+				<span class="i i-email"></span>
+				email
+			</li>
+			<li>
+				<span class="i i-facebook"></span>
+				facebook
+			</li>
+			<li>
+				<span class="i i-feed"></span>
+				feed
+			</li>
+			<li>
+				<span class="i i-flickr"></span>
+				flickr
+			</li>
+			<li>
+				<span class="i i-foursquare"></span>
+				foursquare
+			</li>
+			<li>
+				<span class="i i-github"></span>
+				github
+			</li>
+			<li>
+				<span class="i i-google"></span>
+				google+
+			</li>
+			<li>
+				<span class="i i-instagram"></span>
+				instagram
+			</li>
+			<li>
+				<span class="i i-lanyrd"></span>
+				lanyrd
+			</li>
+			<li>
+				<span class="i i-lastfm"></span>
+				lastfm
+			</li>
+			<li>
+				<span class="i i-linkedin"></span>
+				linkedin
+			</li>
+			<li>
+				<span class="i i-reddit"></span>
+				reddit
+			</li>
+			<li>
+				<span class="i i-speakerdeck"></span>
+				speakerdeck
+			</li>
+			<li>
+				<span class="i i-twitter"></span>
+				twitter
+			</li>
+			<li>
+				<span class="i i-youtube"></span>
+				youtube
+			</li>
+		</ul>
+	</body>
+</html>
diff --git a/no-sprites/style/_components.scss b/no-sprites/style/_components.scss
@@ -0,0 +1,60 @@
+// icons
+	.i {
+		width: 48px;
+		height: 48px;
+		margin: 5px 0;
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.i-amazon {
+		background-image: url(imgs/social-icons/amazon.png);
+	}
+	.i-creativecommons {
+		background-image: url(imgs/social-icons/creativecommons.png);
+	}
+	.i-email {
+		background-image: url(imgs/social-icons/email.png);
+	}
+	.i-facebook {
+		background-image: url(imgs/social-icons/facebook.png);
+	}
+	.i-feed {
+		background-image: url(imgs/social-icons/feed.png);
+	}
+	.i-flickr {
+		background-image: url(imgs/social-icons/flickr.png);
+	}
+	.i-foursquare {
+		background-image: url(imgs/social-icons/foursquare.png);
+	}
+	.i-github {
+		background-image: url(imgs/social-icons/github.png);
+	}
+	.i-google {
+		background-image: url(imgs/social-icons/google.png);
+	}
+	.i-instagram {
+		background-image: url(imgs/social-icons/instagram.png);
+	}
+	.i-lanyrd {
+		background-image: url(imgs/social-icons/lanyrd.png);
+	}
+	.i-lastfm {
+		background-image: url(imgs/social-icons/lastfm.png);
+	}
+	.i-linkedin {
+		background-image: url(imgs/social-icons/linkedin.png);
+	}
+	.i-reddit {
+		background-image: url(imgs/social-icons/reddit.png);
+	}
+	.i-speakerdeck {
+		background-image: url(imgs/social-icons/speakerdeck.png);
+	}
+	.i-twitter {
+		background-image: url(imgs/social-icons/twitter.png);
+	}
+	.i-youtube {
+		background-image: url(imgs/social-icons/youtube.png);
+	}
diff --git a/no-sprites/style/_utils.scss b/no-sprites/style/_utils.scss
diff --git a/no-sprites/style/all.scss b/no-sprites/style/all.scss
@@ -0,0 +1,2 @@
+@import 'utils';
+@import 'components';
diff --git a/no-sprites/style/imgs/social-icons/amazon.png b/no-sprites/style/imgs/social-icons/amazon.png
diff --git a/no-sprites/style/imgs/social-icons/creativecommons.png b/no-sprites/style/imgs/social-icons/creativecommons.png
diff --git a/no-sprites/style/imgs/social-icons/email.png b/no-sprites/style/imgs/social-icons/email.png
diff --git a/no-sprites/style/imgs/social-icons/facebook.png b/no-sprites/style/imgs/social-icons/facebook.png
diff --git a/no-sprites/style/imgs/social-icons/feed.png b/no-sprites/style/imgs/social-icons/feed.png
diff --git a/no-sprites/style/imgs/social-icons/flickr.png b/no-sprites/style/imgs/social-icons/flickr.png
diff --git a/no-sprites/style/imgs/social-icons/foursquare.png b/no-sprites/style/imgs/social-icons/foursquare.png
diff --git a/no-sprites/style/imgs/social-icons/github.png b/no-sprites/style/imgs/social-icons/github.png
diff --git a/no-sprites/style/imgs/social-icons/google.png b/no-sprites/style/imgs/social-icons/google.png
diff --git a/no-sprites/style/imgs/social-icons/instagram.png b/no-sprites/style/imgs/social-icons/instagram.png
diff --git a/no-sprites/style/imgs/social-icons/lanyrd.png b/no-sprites/style/imgs/social-icons/lanyrd.png
diff --git a/no-sprites/style/imgs/social-icons/lastfm.png b/no-sprites/style/imgs/social-icons/lastfm.png
diff --git a/no-sprites/style/imgs/social-icons/linkedin.png b/no-sprites/style/imgs/social-icons/linkedin.png
diff --git a/no-sprites/style/imgs/social-icons/reddit.png b/no-sprites/style/imgs/social-icons/reddit.png
diff --git a/no-sprites/style/imgs/social-icons/speakerdeck.png b/no-sprites/style/imgs/social-icons/speakerdeck.png
diff --git a/no-sprites/style/imgs/social-icons/twitter.png b/no-sprites/style/imgs/social-icons/twitter.png
diff --git a/no-sprites/style/imgs/social-icons/youtube.png b/no-sprites/style/imgs/social-icons/youtube.png