<div id="social-container">
<table>
<th>Branding Link (abrv.)</th>
<th>Third Size</th>
<th>Half Size</th>
<th>Full Size</th>
<th>#HEX</th>
<th>AddThis Follow Attributes</th>
<tr>
<td><a href=" https://www.facebookbrand.com/##" class="social-item si-txt si-txt-fb" Title="Facebook">Facebook (fb)</a></td>
<td><a href="#Facebook" class="social-item si-bg-third si-bg-fb-third si-fb" title="Facbook">Facebook</a></td>
<td><a href="#Facebook" class="social-item si-bg-half si-bg-fb-color-half si-fb" title="Facbook">Facebook</a></td>
<td><a href="#Facebook" class="social-item si-bg-full si-bg-fb-full si-fb" title="Facbook">Facebook</a></td>
<td class="si-bg-fb si-txt-base">#3B5998</td>
<td class="si-bg-fb">add class : addthis_button_facebook_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
<tr>
<td><a href="https://about.twitter.com/press/brand-assets/#" class="social-item si-txt si-txt-tw" Title="Twitter">Twitter (tw)</a></td>
<td><a href="#Twitter" class="social-item si-bg-third si-bg-tw-third si-tw" title="Twitter">Twitter</a></td>
<td><a href="#Twitter" class="social-item si-bg-half si-bg-tw-color-half si-tw" title="Twitter">Twitter</a></td>
<td><a href="#Twitter" class="social-item si-bg-full si-bg-tw-full si-tw" title="Twitter">Twitter</a></td>
<td class="si-bg-tw si-txt-base">#55ACEE</td>
<td class="si-bg-tw">add class : addthis_button_twitter_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
<tr>
<td><a href="https://www.tumblr.com/logo/##" class="social-item si-txt si-txt-tu" Title="Tumblr">Tumblr (tu)</a></td>
<td><a href="#Tumblr" class="social-item si-bg-third si-bg-tu-third si-tu" title="Tumblr">Tumblr</a></td>
<td><a href="#Tumblr" class="social-item si-bg-half si-bg-tu-color-half si-tu" title="Tumblr">Tumblr</a></td>
<td><a href="#Tumblr" class="social-item si-bg-full si-bg-tu-full si-tu" title="Tumblr">Tumblr</a></td>
<td class="si-bg-tu si-txt-base">#35465C</td>
<td class="si-bg-tu">add class : addthis_button_tumblr_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
<tr>
<td><a href="https://press.linkedin.com/Media-Resources?SubjectID=644/#
" class="social-item si-txt si-txt-in" Title="LinkedIn">LinkedIn (in)</a></td>
<td><a href="#LinkedIn" class="social-item si-bg-third si-bg-in-third si-in" Title="LinkedIn">LinkedIn</a></td>
<td><a href="#LinkedIn" class="social-item si-bg-half si-bg-in-color-half si-in" Title="LinkedIn">LinkedIn</a></td>
<td><a href="#LinkedIn" class="social-item si-bg-full si-bg-in-full si-in" Title="LinkedIn">LinkedIn</a></td>
<td class="si-bg-in si-txt-base">#0976B4</td>
<td class="si-bg-in">add class : addthis_button_linkedin_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
<tr>
<td><a href="https://business.pinterest.com/en/brand-guidelines/#" class="social-item si-txt si-txt-pin" Title="Pinterest">Pinterest (pin)</a></td>
<td><a href="#Pinterest" class="social-item si-bg-third si-bg-pin-third si-pin" Title="Pinterest">Flickr</a></td>
<td><a href="#Pinterest" class="social-item si-bg-half si-bg-pin-color-half si-pin" Title="Pinterest">Flickr</a></td>
<td><a href="#Pinterest" class="social-item si-bg-full si-bg-pin-full si-pin" Title="Pinterest">Flickr</a></td>
<td class="si-bg-pin si-txt-base">#CC2127</td>
<td class="si-bg-pin">add class : addthis_button_pinterest_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
<tr>
<td><a href="https://developers.google.com/+/branding-guidelines/#" class="social-item si-txt si-txt-gp" Title="Google+">Google+ (gp)</a></td>
<td><a href="#Google+" class="social-item si-bg-third si-bg-gp-third si-gp" title="Google+">Google+</a></td>
<td><a href="#Google+" class="social-item si-bg-half si-bg-gp-color-half si-gp" title="Google+">Google+</a></td>
<td><a href="#Google+" class="social-item si-bg-full si-bg-gp-full si-gp" title="Google+">Google+</a></td>
<td class="si-bg-gp si-txt-base">#DD4B39</td>
<td class="si-bg-gp">add class : addthis_button_google_follow<br> add tag attribure : addthis:userid="{username/plus #}"</td>
</tr>
<tr>
<td><a href="https://www.behance.net/dev/api/brand/#" class="social-item si-txt si-txt-be" Title="Behance">Behance (be)</a></td>
<td><a href="#BeHance" class="social-item si-bg-third si-bg-be-third si-be" title="BeHance">BeHance</a></td>
<td><a href="#BeHance" class="social-item si-bg-half si-bg-be-color-half si-be" title="BeHance">BeHance</a></td>
<td><a href="#BeHance" class="social-item si-bg-full si-bg-be-full si-be" title="BeHance">BeHance</a></td>
<td class="si-bg-be si-txt-base">#1769FF</td>
<td class="si-bg-be">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
</tr>
<tr>
<td><a href="http://instagram.com/press/#" class="social-item si-txt si-txt-inst" Title="Instagram">Instagram (inst)</a></td>
<td><a href="#Instagram" class="social-item si-bg-third si-bg-inst-third si-inst" title="Instagram">Instagram</a></td>
<td><a href="#Instagram" class="social-item si-bg-half si-bg-inst-color-half si-inst" title="Instagram">Instagram</a></td>
<td><a href="#Instagram" class="social-item si-bg-full si-bg-inst-full si-inst" title="Instagram">Instagram</a></td>
<td class="si-bg-inst si-txt-base">#3F729B</td>
<td class="si-bg-inst">add class : addthis_button_instagram_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
</tr>
<tr>
<td><a href="https://www.flickr.com/about/goodies/#" class="social-item si-txt si-txt-fkr" Title="Flickr">Flickr (fkr)</a></td>
<td><a href="#Flickr" class="social-item si-bg-third si-bg-fkr-third si-fkr" Title="Flickr">Flickr</a></td>
<td><a href="#Flickr" class="social-item si-bg-half si-bg-fkr-color-half si-fkr" Title="Flickr">Flickr</a></td>
<td><a href="#Flickr" class="social-item si-bg-full si-bg-fkr-full si-fkr" Title="Flickr">Flickr</a></td>
<td class="si-bg-fkr si-txt-base">#333333</td>
<td class="si-bg-fkr">add class : addthis_button_flickr_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
</tr>
<tr>
<td><a href="https://www.youtube.com/yt/brand/downloads.html/#" class="social-item si-txt si-txt-you" Title="YouTube">YouTube (you)</a></td>
<td><a href="#YouTube" class="social-item si-bg-third si-bg-you-third si-you" Title="YouTube">YouTube</a></td>
<td><a href="#YouTube" class="social-item si-bg-half si-bg-you-color-half si-you" Title="YouTube">YouTube</a></td>
<td><a href="#YouTube" class="social-item si-bg-full si-bg-you-full si-you" Title="YouTube">YouTube</a></td>
<td class="si-bg-you si-txt-base">#CD201F</td>
<td class="si-bg-you">add class : addthis_button_youtube_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
</tr>
<tr>
<td><a href="https://vimeo.com/about/brand_guidelines/#" class="social-item si-txt si-txt-vi" Title="Vimeo">Vimeo (vi)</a></td>
<td><a href="#Vimeo" class="social-item si-bg-third si-bg-vi-third si-vi" Title="Vimeo">Vimeo</a></td>
<td><a href="#Vimeo" class="social-item si-bg-half si-bg-vi-color-half si-vi" Title="Vimeo">Vimeo</a></td>
<td><a href="#Vimeo" class="social-item si-bg-full si-bg-vi-full si-vi" Title="Vimeo">Vimeo</a></td>
<td class="si-bg-vi si-txt-base">#1AB7EA</td>
<td class="si-bg-vi">add class : addthis_button_vimeo_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
</tr>
<tr>
<td><a href="https://spotify.app.box.com/s/80a54bel3g6rlhk8fty4/#" class="social-item si-txt si-txt-spot" Title="Spotify">Spotify (spot)</a></td>
<td> <a href="#Spotify" class="social-item si-bg-third si-bg-spot-third si-spot" Title="Spotif">Spotify</a></td>
<td> <a href="#Spotify" class="social-item si-bg-half si-bg-spot-color-half si-spot" Title="Spotif">Spotify</a></td>
<td> <a href="#Spotify" class="social-item si-bg-full si-bg-spot-full si-spot" Title="Spotif">Spotify</a></td>
<td class="si-bg-spot si-txt-base">#669900</td>
<td class="si-bg-spot">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
<tr>
<td><a href="http://www.last.fm/about/resources/#" class="social-item si-txt si-txt-fm" Title="LastFM">LastFM (fm)</a></td>
<td><a href="#LastFM" class="social-item si-bg-third si-bg-fm-third si-fm" Title="LastFM">LastFM</a></td>
<td><a href="#LastFM" class="social-item si-bg-half si-bg-fm-color-half si-fm" Title="LastFM">LastFM</a></td>
<td><a href="#LastFM" class="social-item si-bg-full si-bg-fm-full si-fm" Title="LastFM">LastFM</a></td>
<td class="si-bg-fm si-txt-base">#C3000D</td>
<td class="si-bg-fm">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
<tr>
<td><a href="http://grooveshark.com/#!/logo/#" class="social-item si-txt si-txt-gs" Title="GrooveShark">GrooveShark (gs)</a></td>
<td><a href="#GrooveShark" class="social-item si-bg-third si-bg-gs-third si-gs" Title="GrooveShark">GrooveShark</a></td>
<td><a href="#GrooveShark" class="social-item si-bg-half si-bg-gs-color-half si-gs" Title="GrooveShark">GrooveShark</a></td>
<td><a href="#GrooveShark" class="social-item si-bg-full si-bg-gs-full si-gs" Title="GrooveShark">GrooveShark</a></td>
<td class="si-bg-gs si-txt-base">#F86F09</td>
<td class="si-bg-gs">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
<tr>
<td><a href="https://dev.evernote.com/appcenter/best_practices.php/#" class="social-item si-txt si-txt-en" Title="Evernote">Evernote (en)</a></td>
<td><a href="#Evernote" class="social-item si-bg-third si-bg-en-third si-en" Title="Evernote">Evernote</a></td>
<td><a href="#Evernote" class="social-item si-bg-half si-bg-en-color-half si-en" Title="Evernote">Evernote</a></td>
<td><a href="#Evernote" class="social-item si-bg-full si-bg-en-full si-en" Title="Evernote">Evernote</a></td>
<td class="si-bg-en si-txt-base">#7AC142</td>
<td class="si-bg-en">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
<tr>
<td><a href="https://bufferapp.com/press/#" class="social-item si-txt si-txt-buff" Title="Buffer">Buffer (buff)</a></td>
<td><a href="#Buffer" class="social-item si-bg-third si-bg-buff-third si-buff" Title="Buffer">Buffer</a></td>
<td><a href="#Buffer" class="social-item si-bg-half si-bg-buff-color-half si-buff" Title="Buffer">Buffer</a></td>
<td><a href="#Buffer" class="social-item si-bg-full si-bg-buff-full si-buff" Title="Buffer">Buffer</a></td>
<td class="si-bg-buff si-txt-base">#202326</td>
<td class="si-bg-buff">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
<tr>
<td><a href="https://delicious.com/branding/#" class="social-item si-txt si-txt-del" Title="Delicious">Delicious (del)</a></td>
<td><a href="#Delicious" class="social-item si-bg-third si-bg-del-third si-del" Title="Delicious">Delicious</a></td>
<td><a href="#Delicious" class="social-item si-bg-half si-bg-del-color-half si-del" Title="Delicious">Delicious</a></td>
<td><a href="#Delicious" class="social-item si-bg-full si-bg-del-full si-del" Title="Delicious">Delicious</a></td>
<td class="si-bg-del si-txt-base">#3399ff</td>
<td class="si-bg-del">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
<tr>
<td><a href="https://foursquare.com/about/logos/#" class="social-item si-txt si-txt-frsq" Title="FourSquare">FourSquare (frsq)</a></td>
<td><a href="#FourSquare" class="social-item si-bg-third si-bg-frsq-third si-frsq" title="FourSquare">FourSquare</a></td>
<td><a href="#FourSquare" class="social-item si-bg-half si-bg-frsq-color-half si-frsq" title="FourSquare">FourSquare</a></td>
<td><a href="#FourSquare" class="social-item si-bg-full si-bg-frsq-full si-frsq" title="FourSquare">FourSquare</a></td>
<td class="si-bg-frsq si-txt-base">#F94877</td>
<td class="si-bg-frsq">add class : addthis_button_foursquare_follow<br> add tag attribure : addthis:userid="{username}"</td>
</tr>
<tr>
<td><a href="https://github.com/logos/#" class="social-item si-txt si-txt-git" Title="FourSquare">GitHub (git)</a></td>
<td><a href="#GitHub" class="social-item si-bg-third si-bg-git-third si-git" title="GitHub">GitHub</a></td>
<td><a href="#GitHub" class="social-item si-bg-half si-bg-git-color-half si-git" title="GitHub">GitHub</a></td>
<td><a href="#GitHub" class="social-item si-bg-full si-bg-git-full si-git" title="GitHub">GitHub</a></td>
<td class="si-bg-git si-txt-base">#FF9933</td>
<td class="si-bg-git">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
<tr>
<td><a href="http://www.feedicons.com/#" class="social-item si-txt si-txt-rss" Title="RSS">RSS (rss)</a></td>
<td><a href="#RSS" class="social-item si-bg-third si-bg-rss-third si-rss" title="Rss Feed">RSS Feed</a></td>
<td><a href="#RSS" class="social-item si-bg-half si-bg-rss-color-half si-rss" title="Rss Feed">RSS Feed</a></td>
<td><a href="#RSS" class="social-item si-bg-full si-bg-rss-full si-rss" title="Rss Feed">RSS Feed</a></td>
<td class="si-bg-rss si-txt-base">#F26522</td>
<td class="si-bg-rss">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{rss_url}"</td>
</tr>
<tr>
<td><a href="https://www.dropbox.com/branding/#" class="social-item si-txt si-txt-db" Title="Dropbox">Dropbox (db)</a></td>
<td><a href="#Dropbox" class="social-item si-bg-third si-bg-db-third si-db" Title="Dropbox">Dropbox</a></td>
<td><a href="#Dropbox" class="social-item si-bg-half si-bg-db-color-half si-db" Title="Dropbox">Dropbox</a></td>
<td><a href="#Dropbox" class="social-item si-bg-full si-bg-db-full si-db" Title="Dropbox">Dropbox</a></td>
<td class="si-bg-db si-txt-base">#007EE5</td>
<td class="si-bg-db">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
<tr>
<td><a href=" http://en.wikipedia.org/wiki/Email/#" class="social-item si-txt si-txt-em" Title="E-Mail">E-Mail (em)</a></td>
<td><a href="#Email" class="social-item si-bg-third si-bg-em-third si-em" Title="Email">Email</a></td>
<td><a href="#Email" class="social-item si-bg-half si-bg-em-color-half si-em" Title="Email">Email</a></td>
<td><a href="#Email" class="social-item si-bg-full si-bg-em-full si-em" Title="Email">Email</a></td>
<td class="si-bg-em si-txt-base">#AABBCC</td>
<td class="si-bg-em">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="mailto:{email}" or "{page_url}"</td>
</tr>
<tr>
<td><a href="http://www.feedly.com/publishers.html/#" class="social-item si-txt si-txt-feedly" Title="Feedly">Feedly(feedly)</a></td>
<td><a href="#Dropbox" class="social-item si-bg-third si-bg-feedly-third si-feedly" Title="Feedly">Feedly</a></td>
<td><a href="#Feedly" class="social-item si-bg-half si-bg-feedly-color-half si-feedly" Title="Feedly">Feedly</a></td>
<td><a href="#Feedly" class="social-item si-bg-full si-bg-feedly-full si-feedly" Title="Feedly">Feedly</a></td>
<td class="si-bg-feedly si-txt-base">#6cc655</td>
<td class="si-bg-feedly">add class : addthis_button_rss_follow<br> add tag attribure : addthis:userid="{page_url}"</td>
</tr>
</table>
</div>
@import "compass/css3";
/*override for demo page */
#social-container table .social-item{float: none !important;}#social-container a:visited{ color:#ddd;}#social-container th {min-width:130px;background-color:#bbb;}#social-container table,#social-container th,#social-container tr,#social-container td{border:1px solid #ddd;border-collapse: collapse;text-align:center;verticle-align:middle;padding:10px;}#social-container table a{margin: 0px auto;}
//Main Social Grid Sizes
$set_social_box_max: 200; // If set will create 3 sizes off max ~ full-size, half-size, third-size
/*set social box max size " #{$set_social_box_max} "*/
$set_manual_three:false; //To use three manual sizes set to "Ture" and add sizes
$set_manual_full:200; // Largest Size in Pixels
$set_manual_half:100; // Middle Size in Pixels
$set_manual_third:50; // Smallest Size in Pixels
$hover-flip:true; // sets reverse image on hover
/* if active can set 3 block sizes " #{$set_manual_three} "*/
// Additional Social Settings
// Social Grid Background Image
$si-bg-url : "https://zamartz.com/wp-content/uploads/sites/3/2016/01/Social-Square-Icons-Double.png";
// Social Grid Size Compilation
$si-third : floor($set_social_box_max / 3);
$si-half : $set_social_box_max / 2;
$si-full : $set_social_box_max;
@if $set_manual_three {
$si-third : $set_manual_third;
$si-half : $set_manual_half;
$si-full : $set_manual_full;
}
// the Social Grid Standard CSS
.social-item {
display:block;
float:left;
background: url("#{$si-bg-url}");
background-origin:border-box;
color:#fff;
}
.social-item span,.social-item span span {display:none;}
.social-item:link{text-decoration:none;}
.social-item:hover{text-decoration:underline;}
.si-txt{margin:5px}
.row-clear{clear:both;}
.si-bg-third{
width: #{$si-third}px;
height: #{$si-third}px;
background-size: #{$si-third*2}px auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
text-indent: 600px;
}
.si-bg-half{
width: #{$si-half}px; height:#{$si-half}px;
background-size: #{$si-half*2}px auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
text-indent: 600px;
}
.si-bg-full{
width: #{$si-full}px; height:#{$si-full}px;
background-size:#{$si-full*2}px auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
text-indent: 600px;
}
// Social Grid Background Colors
$social-bg-base:#fff;
$facebook-color:#3b5998;
$twitter-color:#55acee;
$tumblr-color:#35465c;
$linkedin-color:#0976b4;
$pinterest-color:#cc2127;
$googleplus-color:#dd4b39;
$behance-color:#1769ff;
$instagram-color:#3f729b;
$flickr-color:#333;
$youtube-color:#cd201f;
$vimeo-color:#1ab7ea;
$spotify-color:#690;
$lastfm-color:#c3000d;
$grooveshark-color:#f86f09;
$evernote-color:#7ac142;
$buffer-color:#202326;
$delicious-color:#39f;
$foursquare-color:#F94877;
$github-color:#f93;
$rss-color:#f26522;
$dropbox-color:#007ee5;
$email-color:#abc;
$feedly-color:#6cc655;
.si-txt-base,.si-txt-base:link{color:#{$social-bg-base};}
// Social Grid Item Compiler
@mixin social-grid-item($social-name,$social-number,$social-color){
.si-txt-#{$social-name}:link{color:#{$social-color};}
.si-bg-#{$social-name} {background-color:#{$social-color};}
.si-bg-#{$social-name}-third{background-position: left #{$si-third * $social-number}px; background-color:#{$social-color};}
.si-bg-#{$social-name}-half{background-position: left #{$si-half * $social-number}px; background-color:#{$social-color};}
.si-bg-#{$social-name}-full{background-position: left #{$si-full * $social-number}px; background-color:#{$social-color};}
@if $hover-flip {
.si-bg-#{$social-name}-third:hover{background-position: right #{$si-third * $social-number}px; background-color:#{$social-bg-base}; }
.si-bg-#{$social-name}-half:hover{background-position: right #{$si-half * $social-number}px; background-color:#{$social-bg-base};}
.si-bg-#{$social-name}-full:hover{background-position: right #{$si-full * $social-number}px; background-color:#{$social-bg-base};}
}
.si-bg-#{$social-name}-color-third{background-position: right #{$si-third * $social-number}px; background-color:#{$social-bg-base};}
.si-bg-#{$social-name}-color-half{background-position: right #{$si-half * $social-number}px; background-color:#{$social-bg-base};}
.si-bg-#{$social-name}-color-full{background-position: right #{$si-full * $social-number}px; background-color:#{$social-bg-base};}
@if $hover-flip {
.si-bg-#{$social-name}-color-third:hover{background-position: left #{$si-third * $social-number}px; background-color:#{$social-color};}
.si-bg-#{$social-name}-color-half:hover{background-position: left #{$si-half * $social-number}px; background-color:#{$social-color};}
.si-bg-#{$social-name}-color-full:hover{background-position: left #{$si-full * $social-number}px; background-color:#{$social-color};}
}
}
// Social Grid Maps
@include social-grid-item("fb",1,$facebook-color);
@include social-grid-item("tw",2,$twitter-color);
@include social-grid-item("tu",3,$tumblr-color);
@include social-grid-item("in",4,$linkedin-color);
@include social-grid-item("pin",5,$pinterest-color);
@include social-grid-item("gp",6,$googleplus-color);
@include social-grid-item("be",7,$behance-color);
@include social-grid-item("inst",8,$instagram-color);
@include social-grid-item("fkr",9,$flickr-color);
@include social-grid-item("you",10,$youtube-color);
@include social-grid-item("vi",11,$vimeo-color);
@include social-grid-item("spot",12,$spotify-color);
@include social-grid-item("fm",13,$lastfm-color);
@include social-grid-item("gs",14,$grooveshark-color);
@include social-grid-item("en",15,$evernote-color);
@include social-grid-item("buff",16,$buffer-color);
@include social-grid-item("del",17,$delicious-color);
@include social-grid-item("frsq",18,$foursquare-color);
@include social-grid-item("git",19,$github-color);
@include social-grid-item("rss",20,$rss-color);
@include social-grid-item("db",21,$dropbox-color);
@include social-grid-item("em",22,$email-color);
@include social-grid-item("feedly",23,$feedly-color);
.clicked{border-bottom:3px solid black;}
a{
-webkit-transition: .1s linear;
transition: .1s linear;}
View Compiled
$(".social-item").click(function(){
$(this).addClass("clicked");
});
This Pen doesn't use any external CSS resources.