├── fonts
├── bpicons
│ ├── bpicons.eot
│ ├── bpicons.ttf
│ ├── bpicons.woff
│ ├── license.txt
│ └── bpicons.svg
└── anyoldicon
│ ├── anyoldicon.eot
│ ├── anyoldicon.ttf
│ ├── anyoldicon.woff
│ ├── license.txt
│ ├── Read Me.txt
│ ├── anyoldicon.svg
│ └── anyoldicon.dev.svg
├── README.md
├── index.html
├── css
├── default.css
└── component.css
└── js
└── modernizr.custom.js
/fonts/bpicons/bpicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ResponsiveIconGrid/HEAD/fonts/bpicons/bpicons.eot
--------------------------------------------------------------------------------
/fonts/bpicons/bpicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ResponsiveIconGrid/HEAD/fonts/bpicons/bpicons.ttf
--------------------------------------------------------------------------------
/fonts/bpicons/bpicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ResponsiveIconGrid/HEAD/fonts/bpicons/bpicons.woff
--------------------------------------------------------------------------------
/fonts/anyoldicon/anyoldicon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ResponsiveIconGrid/HEAD/fonts/anyoldicon/anyoldicon.eot
--------------------------------------------------------------------------------
/fonts/anyoldicon/anyoldicon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ResponsiveIconGrid/HEAD/fonts/anyoldicon/anyoldicon.ttf
--------------------------------------------------------------------------------
/fonts/anyoldicon/anyoldicon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ResponsiveIconGrid/HEAD/fonts/anyoldicon/anyoldicon.woff
--------------------------------------------------------------------------------
/fonts/anyoldicon/license.txt:
--------------------------------------------------------------------------------
1 | Icon Set: Any Old Icon -- http://tutsplus.github.io/Any-Old-Icon/
2 | License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/deed.en_US
--------------------------------------------------------------------------------
/fonts/bpicons/license.txt:
--------------------------------------------------------------------------------
1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
3 |
4 |
5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Responsive Icon Grid
3 | =========
4 | A responsive grid of anchors with icons and text.
5 |
6 | [article on Codrops](http://tympanus.net/codrops/?p=15657)
7 |
8 | [demo](http://tympanus.net/Blueprints/ResponsiveIconGrid/)
9 |
10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/)
--------------------------------------------------------------------------------
/fonts/anyoldicon/Read Me.txt:
--------------------------------------------------------------------------------
1 | To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in this package. You can import this dev.svg file to the IcoMoon app. All the tags (class names) and the Unicode points of your glyphs are saved in this file.
2 |
3 | See the documentation for more info on how to use this package: http://icomoon.io/#docs/font-face
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Blueprint: Responsive Icon Grid
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/fonts/bpicons/bpicons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/css/default.css:
--------------------------------------------------------------------------------
1 | /* General Blueprint Style */
2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
3 | @font-face {
4 | font-family: 'bpicons';
5 | src:url('../fonts/bpicons/bpicons.eot');
6 | src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
7 | url('../fonts/bpicons/bpicons.woff') format('woff'),
8 | url('../fonts/bpicons/bpicons.ttf') format('truetype'),
9 | url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
10 | font-weight: normal;
11 | font-style: normal;
12 | } /* Made with http://icomoon.io/ */
13 |
14 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
15 | body, html { font-size: 100%; padding: 0; margin: 0;}
16 |
17 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
18 | .clearfix:before, .clearfix:after { content: " "; display: table; }
19 | .clearfix:after { clear: both; }
20 |
21 | body {
22 | font-family: 'Lato', Calibri, Arial, sans-serif;
23 | color: #47a3da;
24 | }
25 |
26 | a {
27 | color: #f0f0f0;
28 | text-decoration: none;
29 | }
30 |
31 | a:hover {
32 | color: #000;
33 | }
34 |
35 | .container > header {
36 | width: 90%;
37 | max-width: 69em;
38 | margin: 0 auto;
39 | padding: 2.875em 1.875em 1.875em;
40 | }
41 |
42 | .main {
43 | width: 90%;
44 | padding: 1em;
45 | margin: 0 auto;
46 | }
47 |
48 | .container > header h1 {
49 | font-size: 2.125em;
50 | line-height: 1.3;
51 | margin: 0 0 0.6em 0;
52 | float: left;
53 | font-weight: 400;
54 | }
55 |
56 | .container > header > span {
57 | display: block;
58 | position: relative;
59 | z-index: 9999;
60 | font-weight: 700;
61 | text-transform: uppercase;
62 | letter-spacing: 0.5em;
63 | padding: 0 0 0.6em 0.1em;
64 | }
65 |
66 | .container > header > span span:after {
67 | width: 30px;
68 | height: 30px;
69 | left: -12px;
70 | font-size: 50%;
71 | top: -8px;
72 | font-size: 75%;
73 | position: relative;
74 | }
75 |
76 | .container > header > span span:hover:before {
77 | content: attr(data-content);
78 | text-transform: none;
79 | text-indent: 0;
80 | letter-spacing: 0;
81 | font-weight: 300;
82 | font-size: 110%;
83 | padding: 0.8em 1em;
84 | line-height: 1.2;
85 | text-align: left;
86 | left: auto;
87 | margin-left: 4px;
88 | position: absolute;
89 | color: #fff;
90 | background: #47a3da;
91 | }
92 |
93 | .container > header nav {
94 | float: right;
95 | text-align: center;
96 | }
97 |
98 | .container > header nav a {
99 | display: inline-block;
100 | position: relative;
101 | text-align: left;
102 | width: 2.5em;
103 | height: 2.5em;
104 | background: #fff;
105 | border-radius: 50%;
106 | margin: 0 0.1em;
107 | border: 4px solid #47a3da;
108 | }
109 |
110 | .container > header nav a > span {
111 | display: none;
112 | }
113 |
114 | .container > header nav a:hover:before {
115 | content: attr(data-info);
116 | color: #47a3da;
117 | position: absolute;
118 | width: 600%;
119 | top: 120%;
120 | text-align: right;
121 | right: 0;
122 | pointer-events: none;
123 | }
124 |
125 | .container > header nav a:hover {
126 | background: #47a3da;
127 | }
128 |
129 | .bp-icon:after {
130 | font-family: 'bpicons';
131 | speak: none;
132 | font-style: normal;
133 | font-weight: normal;
134 | font-variant: normal;
135 | text-transform: none;
136 | text-align: center;
137 | color: #47a3da;
138 | -webkit-font-smoothing: antialiased;
139 | }
140 |
141 | .container > header nav .bp-icon:after {
142 | position: absolute;
143 | top: 0;
144 | left: 0;
145 | width: 100%;
146 | height: 100%;
147 | line-height: 2;
148 | text-indent: 0;
149 | }
150 |
151 | .container > header nav a:hover:after {
152 | color: #fff;
153 | }
154 |
155 | .bp-icon-next:after {
156 | content: "\e000";
157 | }
158 | .bp-icon-drop:after {
159 | content: "\e001";
160 | }
161 | .bp-icon-archive:after {
162 | content: "\e002";
163 | }
164 | .bp-icon-about:after {
165 | content: "\e003";
166 | }
167 | .bp-icon-prev:after {
168 | content: "\e004";
169 | }
170 |
171 | @media screen and (max-width: 55em) {
172 |
173 | .container > header h1,
174 | .container > header nav {
175 | float: none;
176 | }
177 |
178 | .container > header > span,
179 | .container > header h1 {
180 | text-align: center;
181 | }
182 |
183 | .container > header nav {
184 | margin: 0 auto;
185 | }
186 |
187 | .container > header > span {
188 | text-indent: 30px;
189 | }
190 | }
--------------------------------------------------------------------------------
/css/component.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'anyoldicon';
3 | src:url('../fonts/anyoldicon/anyoldicon.eot');
4 | src:url('../fonts/anyoldicon/anyoldicon.eot?#iefix') format('embedded-opentype'),
5 | url('../fonts/anyoldicon/anyoldicon.woff') format('woff'),
6 | url('../fonts/anyoldicon/anyoldicon.ttf') format('truetype'),
7 | url('../fonts/anyoldicon/anyoldicon.svg#anyoldicon') format('svg');
8 | font-weight: normal;
9 | font-style: normal;
10 | }
11 |
12 | /* General grid styles */
13 | .cbp-ig-grid {
14 | list-style: none;
15 | padding: 0 0 50px 0;
16 | margin: 0;
17 | }
18 |
19 | /* Clear floats */
20 | .cbp-ig-grid:before,
21 | .cbp-ig-grid:after {
22 | content: " ";
23 | display: table;
24 | }
25 |
26 | .cbp-ig-grid:after {
27 | clear: both;
28 | }
29 |
30 | /* grid item */
31 | .cbp-ig-grid li {
32 | width: 33%;
33 | float: left;
34 | height: 420px;
35 | text-align: center;
36 | border-top: 1px solid #ddd;
37 | }
38 |
39 | /* we are using a combination of borders and box shadows to control the grid lines */
40 | .cbp-ig-grid li:nth-child(-n+3){
41 | border-top: none;
42 | }
43 |
44 | .cbp-ig-grid li:nth-child(3n-1),
45 | .cbp-ig-grid li:nth-child(3n-2) {
46 | box-shadow: 1px 0 0 #ddd;
47 | }
48 |
49 | /* anchor style */
50 | .cbp-ig-grid li > a {
51 | display: block;
52 | height: 100%;
53 | color: #47a3da;
54 | -webkit-transition: background 0.2s;
55 | -moz-transition: background 0.2s;
56 | transition: background 0.2s;
57 | }
58 |
59 | /* the icon with pseudo class for icon font */
60 | .cbp-ig-icon {
61 | padding: 30px 0 0 0;
62 | display: block;
63 | -webkit-transition: -webkit-transform 0.2s;
64 | transition: -moz-transform 0.2s;
65 | transition: transform 0.2s;
66 | }
67 |
68 | .cbp-ig-icon:before {
69 | font-family: 'anyoldicon';
70 | font-size: 14em;
71 | speak: none;
72 | font-style: normal;
73 | font-weight: normal;
74 | font-variant: normal;
75 | text-transform: none;
76 | line-height: 1;
77 | -webkit-font-smoothing: antialiased;
78 | }
79 |
80 | .cbp-ig-icon-shoe:before {
81 | content: "\e000";
82 | }
83 |
84 | .cbp-ig-icon-ribbon:before {
85 | content: "\e001";
86 | }
87 |
88 | .cbp-ig-icon-milk:before {
89 | content: "\e002";
90 | }
91 |
92 | .cbp-ig-icon-whippy:before {
93 | content: "\e003";
94 | }
95 |
96 | .cbp-ig-icon-spectacles:before {
97 | content: "\e004";
98 | }
99 |
100 | .cbp-ig-icon-doumbek:before {
101 | content: "\e007";
102 | }
103 |
104 | /* title element */
105 | .cbp-ig-grid .cbp-ig-title {
106 | margin: 20px 0 10px 0;
107 | padding: 20px 0 0 0;
108 | font-size: 2em;
109 | position: relative;
110 | -webkit-transition: -webkit-transform 0.2s;
111 | -moz-transition: -moz-transform 0.2s;
112 | transition: transform 0.2s;
113 | }
114 |
115 | .cbp-ig-grid .cbp-ig-title:before {
116 | content: '';
117 | position: absolute;
118 | background: #47a3da;
119 | width: 160px;
120 | height: 6px;
121 | top: 0px;
122 | left: 50%;
123 | margin: -10px 0 0 -80px;
124 | -webkit-transition: margin-top 0.2s; /* top or translate does not seem to work in Firefox */
125 | -moz-transition: margin-top 0.2s;
126 | transition: margin-top 0.2s;
127 | }
128 |
129 | .cbp-ig-grid .cbp-ig-category {
130 | text-transform: uppercase;
131 | display: inline-block;
132 | font-size: 1em;
133 | letter-spacing: 1px;
134 | color: #fff;
135 | -webkit-transform: translateY(10px);
136 | -moz-transform: -moz-translateY(10px);
137 | -ms-transform: -ms-translateY(10px);
138 | transform: translateY(10px);
139 | opacity: 0;
140 | -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
141 | -moz-transition: -moz-transform 0.3s, opacity 0.2s;
142 | -webkit-transition: transform 0.3s, opacity 0.2s;
143 | }
144 |
145 | .cbp-ig-grid li:hover .cbp-ig-category,
146 | .touch .cbp-ig-grid li .cbp-ig-category {
147 | opacity: 1;
148 | -webkit-transform: translateY(0px);
149 | -moz-transform: translateY(0px);
150 | -ms-transform: translateY(0px);
151 | transform: translateY(0px);
152 | }
153 |
154 | /* Hover styles */
155 |
156 | .cbp-ig-grid li > a:hover {
157 | background: #47a3da;
158 | }
159 |
160 | .cbp-ig-grid li > a:hover .cbp-ig-icon {
161 | -webkit-transform: translateY(10px);
162 | -moz-transform: translateY(10px);
163 | -ms-transform: translateY(10px);
164 | transform: translateY(10px);
165 | }
166 |
167 | .cbp-ig-grid li > a:hover .cbp-ig-icon:before,
168 | .cbp-ig-grid li > a:hover .cbp-ig-title {
169 | color: #fff;
170 | }
171 |
172 | .cbp-ig-grid li > a:hover .cbp-ig-title {
173 | -webkit-transform: translateY(-30px);
174 | -moz-transform: translateY(-30px);
175 | -ms-transform: translateY(-30px);
176 | transform: translateY(-30px);
177 | }
178 |
179 | .cbp-ig-grid li > a:hover .cbp-ig-title:before {
180 | background: #fff;
181 | margin-top: 80px;
182 | }
183 |
184 |
185 | @media screen and (max-width: 62.75em) {
186 | .cbp-ig-grid li {
187 | width: 50%;
188 | }
189 |
190 | /* reset the grid lines */
191 | .cbp-ig-grid li:nth-child(-n+3){
192 | border-top: 1px solid #ddd;
193 | }
194 |
195 | .cbp-ig-grid li:nth-child(3n-1),
196 | .cbp-ig-grid li:nth-child(3n-2) {
197 | box-shadow: none;
198 | }
199 |
200 | .cbp-ig-grid li:nth-child(-n+2){
201 | border-top: none;
202 | }
203 |
204 | .cbp-ig-grid li:nth-child(2n-1) {
205 | box-shadow: 1px 0 0 #ddd;
206 | }
207 | }
208 |
209 | @media screen and (max-width: 41.6em) {
210 | .cbp-ig-grid li {
211 | width: 100%;
212 | }
213 |
214 | .cbp-ig-grid li:nth-child(-n+2){
215 | border-top: 1px solid #ddd;
216 | }
217 |
218 | .cbp-ig-grid li:nth-child(2n-1) {
219 | box-shadow: none
220 | }
221 |
222 | .cbp-ig-grid li:first-child {
223 | border-top: none;
224 | }
225 | }
226 |
227 | @media screen and (max-width: 25em) {
228 | .cbp-ig-grid {
229 | font-size: 80%;
230 | }
231 |
232 | .cbp-ig-grid .cbp-ig-category {
233 | margin-top: 20px;
234 | }
235 | }
--------------------------------------------------------------------------------
/js/modernizr.custom.js:
--------------------------------------------------------------------------------
1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
2 | * Build: http://modernizr.com/download/#-generatedcontent-touch-shiv-cssclasses-teststyles-prefixes-load
3 | */
4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(n.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o={},p={},q={},r=[],s=r.slice,t,u=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=s.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(s.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(s.call(arguments)))};return e}),o.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:u(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},o.generatedcontent=function(){var a;return u(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a};for(var C in o)w(o,C)&&(t=C.toLowerCase(),e[t]=o[C](),r.push((e[t]?"":"no-")+t));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e.testStyles=u,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+r.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f
2 |
3 |
--------------------------------------------------------------------------------
/fonts/anyoldicon/anyoldicon.dev.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------