optimized css files and improved README to reflect changes

kristianmandrup · Aug 13, 2012 · fa26530 · fa26530
1 parent c839ba4
commit fa26530
Show file tree

Hide file tree

Showing 11 changed files with 330 additions and 329 deletions.
diff --git a/README b/README
diff --git a/README.md b/README.md
@@ -0,0 +1,97 @@
+# SocialIcons
+
+This is a simple plugin to help you display some social icons in your site.
+
+Icons supported so far:
+
+- Facebook like button
+- Facebook
+- Twitter
+- Delicious
+- Reddit
+- Digg
+- Youtube (and many more...)
+
+## CSS files
+
+* social_icons_aqua
+* social_icons_aqua_all
+* social_icons_default_16
+* social_icons_default_20
+* social_icons_default_24
+* social_icons_default_48
+* social_icons_default_60
+
+## Adding custom sprite icon sets
+
+The sprites and CSS files were generated using [spritegen](http://spritegen.website-performance.org/)
+
+See the 'pictos-icons' and 'world-flags' gems for more examples and tools to generate your own sprite customization, including: grayscaling, lighten/darken icons etc.
+
+## Installation and usage
+
+This gem is a Rails 3 engine and the asset folder will therefore be included in the Rails asset pipeline when the gem is included in your Rails 3 project (add to Gemfile).
+
+Simply require the social_icons `css` files in your `application.css` manifest file.
+
+```css
+/*
+ *= require social_icons_aqua
+ *= require social_icons_default_24
+ *= require social_icons_default_60
+*/
+```
+
+If you are using SCSS and Compass use `@imports`, fx:
+
+```scss
+@import 'bourbon';
+@import 'compass';
+
+@import 'social_icons_aqua';
+@import 'social_icons_default_60';
+```
+
+## Using Aqua sprite
+
+Wrap with an element of class="social"
+
+```html
+<ul class="s16 aqua">
+	<li class="social google"></li>
+</ul> 
+```
+
+## Using Default sprite
+
+```html
+<ul class="s48">
+	<li class="social google"></li>
+</ul> 
+
+<ul class="s48 aqua">
+	<li class="social google"></li>
+</ul> 
+```
+
+## View Helper methods
+
+Call "print_social_icons" method in your partials or views.
+
+```erb
+<%= print_social_icons %>
+
+<%= print_social_icons :icon_set => 'default', :size => 20 %>
+```
+
+Specific icon methods:
+
+* facebook_like_button
+* social_icon_twitter
+* social_icon_facebook
+* social_icon_digg
+* social_icon_delicious
+* social_icon_reddit
+
+See `lib/social_icons/view_helpers.rb` for details ;)
+
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-0.2.2
+0.3.0
diff --git a/vendor/assets/stylesheets/social_icons.css b/vendor/assets/stylesheets/social_icons.css
diff --git a/vendor/assets/stylesheets/social_icons_aqua.css b/vendor/assets/stylesheets/social_icons_aqua.css
@@ -1,34 +1,40 @@
-.s64.aqua .social_sprites {
+ul.s64.aqua {
+  list-style-type: none;
+  padding: 0;
+  margin-left: 0;  
+}
+
+.s64.aqua .social {
   background: url(assets/social_icons/aquaticus/png/social_icons_aqua .png) no-repeat top left;
 }
 
-.s64.aqua .social.sprite-blogger{ background-position: 0 0; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-delicious{ background-position: 0 -114px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-digg{ background-position: 0 -228px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-facebook{ background-position: 0 -342px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-feed{ background-position: 0 -456px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-flickr{ background-position: 0 -570px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-friendfeed{ background-position: 0 -684px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-friendster{ background-position: 0 -798px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-furl{ background-position: 0 -912px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-google{ background-position: 0 -1026px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-lastfm{ background-position: 0 -1140px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-linkedin{ background-position: 0 -1254px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-livejournal{ background-position: 0 -1368px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-magnolia{ background-position: 0 -1482px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-mixx{ background-position: 0 -1596px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-myspace{ background-position: 0 -1710px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-netvibes{ background-position: 0 -1824px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-newsvine{ background-position: 0 -1938px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-picasa{ background-position: -114px 0; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-pownce{ background-position: -114px -114px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-reddit{ background-position: -114px -228px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-stumbleupon{ background-position: -114px -342px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-technorati{ background-position: -114px -456px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-twitter{ background-position: -114px -570px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-vimeo{ background-position: -114px -684px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-webshots{ background-position: -114px -798px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-wordpress{ background-position: -114px -912px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-yahoo{ background-position: -114px -1026px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-yelp{ background-position: -114px -1140px; width: 64px; height: 64px; } 
-.s64.aqua .social.sprite-youtube{ background-position: -114px -1254px; width: 64px; height: 64px; } 
+.s64.aqua .blogger{ background-position: 0 0; width: 64px; height: 64px; } 
+.s64.aqua .delicious{ background-position: 0 -114px; width: 64px; height: 64px; } 
+.s64.aqua .digg{ background-position: 0 -228px; width: 64px; height: 64px; } 
+.s64.aqua .facebook{ background-position: 0 -342px; width: 64px; height: 64px; } 
+.s64.aqua .feed{ background-position: 0 -456px; width: 64px; height: 64px; } 
+.s64.aqua .flickr{ background-position: 0 -570px; width: 64px; height: 64px; } 
+.s64.aqua .friendfeed{ background-position: 0 -684px; width: 64px; height: 64px; } 
+.s64.aqua .friendster{ background-position: 0 -798px; width: 64px; height: 64px; } 
+.s64.aqua .furl{ background-position: 0 -912px; width: 64px; height: 64px; } 
+.s64.aqua .google{ background-position: 0 -1026px; width: 64px; height: 64px; } 
+.s64.aqua .lastfm{ background-position: 0 -1140px; width: 64px; height: 64px; } 
+.s64.aqua .linkedin{ background-position: 0 -1254px; width: 64px; height: 64px; } 
+.s64.aqua .livejournal{ background-position: 0 -1368px; width: 64px; height: 64px; } 
+.s64.aqua .magnolia{ background-position: 0 -1482px; width: 64px; height: 64px; } 
+.s64.aqua .mixx{ background-position: 0 -1596px; width: 64px; height: 64px; } 
+.s64.aqua .myspace{ background-position: 0 -1710px; width: 64px; height: 64px; } 
+.s64.aqua .netvibes{ background-position: 0 -1824px; width: 64px; height: 64px; } 
+.s64.aqua .newsvine{ background-position: 0 -1938px; width: 64px; height: 64px; } 
+.s64.aqua .picasa{ background-position: -114px 0; width: 64px; height: 64px; } 
+.s64.aqua .pownce{ background-position: -114px -114px; width: 64px; height: 64px; } 
+.s64.aqua .reddit{ background-position: -114px -228px; width: 64px; height: 64px; } 
+.s64.aqua .stumbleupon{ background-position: -114px -342px; width: 64px; height: 64px; } 
+.s64.aqua .technorati{ background-position: -114px -456px; width: 64px; height: 64px; } 
+.s64.aqua .twitter{ background-position: -114px -570px; width: 64px; height: 64px; } 
+.s64.aqua .vimeo{ background-position: -114px -684px; width: 64px; height: 64px; } 
+.s64.aqua .webshots{ background-position: -114px -798px; width: 64px; height: 64px; } 
+.s64.aqua .wordpress{ background-position: -114px -912px; width: 64px; height: 64px; } 
+.s64.aqua .yahoo{ background-position: -114px -1026px; width: 64px; height: 64px; } 
+.s64.aqua .yelp{ background-position: -114px -1140px; width: 64px; height: 64px; } 
+.s64.aqua .youtube{ background-position: -114px -1254px; width: 64px; height: 64px; } 
diff --git a/vendor/assets/stylesheets/social_icons_aqua_all.css b/vendor/assets/stylesheets/social_icons_aqua_all.css
@@ -1,4 +1,10 @@
-.s64.aqua .ss {
+ul.s16, ul.s20, ul.s24, ul.s48, ul.s60 {
+  list-style-type: none;
+  padding: 0;
+  margin-left: 0;  
+}
+
+.s64.aqua .social {
     background: url(/assets/social_icons/aquaticus/social_icons_aqua_64.png) no-repeat top left;
 }
 
@@ -9,7 +15,7 @@
 .s64.aqua .vimeo{ background-position: 0 -456px; width: 64px; height: 64px; } 
 .s64.aqua .youtube{ background-position: 0 -570px; width: 64px; height: 64px; } 
 
-.s32.aqua .ss {
+.s32.aqua .social {
     background: url(/assets/social_icons/aquaticus/social_icons_aqua_32.png) no-repeat top left;
 }
 
@@ -20,7 +26,7 @@
 .s32.aqua .vimeo{ background-position: 0 -328px; width: 32px; height: 32px; } 
 .s32.aqua .youtube{ background-position: 0 -410px; width: 32px; height: 32px; } 
 
-.s16.aqua .ss {
+.s16.aqua .social {
   background: url(/assets/social_icons/aquaticus/social/social_icons_aqua_16.png) no-repeat top left;
 }
 
@@ -31,7 +37,7 @@
 .s16.aqua .vimeo{ background-position: 0 -80px; width: 16px; height: 16px; } 
 .s16.aqua .youtube{ background-position: 0 -100px; width: 16px; height: 16px; } 
 
-.s24.aqua .ss {
+.s24.aqua .social {
   background: url(/assets/social_icons/aquaticus/social_icons_aqua_24.png) no-repeat top left;
 }
 
@@ -41,33 +47,3 @@
 .s24.aqua .twitter{ background-position: 0 -84px; width: 24px; height: 24px; } 
 .s24.aqua .vimeo{ background-position: 0 -112px; width: 24px; height: 24px; } 
 .s24.aqua .youtube{ background-position: 0 -140px; width: 24px; height: 24px; } 
-
-ul.social_sprites {
-  list-style-type: none;
-  padding: 0;
-  margin-left: 0;  
-}
-
-ul.social_sprites .l {
-  float: left;
-}
-
-.social_sprites.border li.ss {
-  border: 1px solid black;
-}
-
-.s16.social_sprites li.ss {
-  line-height: 16px;
-}
-
-.s24.social_sprites li.ss {
-  line-height: 24px;
-}
-
-.s32.social_sprites li.ss {
-  line-height: 32px; 
-}
-
-.s64.social_sprites li.ss {
-  line-height: 64px; 
-}