forked from kni-labs/rrssb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (155 loc) · 18.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" > <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Ridiculously Responsive Social Sharing Buttons by KNI Labs</title>
<meta name="description" content="It seemed like we were constantly making custom social sharing buttons for every single project, so we decided to create a super flexible system that would work in any container. SASS-powered, retina ready, and auto-magical resizing. A KNI Labs freebie." />
<meta name="viewport" content="width=device-width" />
<!-- Facebook Open Graph Meta Tags -->
<meta property="og:title" content="Ridiculously Responsive Social Sharing Buttons" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://kurtnoble.com/labs/rrssb/index.html" />
<meta property="og:image" content="http://kurtnoble.com/labs/rrssb/facebook-share.jpg" />
<meta property="og:description" content="It seemed like we were constantly making custom social sharing buttons for every single project, so we decided to create a super flexible system that would work in any container. SASS-powered, retina ready, and auto-magical resizing. A KNI Labs freebie." />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="css/normalize.min.css" />
<link rel="stylesheet" href="css/rrssb.css" />
<link rel="stylesheet" href="css/demo.css" />
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="main-container">
<!-- page stuff -->
<h1>Ridiculously Responsive Social Sharing Buttons</h1>
<p><a href="http://worldsmostshareablewebsite.greig.cc/">Love them</a> or <a href="http://solomon.io/why-im-done-with-social-media-buttons/">hate them</a> social sharing buttons appear to be with us for a while. It seemed like <a href="http://www.kurtnoble.com">we</a> were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container.</p>
<p>RRSSB is built with <a href="http://sass-lang.com/">SASS</a>, so you can easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support. Add or remove icons as you see fit — the rest will fill in automagically in the container.</p>
<p>Resize this page for demo. Currently tested between <a href="https://www.dropbox.com/s/2k6lcebg2887ge3/Screenshot%202014-02-18%2009.45.45.png">140px</a> and <a href="https://www.dropbox.com/s/1juq03011lixk3r/Screenshot%202014-02-18%2009.43.57.png">15,465px.</a></p>
<p><a href="https://github.com/kni-labs/rrssb">Grab the code on Github here</a></p>
<hr />
<div class="share-container clearfix">
<span class="label">share this page:</span>
<!-- buttons start here -->
<ul class="rrssb-buttons clearfix">
<li class="email">
<a href="mailto:?subject=Check%20out%20how%20ridiculously%20responsive%20these%20social%20buttons%20are&body=http%3A%2F%2Fkurtnoble.com%2Flabs%2Frrssb%2Findex.html">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><g><path d="M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z"/></g></svg>
</span>
<span class="text">email</span>
</a>
</li>
<li class="facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=http://kurtnoble.com/labs/rrssb/index.html" class="popup">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 100 100" xml:space="preserve" class="style0"><path d="M99.5,17.001C99.5,8.31,91.689,0.5,83,0.5H17C8.327,0.5,0.5,8.31,0.5,17.001v65.998C0.5,91.689,8.31,99.5,17,99.5h33V62.1 H37.9V45.6H50v-6.428C50,28.11,58.359,18.1,68.59,18.1H81.9v16.5H68.562c-1.46,0-3.162,1.761-3.162,4.427V45.6h16.5v16.5H65.4v37.4 H83c8.672,0,16.5-7.83,16.5-16.501V17.001z"/></svg>
</span>
<span class="text">facebook</span>
</a>
</li>
<!-- <li class="tumblr">
<a href="http://tumblr.com/share?s=&v=3&t=Ridiculously%20Responsive%20Social%20Sharing%20Buttons%20by%20KNI%20Labs&u=http%3A%2F%2Fwww.kurtnoble.com%2Flabs%2Frrssb">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 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="M18.02 21.842c-2.029 0.052-2.422-1.396-2.439-2.446v-7.294h4.729V7.874h-4.71V1.592c0 0-3.653 0-3.714 0 s-0.167 0.053-0.182 0.186c-0.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 c1.863-0.03 3.934-0.795 4.392-1.453l-1.22-3.539C19.595 21.6 18.7 21.8 18 21.842z"/></svg>
</span>
<span class="text">tumblr</span>
</a>
</li> -->
<li class="linkedin">
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://kurtnoble.com/labs/rrssb/index.html&title=Ridiculously%20Responsive%20Social%20Sharing%20Buttons&summary=Responsive%20social%20icons%20by%20KNI%20Labs" class="popup">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve" class="style0"><path d="M95 59.727V93H75.71V61.955c0-7.799-2.79-13.121-9.773-13.121c-5.33 0-8.502 3.587-9.897 7.1 c-0.509 1.241-0.64 2.967-0.64 4.704V93H36.104c0 0 0.26-52.58 0-58.028h19.295v8.225c-0.039 0.062-0.09 0.128-0.127 0.188h0.127 v-0.188c2.563-3.948 7.141-9.588 17.388-9.588C85.483 33.6 95 41.9 95 59.727z M15.919 7C9.318 7 5 11.3 5 17 c0 5.6 4.2 10 10.7 10.031h0.129c6.729 0 10.914-4.46 10.914-10.031C26.579 11.3 22.5 7 15.9 7z M6.146 93h19.289 V34.972H6.146V93z"/></svg>
</span>
<span class="text">linkedin</span>
</a>
</li>
<li class="twitter">
<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 xmlns="http://www.w3.org/2000/svg" viewBox="328 355 335 276" preserveAspectRatio="xMidYMid meet"><path d=" M 630 425 A 195 195 0 0 1 331 600 A 142 142 0 0 0 428 570 A 70 70 0 0 1 370 523 A 70 70 0 0 0 401 521 A 70 70 0 0 1 344 455 A 70 70 0 0 0 372 460 A 70 70 0 0 1 354 370 A 195 195 0 0 0 495 442 A 67 67 0 0 1 611 380 A 117 117 0 0 0 654 363 A 65 65 0 0 1 623 401 A 117 117 0 0 0 662 390 A 65 65 0 0 1 630 425 Z"/></svg>
</span>
<span class="text">twitter</span>
</a>
</li>
<!-- <li class="reddit">
<a href="http://www.reddit.com/submit?url=http://www.kurtnoble.com/labs/rrssb/">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve"><g><path d="M11.794 15.316c0-1.029-0.835-1.895-1.866-1.895c-1.03 0-1.893 0.865-1.893 1.895s0.863 1.9 1.9 1.9 C10.958 17.2 11.8 16.3 11.8 15.316z"/><path d="M18.1 13.422c-1.029 0-1.895 0.864-1.895 1.895c0 1 0.9 1.9 1.9 1.865c1.031 0 1.869-0.836 1.869-1.865 C19.969 14.3 19.1 13.4 18.1 13.422z"/><path d="M17.527 19.791c-0.678 0.678-1.826 1.006-3.514 1.006c-0.004 0-0.009 0-0.014 0c-0.004 0-0.01 0-0.015 0 c-1.686 0-2.834-0.328-3.51-1.005c-0.264-0.265-0.693-0.265-0.958 0c-0.264 0.265-0.264 0.7 0 1 c0.943 0.9 2.4 1.4 4.5 1.402c0.005 0 0 0 0 0c0.005 0 0 0 0 0c2.066 0 3.527-0.459 4.47-1.402 c0.265-0.264 0.265-0.693 0.002-0.958C18.221 19.5 17.8 19.5 17.5 19.791z"/><path d="M27.707 13.267c0-1.785-1.453-3.237-3.236-3.237c-0.793 0-1.518 0.287-2.082 0.761c-2.039-1.295-4.646-2.069-7.438-2.219 l1.483-4.691l4.062 0.956c0.071 1.4 1.3 2.6 2.7 2.555c1.488 0 2.695-1.208 2.695-2.695C25.881 3.2 24.7 2 23.2 2 c-1.059 0-1.979 0.616-2.42 1.508l-4.633-1.091c-0.344-0.081-0.693 0.118-0.803 0.455l-1.793 5.7 C10.548 8.6 7.7 9.4 5.6 10.75C5.006 10.3 4.3 10 3.5 10.029c-1.785 0-3.237 1.452-3.237 3.2 c0 1.1 0.6 2.1 1.4 2.69c-0.04 0.272-0.061 0.551-0.061 0.831c0 2.3 1.3 4.4 3.7 5.9 c2.299 1.5 5.3 2.3 8.6 2.325c3.228 0 6.271-0.825 8.571-2.325c2.387-1.56 3.7-3.66 3.7-5.917 c0-0.26-0.016-0.514-0.051-0.768C27.088 15.5 27.7 14.4 27.7 13.267z M23.186 3.355c0.74 0 1.3 0.6 1.3 1.3 c0 0.738-0.6 1.34-1.34 1.34s-1.342-0.602-1.342-1.34C21.844 4 22.4 3.4 23.2 3.355z M1.648 13.3 c0-1.038 0.844-1.882 1.882-1.882c0.31 0 0.6 0.1 0.9 0.209c-1.049 0.868-1.813 1.861-2.26 2.9 C1.832 14.2 1.6 13.8 1.6 13.267z M21.773 21.57c-2.082 1.357-4.863 2.105-7.831 2.105c-2.967 0-5.747-0.748-7.828-2.105 c-1.991-1.301-3.088-3-3.088-4.782c0-1.784 1.097-3.484 3.088-4.784c2.081-1.358 4.861-2.106 7.828-2.106 c2.967 0 5.7 0.7 7.8 2.106c1.99 1.3 3.1 3 3.1 4.784C24.859 18.6 23.8 20.3 21.8 21.57z M25.787 14.6 c-0.432-1.084-1.191-2.095-2.244-2.977c0.273-0.156 0.59-0.245 0.928-0.245c1.035 0 1.9 0.8 1.9 1.9 C26.354 13.8 26.1 14.3 25.8 14.605z"/></g></svg>
</span>
<span class="text">reddit</span>
</a>
</li> -->
<li class="googleplus">
<a href="https://plus.google.com/share?url=Check%20out%20how%20ridiculously%20responsive%20these%20social%20buttons%20are%20http://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="134.658px" height="131.646px" viewBox="0 0 134.658 131.646" enable-background="new 0 0 134.658 131.646"
xml:space="preserve">
<g>
<g>
<path d="M72.689,75.044l-6.05-4.698c-1.842-1.527-4.362-3.545-4.362-7.237c0-3.708,2.521-6.064,4.707-8.246
c7.046-5.547,14.089-11.45,14.089-23.892c0-12.793-8.05-19.523-11.907-22.716h10.401l10.918-6.86H57.408
c-9.077,0-22.157,2.147-31.733,10.054c-7.217,6.226-10.739,14.813-10.739,22.542c0,13.121,10.075,26.421,27.865,26.421
c1.681,0,3.518-0.165,5.368-0.337c-0.831,2.021-1.671,3.706-1.671,6.561c0,5.211,2.678,8.406,5.038,11.435
c-7.559,0.519-21.671,1.356-32.074,7.752c-9.907,5.891-12.923,14.465-12.923,20.519c0,12.458,11.743,24.062,36.092,24.062
c28.875,0,44.159-15.976,44.159-31.791C86.792,86.988,80.078,81.269,72.689,75.044z M50.698,55.698
c-14.444,0-20.988-18.673-20.988-29.94c0-4.387,0.831-8.915,3.688-12.453C36.09,9.936,40.781,7.75,45.16,7.75
c13.925,0,21.147,18.84,21.147,30.957c0,3.032-0.333,8.405-4.194,12.287C59.411,53.69,54.893,55.698,50.698,55.698z
M50.863,123.353c-17.961,0-29.545-8.593-29.545-20.541c0-11.943,10.74-15.984,14.435-17.321
c7.048-2.373,16.117-2.704,17.63-2.704c1.678,0,2.518,0,3.855,0.17c12.77,9.087,18.311,13.615,18.311,22.219
C75.549,115.594,66.984,123.353,50.863,123.353z"/>
<polygon points="115.087,55.441 115.087,38.619 106.778,38.619 106.778,55.441 89.984,55.441 89.984,63.84 106.778,63.84
106.778,80.766 115.087,80.766 115.087,63.84 131.966,63.84 131.966,55.441 "/>
</g>
</g>
</svg>
</span>
<span class="text">google+</span>
</a>
</li>
<!-- <li class="youtube">
<a href="#">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve" class="style0"><path d="M95 32.458C95 25 89 19 81.5 19h-63.1 C11.021 19 5 25 5 32.458v36.084C5 76 11 82 18.4 82h63.1C88.979 82 95 76 95 68.542V32.458z M41 65.724V31.83 l25.702 16.947L41 65.724z" class="style1"/></svg>
</span>
<span class="text">youtube</span>
</a>
</li> -->
<li class="pinterest">
<a href="http://pinterest.com/pin/create/button/?url=http://kurtnoble.com/labs/rrssb/index.html&media=http://kurtnoble.com/labs/rrssb/facebook-share.jpg&description=Responsive%20social%20icons%20by%20KNI%20Labs.">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M256 0C114.615 0 0 114.6 0 256s114.613 256 256 256c141.385 0 256-114.615 256-256S397.385 0 256 0z M280.822 342.1 c-23.26-1.807-33.021-13.328-51.252-24.404c-10.03 52.589-22.282 103.009-58.57 129.3 c-11.202-79.484 16.447-139.182 29.285-202.557c-21.892-36.853 2.635-111.017 48.81-92.737 c56.813 22.474-49.2 137 22 151.308c74.311 14.9 104.645-128.929 58.571-175.712 c-66.579-67.553-193.799-1.54-178.155 95.178c3.807 23.6 28.2 30.8 9.8 63.451c-42.61-9.446-55.325-43.051-53.688-87.856 c2.634-73.337 65.892-124.682 129.343-131.783c80.242-8.982 155.6 29.5 166 104.9 C414.553 256.4 366.6 348.7 280.8 342.059z"/></svg>
</span>
<span class="text">pinterest</span>
</a>
</li>
<li class="github">
<a href="https://github.com/kni-labs/rrssb">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M49.997 0.93c-27.268 0-49.382 22.109-49.382 49.4 c0 21.8 14.1 40.3 33.8 46.858c2.47 0.5 3.37-1.072 3.37-2.381c0-1.171-0.043-4.278-0.066-8.397 c-13.736 2.982-16.636-6.622-16.636-6.622c-2.245-5.705-5.483-7.223-5.483-7.223c-4.482-3.065 0.339-3.004 0.339-3.004 c4.956 0.4 7.6 5.1 7.6 5.091c4.405 7.5 11.6 5.4 14.4 4.103c0.449-3.189 1.726-5.367 3.137-6.602 c-10.967-1.246-22.495-5.483-22.495-24.407c0-5.392 1.924-9.8 5.083-13.253c-0.508-1.248-2.203-6.27 0.484-13.069 c0 0 4.146-1.328 13.6 5.063c3.939-1.096 8.164-1.644 12.363-1.662c4.194 0 8.4 0.6 12.4 1.7 c9.427-6.392 13.566-5.063 13.566-5.063c2.695 6.8 1 11.8 0.5 13.069c3.165 3.5 5.1 7.9 5.1 13.3 c0 18.972-11.547 23.146-22.549 24.368c1.776 1.5 3.4 4.5 3.4 9.147c0 6.602-0.062 11.928-0.062 13.5 c0 1.3 0.9 2.9 3.4 2.375c19.604-6.544 33.742-25.041 33.742-46.853C99.386 23 77.3 0.9 50 0.93z" class="style0"/></svg>
</span>
<span class="text">github</span>
</a>
</li>
</ul>
<!-- buttons end here -->
</div>
<small>RRSSB is a <a href="http://kurtnoble.com">KNI Labs</a> freebie crafted by <a href="http://www.twitter.com/dbox">@dbox</a> and <a href="http://www.twitter.com/seagoat">@seagoat</a>. <em>v 1.503</em></small>
</div> <!-- #main-container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/rrssb.min.js"></script>
<script>
var _gaq=[['_setAccount','UA-404294-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>