Skip to content

Instantly share code, notes, and snippets.

@cgnkev

cgnkev/index.html

Created May 1, 2017 19:15
Show Gist options
  • Save cgnkev/60277294bd8c0501f41cb9044f6f55c2 to your computer and use it in GitHub Desktop.
Save cgnkev/60277294bd8c0501f41cb9044f6f55c2 to your computer and use it in GitHub Desktop.
Download ZIP
Social sharing buttons
Raw
index.html
<div class="main-container">
<h1>Ridiculously Responsive Social Sharing Buttons</h1>
<hr />
<div class="share-container clearfix">
<!-- Buttons start here. Copy this ul to your document. -->
<ul class="rrssb-buttons clearfix">
<li class="facebook">
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header:
https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a href="https://www.facebook.com/sharer/sharer.php?u=http://kurtnoble.com/labs/rrssb/index.html" class="popup">
<span class="icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<path d="M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434
c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726
c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z"/>
</svg>
</span>
<span class="text">facebook</span>
</a>
</li>
<li class="twitter">
<!-- Replace href with your Meta and URL information -->
<a href="http://twitter.com/home?status=Ridiculously%20Responsive%20Social%20Sharing%20Buttons%20by%20@seagoat%20and%20@dbox%20http://kurtnoble.com/labs/rrssb" class="popup">
<span class="icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<path d="M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32
c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155
C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965
C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683
c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851
C26.275,7.229,25.39,8.196,24.253,8.756z"/>
</svg>
</span>
<span class="text">twitter</span>
</a>
</li>
<li
Raw
script.js
/*
Ridiculously Responsive Social Sharing Buttons
Team: @dbox, @seagoat
Site: http://www.kurtnoble.com/labs/rrssb
Twitter: @therealkni
___ ___
/__/| /__/\ ___
| |:| \ \:\ / /\
| |:| \ \:\ / /:/
__| |:| _____\__\:\ /__/::\
/__/\_|:|____ /__/::::::::\ \__\/\:\__
\ \:\/:::::/ \ \:\~~\~~\/ \ \:\/\
\ \::/~~~~ \ \:\ ~~~ \__\::/
\ \:\ \ \:\ /__/:/
\ \:\ \ \:\ \__\/
\__\/ \__\/
*/
;(function(window, $, undefined) {
'use strict';
/*
* Utility functions
*/
var setPercentBtns = function() {
// loop through each instance of buttons
$('.rrssb-buttons').each(function(index) {
var self = $(this);
var numOfButtons = $('li', self).length;
var initBtnWidth = 100 / numOfButtons;
// set initial width of buttons
$('li', self).css('width', initBtnWidth + '%').attr('data-initwidth',initBtnWidth);
});
};
var makeExtremityBtns = function() {
// loop through each instance of buttons
$('.rrssb-buttons').each(function(index) {
var self = $(this);
//get button width
var containerWidth = parseFloat($(self).width());
var buttonWidth = $('li', self).not('.small').first().width();
var smallBtnCount = $('li.small', self).length;
// enlarge buttons if they get wide enough
if (buttonWidth > 170 && smallBtnCount < 1) {
$(self).addClass('large-format');
} else {
$(self).removeClass('large-format');
}
if (containerWidth < 200) {
$(self).removeClass('small-format').addClass('tiny-format');
} else {
$(self).removeClass('tiny-format');
}
});
};
var backUpFromSmall = function() {
// loop through each instance of buttons
$('.rrssb-buttons').each(function(index) {
var self = $(this);
var totalBtnSze = 0, totalTxtSze = 0, upCandidate, nextBackUp;
var smallBtnCount = $('li.small', self).length;
if (smallBtnCount === $('li', self).length) {
var btnCalc = smallBtnCount * 42;
var containerWidth = parseFloat($(self).width());
upCandidate = $('li.small', self).first();
nextBackUp = parseFloat($(upCandidate).attr('data-size')) + 55;
if ((btnCalc + nextBackUp) < containerWidth) {
$(self).removeClass('small-format');
$('li.small', self).first().removeClass('small');
sizeSmallBtns();
}
} else {
$('li', self).not('.small').each(function(index) {
var txtWidth = parseFloat($(this).attr('data-size')) + 55;
var btnWidth = parseFloat($(this).width());
totalBtnSze = totalBtnSze + btnWidth;
totalTxtSze = totalTxtSze + txtWidth;
});
var spaceLeft = totalBtnSze - totalTxtSze;
upCandidate = $('li.small', self).first();
nextBackUp = parseFloat($(upCandidate).attr('data-size')) + 55;
if (nextBackUp < spaceLeft) {
$(upCandidate).removeClass('small');
sizeSmallBtns();
}
}
});
};
var checkSize = function(init) {
// loop through each instance of buttons
$('.rrssb-buttons').each(function(index) {
//console.log('starting check for: '+(index+1));
var self = $(this);
var elems = $('li', self).nextAll(), count = elems.length;
// get buttons in reverse order and loop through each
$($('li', self).get().reverse()).each(function(index, count) {
if ($(this).hasClass('small') === false) {
var txtWidth = parseFloat($(this).attr('data-size')) + 55;
var btnWidth = parseFloat($(this).width());
if (txtWidth > btnWidth) {
//console.log($(self).attr('class')+' '+$(this).attr('class')+' txtWidth: '+txtWidth+ ' & btnWidth: '+btnWidth);
var btn2small = $('li', self).not('.small').last();
$(btn2small).addClass('small');
//console.log($(btn2small).attr('class'));
sizeSmallBtns();
}
}
if (!--count) backUpFromSmall();
});
});
// if first time running, put it through the magic layout
if (init === true) {
rrssbMagicLayout(sizeSmallBtns);
}
};
var sizeSmallBtns = function() {
// loop through each instance of buttons
$('.rrssb-buttons').each(function(index) {
var self = $(this);
var regButtonCount,
regPercent,
pixelsOff,
magicWidth,
smallBtnFraction;
// readjust buttons for small display
var smallBtnCount = $('li.small', self).length;
// make sure there are small buttons
if (smallBtnCount > 0 && smallBtnCount !== $('li', self).length) {
$(self).removeClass('small-format');
//make sure small buttons are square when not all small
$('li.small', self).css('width','42px');
pixelsOff = smallBtnCount * 42;
regButtonCount = $('li', self).not('.small').length;
regPercent = 100 / regButtonCount;
smallBtnFraction = pixelsOff / regButtonCount;
if (navigator.userAgent.indexOf('Chrome') >= 0 || navigator.userAgent.indexOf('Safari') >= 0) {
magicWidth = '-webkit-calc('+regPercent+'% - '+smallBtnFraction+'px)';
} else if (navigator.userAgent.indexOf('Firefox') >= 0) {
magicWidth = '-moz-calc('+regPercent+'% - '+smallBtnFraction+'px)';
} else {
magicWidth = 'calc('+regPercent+'% - '+smallBtnFraction+'px)';
}
$('li', self).not('.small').css('width', magicWidth);
} else if (smallBtnCount === $('li', self).length) {
// if all buttons are small, change back to percentage
$(self).addClass('small-format');
setPercentBtns();
} else {
$(self).removeClass('small-format');
setPercentBtns();
}
}); //end loop
makeExtremityBtns();
};
var rrssbInit = function() {
$('.rrssb-buttons').each(function(index) {
$(this).addClass('rrssb-'+(index + 1));
});
setPercentBtns();
// grab initial text width of each button and add as data attr
$('.rrssb-buttons li .text').each(function(index) {
var txtWdth = parseFloat($(this).width());
$(this).closest('li').attr('data-size', txtWdth);
});
checkSize(true);
};
var rrssbMagicLayout = function(callback) {
//remove small buttons before each conversion try
$('.rrssb-buttons li.small').removeClass('small');
checkSize();
callback();
};
var popupCenter = function(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 3) - (h / 3)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
};
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
/*
* Event listners
*/
$('.rrssb-buttons a.popup').on('click', function(e){
var _this = $(this);
popupCenter(_this.attr('href'), _this.find('.text').html(), 580, 470);
e.preventDefault();
});
// resize function
$(window).resize(function () {
rrssbMagicLayout(sizeSmallBtns);
waitForFinalEvent(function(){
rrssbMagicLayout(sizeSmallBtns);
}, 200, "finished resizing");
});
// init load
$(document).ready(function(){
rrssbInit();
});
})(window, jQuery);
Raw
social-sharing-buttons.markdown
Raw
style.scss
// Ridiculously Responsive Social Sharing Buttons
// Team: @dbox, @seagoat
// Site: http://www.kurtnoble.com/labs/rrssb
// Twitter: @therealkni
// ___ ___
// /__/| /__/\ ___
// | |:| \ \:\ / /\
// | |:| \ \:\ / /:/
// __| |:| _____\__\:\ /__/::\
// /__/\_|:|____ /__/::::::::\ \__\/\:\__
// \ \:\/:::::/ \ \:\~~\~~\/ \ \:\/\
// \ \::/~~~~ \ \:\ ~~~ \__\::/
// \ \:\ \ \:\ /__/:/
// \ \:\ \ \:\ \__\/
// \__\/ \__\/
// How to use: Add/remove buttons from config settings and $social-list.
// config settings
$rrssb-txt: #fff !default;
$rrssb-email: #0a88ff !default;
$rrssb-facebook: #306199 !default;
$rrssb-tumblr: #32506d !default;
$rrssb-linkedin: #007bb6 !default;
$rrssb-twitter: #26c4f1 !default;
$rrssb-googleplus: #e93f2e !default;
$rrssb-reddit: #8bbbe3 !default;
$rrssb-youtube: #df1c31 !default;
$rrssb-pinterest: #b81621 !default;
$rrssb-pocket: #ED4054 !default;
$rrssb-github: #444 !default;
$rrssb-border-radius: 0 !default;
$rrssb-main-font: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
// Variable list for all social button colors to be iterated over.
$social-list: (
email $rrssb-email,
facebook $rrssb-facebook,
tumblr $rrssb-tumblr,
linkedin $rrssb-linkedin,
twitter $rrssb-twitter,
googleplus $rrssb-googleplus,
youtube $rrssb-youtube,
reddit $rrssb-reddit,
pinterest $rrssb-pinterest,
pocket $rrssb-pocket,
github $rrssb-github
);
@mixin transition($expression) {
-webkit-transition: $expression;
-moz-transition: $expression;
-o-transition: $expression;
transition: $expression;
}
%backface-visibility {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
%border-box {
-moz-box-sizing:border-box;
box-sizing: border-box;
}
// some generic classes
.clearfix {
*zoom: 1;
&:after {
clear: both;
}
&:before,
&:after {
content: " ";
display: table;
}
}
// the meat and potatoes
.rrssb-buttons {
@extend %border-box;
font-family: $rrssb-main-font;
height: 36px;
margin: 0;
padding: 0;
width: 100%;
li {
@extend %border-box;
float: left;
height: 100%;
list-style: none;
margin: 0;
padding: 0 2.5px;
line-height: 13px;
// This generates individual button classes for each item in social list on line 39.
@each $s-name in $social-list {
&.#{nth($s-name, 1)} {
a {
background-color: nth($s-name, 2);
&:hover {
background-color: darken(nth($s-name, 2), 10%);
}
}
}
} // end @each directive
a {
@extend %border-box;
background-color: #ccc;
border-radius: $rrssb-border-radius;
display: block;
font-size: 11px;
font-weight: bold;
height: 100%;
padding: 11px 7px 12px 27px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
@include transition(background-color 0.2s ease-in-out);
.icon {
display: block;
height: 100%;
left: 10px;
padding-top: 9px;
position: absolute;
top: 0;
width: 10%;
svg {
height: 17px;
width: 17px;
path, polygon {
fill: $rrssb-txt;
}
}
}
.text {
color: $rrssb-txt;
}
&:active {
box-shadow:inset 1px 3px 15px 0 rgba(022,0,0,.25);
}
}
&.small {
a {
padding: 0;
.icon {
height: 100%;
left: auto;
margin: 0 auto;
overflow: hidden;
position: relative;
top: auto;
width: 100%;
}
.text {
visibility: hidden;
}
}
}
}
&.large-format {
height: auto;
li {
height: auto;
a {
font-size: 15px; // fallback
font-size: 1vw; // scales font with browser
padding: 7% 0% 7% 12%;
border-radius: 0.2em;
line-height: 1vw;
@extend %backface-visibility;
.icon {
left: 7%;
padding-top: 0;
width: 12%;
svg {
height: 100%;
width: 100%;
}
}
.text {
font-size: 15px;
font-size: 1vw;
@extend %backface-visibility;
}
&:hover {
font-size: 15px;
font-size: 1vw;
padding: 7% 0% 7% 12%;
border-radius: 0.2em;
}
}
}
}
&.small-format {
padding-top: 5px;
li {
height: 80%;
padding: 0 1.5px;
a {
.icon {
height: 100%;
padding-top: 0;
svg {
height: 48%;
position: relative;
top: 6px;
width: 80%;
}
}
}
}
}
&.tiny-format {
height: 22px;
position: relative;
li {
padding-right: 7px;
a {
background-color: transparent;
padding: 0;
.icon {
svg {
height: 70%;
width: 100%;
}
}
&:hover, &:active {
background-color: transparent;
}
}
// This generates individual button classes for each item in social list on line 39.
@each $s-name in $social-list {
&.#{nth($s-name, 1)} {
a {
.icon {
svg {
path, polygon {
fill: nth($s-name, 2);
}
}
&:hover {
.icon {
svg {
path, polygon {
fill: darken(nth($s-name, 2), 20%);
}
}
}
}
}
}
}
} // end @each directive
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment