-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
569 lines (525 loc) · 37.1 KB
/
index.html
File metadata and controls
569 lines (525 loc) · 37.1 KB
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
<!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>Retina Icon Sprites - Sass Mixins</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Facebook Opengraph data -->
<meta property="og:type" content="article">
<meta property="og:url" content="http://themestent.github.io/retina-icon-sprites/">
<meta property="og:site_name" content="Sass mixins - Retina Icons Sprite">
<meta property="og:image" content="http://commondatastorage.googleapis.com/ttf-icons%2Fheader-food-badge-normal.png">
<meta property="og:title" content="Advanced Sass Mixins for Retina Sprite Icons">
<meta property="og:description" content="Easily generate retina image sprites using Sass Mixins with generators.">
<meta property="article:author" content="http://twitter.com/evanshajed">
<!-- Twitter Card Platform -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@themestent">
<meta name="twitter:creator" content="@evanshajed">
<meta name="twitter:title" content="Sass mixins - Retina Icons Sprite">
<meta name="twitter:description" content="Easily generate retina image sprites using Sass Mixins with generators.">
<meta name="twitter:image" content="http://commondatastorage.googleapis.com/ttf-icons%2Fheader-food-badge-normal.png">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="app/css/ttf.css">
<link rel="stylesheet" href="app/css/food-icons.css">
<!-- Code Highlighter CSS -->
<link rel="stylesheet" href="app/css/prism.css">
<!-- The site style CSS -->
<link rel="stylesheet" href="app/css/app.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js' type='text/javascript'></script>
<script type='text/javascript'>
window.Modernizr || document.write('<script src="app/js/modernizr-2.6.2.min.js">\x3C/script>')
</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]-->
<!-- Add your site or application content here -->
<!-- Main Header -->
<header class="main-header" id="mainHeader" role="banner">
<div class="container">
<div class="row">
<div class="span3 visible-desktop">
<span class="food-badge" aria-hidden="true"></span>
</div>
<div class="span9">
<h1 class="site-title">
<a href="https://github.com/themestent/retina-icon-sprites.git" title="Sass Mixins for Retina Icon Sprites" rel="home"><span class="first-line">Sass Mixins</span><span class="second-line">Retina Icon Sprites</span></a>
</h1>
<p class="drop-cap">Grunge Effect Food Icons combined in CSS Sprites using <strong>Sass & Compass</strong> with <strong>Retina Display</strong> Support</p>
<!-- Github Section -->
<ul class="hlist dl-list">
<li><a href="https://github.com/themestent/retina-icon-sprites/archive/master.zip" class="git-dl" title="Download the Zipped package"><span class="ittf-file-zip icon" aria-hidden="true"></span> <span class="content">Download .zip</span></a></li>
<li><a href="https://github.com/themestent/retina-icon-sprites" class="git-view" title="View the Package for Retina Icon Sprites Sass Mixins on GitHub"><span class="ittf-github icon" aria-hidden="true"></span> <span class="content">View on GitHub</span></a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- #Main Header -->
<!-- Main Section -->
<main class="main-section-container" role="main">
<div class="container">
<!-- How To Section -->
<div class="row">
<div class="span10 offset1">
<section class="main-section-holder">
<header class="main-section-header">
<h1 class="title-how-to-use"><span class="first-line">Sass Mixins</span><span class="second-line">Icons Sprite with Retina Support</span></h1>
<p class="para-main">
Retina Icons Sprite - Sass Mixins is generator tool for for front-end developers to easily intigrate <strong>Retina Icons</strong> in your website. All you will need is <a href="http://compass-style.org/" title="CSS Authoring Framework" class="para-highlight"><strong>SASS and Compass</strong></a> installed and you are good to go!
</p>
<p>You can either use your own Compass setup by following the Basic How To Steps. If you want to enjoy automated processes and keep total control of your development resources; I must recommend - <a href="#advancedGuide"><strong>Follow Extended How to Section</strong></a>.</p>
</header>
<article class="Kick-start-section">
<h1 class="title-how-to-use">Easy to Intigrate</h1>
<p class="para-main">Let's start with a very basic example to see how to use it. If you have already downloaded the package, you may find a <abbr title="cascading styling sheets">CSS</abbr> file called <code>food-icons.css</code> in the 'css' directory. For demonstration 18 food icons with grunge effect included in <code>img/food-icons</code> directory. You will also find two directories named <b>120</b> and <b>64</b> and both of them contains two other sub-directories which holds generated images for normal display and retina display. We will show you how to generated them in details on <a href="#advancedGuide"><strong>Extended How to Section</strong></a>.</p>
<p>First lets take a look at basic <abbr title="hyper text markup language">HTML</abbr> markup and <abbr title="cascading styling sheets">CSS</abbr> class naming convention to get our Icons in it's place. You can add these generated icons in any block element. I am suggesting to use a <code><span></code> element as shown below.</p>
<!-- Simple Use with span and CSS class name -->
<figure class="typelate-code-block">
<figurecaption><strong>HTML and CSS</strong> Class Name</figurecaption>
<pre class="language-markup line-numbers">
<code class="language-markup"><!-- First call the CSS file in your site <head> -->
<link rel="stylesheet" href="css/food-icons.css" >
<!-- Let's call lemon icon within a <span> element .. -->
<span class="icon-lemon" aria-hidden="true"></span>
<!-- Above class will show Lemon Icon.
Here the Icon's naming convention follows as icon-'yourfoodname' -->
<a href="#"><span class="icon-lemon" aria-hidden="true"></span>Lemon Icon</a></code>
</pre>
</figure>
<p>That's all you will need to know if you want to use if you want to use given 18 icons set; used in this package. You can find all 18 icons with <code>class="icon-name"</code> class names.</p>
</article>
</section>
</div>
</div>
<!-- Food Icons Section -->
<div class="row">
<div class="span9 offset2">
<section class="foods-icons-section-holder">
<h3>18 Grunge Food Icons</h3>
<div class="row">
<!-- Food Icons Section -->
<article class="food-icons-section">
<div class="span2">
<div class="food-icon-holder">
<span class="icon-beer"></span>
<h5>beer</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-berry"></span>
<h5>berry</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-bone"></span>
<h5>bone</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-bowl"></span>
<h5>bowl</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-burger"></span>
<h5>burger</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-cone-icecream"></span>
<h5>cone-icecream</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-doughnut"></span>
<h5>doughnut</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-drinks"></span>
<h5>drinks</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-egg-poach"></span>
<h5>egg-poach</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-hotdog"></span>
<h5>hotdog</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-juice"></span>
<h5>juice</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-lemon"></span>
<h5>lemon</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-lemon-2"></span>
<h5>lemon-2</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-lollipop"></span>
<h5>lollipop</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-pomegranete"></span>
<h5>pomegranete</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-popcorn"></span>
<h5>popcorn</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-pumpkin"></span>
<h5>pumpkin</h5>
</div>
</div>
<div class="span2">
<div class="food-icon-holder">
<span class="icon-watermelon"></span>
<h5>watermelon</h5>
</div>
</div>
</article>
</div>
</section>
</div>
</div>
<!-- Extended How To Section -->
<div class="row">
<div class="span10 offset1">
<section class="extended-section">
<header class="extended-header">
<h1 class="title-how-to-use"><span class="first-line">Let's Get Deeper!</span> <span class="second-line">Extended How To Section.</span></h1>
<p>Are you familiar with <a href="http://sass-lang.com/" title="SASS - Syntactically Awesome Stylesheets">Sass</a> and <a href="http://compass-style.org/" title="CSS Authoring Framework">Compass</a>? Then creating Food Icons and calling them with Retina Display support in your website will be more easier! <strong>Sass Mixins for Retina Icon Sprites</strong> package includes a custom Sass(SCSS) mixins from <a href="http://framework.themestent.com" title="Advanced front-end template for rapid prototyping">ThemesTent Framework</a>. This retina mixins generates an optimized sprite image from your defined directory. Below you will find step by step guidance on how to generate icons and how to use the Sass mixins.</p>
</header>
<article id="advancedGuide" class="advanced-guide">
<!-- Download And Install the package -->
<h2 class="title-sub">Download & Install</h2>
<h3 class="title-sub-child">Download</h3>
<p><a href="https://github.com/themestent/retina-icon-sprites/archive/master.zip" title="Download ZIP file of Sass Mixins for Retina Icon Sprites">Download</a> or <a href="https://github.com/evanshajed/food-icons-sprite">Clone</a> the package from <a href="https://github.com/themestent/retina-icon-sprites.git" title="Food Icons Sprite Mixins with retina support">Github</a>. If you are using terminal just type: </p>
<figure>
<figurecaption><b>Step 1</b>: Create new directory & clone the repository</figurecaption>
<pre class="language-bash line-numbers"><code>### Create a new Directory ###
mkdir icon-sprite
### Get into newly created Directory ###
cd icon-sprite
### Clone the Repository ###
git clone https://github.com/themestent/retina-icon-sprites.git</code></pre>
</figure>
<!-- Install Using Grunt -->
<h3 class="title-sub-child">Install</h3>
<p>If the package has been downloaded or cloned successfully; you will see a directory called <code>food-icons-sprite</code>.This folder includes <code>config.rb</code> to <b>Configure Compass</b>. You will also have <code>package.json</code> & <code>Gruntfile.js</code> to <a href="http://gruntjs.com/" title="Grunt - The JavaScript Task Runner">Run Several Automated Tasks</a>. In example watch compass, LiveReload your browser on any file changes. It also includes a bash script filled called <code>INSTALL.sh</code> (Windows users please <a href="#gitBash" title="How to run bash scripts in windows">read the Note below</a>). We will run this bash script first to create necessary environment so that <strong>Compass</strong>, <strong>Grunt Task Manager</strong> or necessary <a href="http://bower.io" title="A Package Manager For the web"><strong>Package Installer like Bower</strong></a> may work properly.</p>
<p class="highlight-notice">Please make sure you have latest <mark>Node.js</mark> ( <b>minimum required version is 0.8</b> ) installed in your system. You can download it from <a href="http://nodejs.org/download/" title="Download Noe.js for all OS platfrom"><strong>Node.js download page</strong></a>. I suggest you to read a page on 'How install Node.js via package manager'.</p>
<p>So, you have <strong>Node.js</strong> ready in your system. <b>Great</b>! Now let us type that simple one line command to start Installation process. It will include necessary packages and make an organized and powerful task manager for Front-Enders</p>
<div class="alert alert-success" id="gitBash">
<p><strong>Windows Users:</strong> To run Bash Scripts on Windows you can download and install <a href="https://github.com/msysgit/msysgit/wiki/InstallMSysGit" title=""><strong>msysGit</strong></a></p>
</div>
<figure>
<figurecaption><b>Step 2</b>: Install Required Packages</figurecaption>
<pre class="language-bash line-numbers"><code>### Move to Cloned Folder ###
cd food-icons-sprite
### Run Bash Script ###
bash INSTALL.sh
## After successful installation You may find Following MSG ###
'*****************************************';
'*****************************************';
'********* PACKAGE SETUP DONE ********';
'*****************************************';
#### You are now ready to start Grunt Task Manager ###
#### Type 'grunt server' in your terminal ###
grunt-server
</code></pre>
</figure>
<p>Just after you hit enter Grunt will start running tasks. It may look something like below.</p>
<figure>
<figurecaption>Processes starts by <strong>Grunt</strong></figurecaption>
<pre class="language-bash line-numbers"><code>Running "clean:server" (clean) task
Running "coffee:dist" (coffee) task
Running "compass:server" (compass) task
Running "livereload-start" task
... Starting Livereload server on 35729 ...
Running "connect:livereload" (connect) task
Starting connect web server on localhost:9090.
Running "open:server" (open) task
Running "watch" task
Watching app/js/{,*/}*.coffee
Watching test/spec/{,*/}*.coffee
Watching app/css/sass/{,*/}*.{scss,sass}
Watching app/{,*/}*.html,{.tmp,app}/css/{,*/}*.css,{.tmp,app}/js/{,*/}*.js,app/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}
</code></pre>
</figure>
<p>A new browser window should automatically open with address: <a href="http://localhost:9090/">http://localhost:9090/</a>. If not, then click on that link. Grunt connected web server for this package on <mark>localhost:9090</mark>. Moreover if you change any <code>HTML</code>,<code>css</code> or <code>.js</code> files in <code>app</code> directory; the browser will reload itself.</p>
<!-- Create Icons -->
<h2 class="title-sub-child">Let's Create our icons using ImageMagic</h3>
<p>ImageMagick has been installed already in your system; when you ran that <b>INSTALL.sh</b> bash script. We can quickly crop size, convert any images into any format using <a href="http://imagemagick.org/script/index.php" rel="ImageMagick Convert, Edit or Compose Images">ImageMagick</a> by entering few lines of commands in terminal.</p>
<p>In this package I have used 18 images with dimension of <code>512 X 512</code>. They can be found here <b>'/img/food-icons/original'</b>. In 'food-icons' directory you will also find two other directories like <b>'64'</b> and <b>'120'</b>. I wanted to resize those original .png files into 64x64 and 120x120 dimensional .png files. But to support retina display each of those resized images should have 2x dimension too. To get more organized I had created two child directories inside '64' and '120' folder and named them 'normal' & 'retina'. Now let's get back to our terminal.</p>
<div class="alert alert-success">
<strong>NOTE:</strong> Don't forget to replaces your directory destination in '~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/normal/' lines.
</div>
<figure>
<figurecaption><strong>Resize Images</strong></figurecaption>
<pre class="language-bash line-numbers"><code>cd app/img/food-icons/original
for file in *.png; convert $file -resize 120x120 -quality 100 ~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/normal/$file
for file in *.png; convert $file -resize 240x240 -quality 100 ~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/retina/$file</code></pre>
</figure>
<p>If everything goes well, you will have all your images in it's right directory. We can move on to Sass and CSS section.</p>
<h2 class="title-sub-child">Include Sass Mixins and Sprite Generator</h2>
<p>To generate our images sprites and to show them in our site I have created two different SCSS files and imported them into our main working SCSS.</p>
<h3 class="title-sub-child">Include Sass Mixins with Retina Display support</h3>
<p>As mentioned earlier a custom Sass mixins used in this package to create Sprite Icons with retina display support. You can find a <strong>_retina-sprite-mixins.scss</strong> file in <b>app/css/sass</b> directory.</p>
<figure>
<figurecaption><strong>Sprite Retina Mixins</strong> ('_retina-sprite-mixins.scss')</figurecaption>
<pre class="language-scss line-numbers"><code>
// Retina Sprite Mixins
@mixin retina-sprite-background($name,$normal,$retina){
background-repeat: no-repeat;
background-image: sprite-url($normal);
background-position: sprite-position($normal,$name);
height:image-height(sprite-file($normal, $name));
width: image-width(sprite-file($normal, $name));
// Media Query for retina
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background-image: sprite-url($retina);
background-position: 0 round(nth(sprite-position($retina, $name), 2) / 2);
height:round(image-height(sprite-file($retina, $name)) / 2);
width: round(image-width(sprite-file($retina, $name)) /2 );
// treat the @2x retina sprite sheet as 50% wide for double resolution upon display
$double-width:ceil(image-width(sprite-path($retina)) / 2);
$auto-height:auto;
@include background-size($double-width $auto-height);
}
}</code></pre>
</figure>
<h3 class="title-sub-child">Generate Sprites for images</h3>
<p>Now we are going import <b>'_retina-sprite-mixins.scss'</b> into <b>food-icons.scss</b> file where we will generate sprite of all the images we have created. We will also assign class names for each food icons according to their name. Here is the full snippet below</p>
<figure>
<figurecaption>Food Icons Sprite ('food-icons.scss')</figurecaption>
<pre class="language-scss line-numbers"><code>@import "compass/css3";
@import "compass/typography";
/* Core Variables & Mixins */
@import "variables";
@import "mixins";
@import "retina-sprite-mixins";
/* Bourbon */
@import "bourbon/bourbon";
// Food Icons
$food-icon-normal: sprite-map("food-icons/120/normal/*.png");
$food-icon-retina: sprite-map("food-icons/120/retina/*.png");
[class^="icon-"],
[class*=" icon-"]{
display: block;
@include size(120);
}
.icon-beer{
@include retina-sprite-background(beer,$food-icon-normal,$food-icon-retina);
}
.icon-berry{
@include retina-sprite-background(berry,$food-icon-normal,$food-icon-retina);
}
.icon-bone{
@include retina-sprite-background(bone,$food-icon-normal,$food-icon-retina);
}
.icon-bowl{
@include retina-sprite-background(bowl,$food-icon-normal,$food-icon-retina);
}
.icon-burger{
@include retina-sprite-background(burger,$food-icon-normal,$food-icon-retina);
}
</code></pre>
</figure>
<div class="alert alert-success">
<strong>NOTE:</strong> You might already having an idea on how 'I am passing parameters in <b>retina-sprite-background()</b> mixins'. Pass the name of the icon. give them same height and width for each icons. Before doing these I have I had to use two '<strong>sprite-map</strong>'. One for normal images another one for Retina display.
</div>
<h4 class="title-sub-child">CSS for Each Icons</h4>
<p>So, you are Here!! It means you might have able to do all those steps above without much problems. If everything runs without any Bell, then we already have a CSS file ready with class names for each food icons. Here is one example of generated css rules for 'Beer Icon':</p>
<figure>
<figurecaption>Generated CSS styles with retina display support</figurecaption>
<pre class="language-scss line-numbers"><code>/* Beer Icon Class */
.icon-beer {
background-repeat: no-repeat;
background-image: url('../img/food-icons/120/normal-s8778c84cbc.png');
background-position: 0 -360px;
height: 120px;
width: 120px; }
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.icon-beer {
background-image: url('../img/food-icons/120/retina-s7367f0e004.png');
background-position: 0 -480px;
height: 120px;
width: 120px;
-webkit-background-size: 120px auto;
-moz-background-size: 120px auto;
-ms-background-size: 120px auto;
-o-background-size: 120px auto;
background-size: 120px auto; }
}
</code></pre>
</figure>
<p>That's all you will need to do! Easy right? I'm quite sure you may have opinions or issues using this <a href="" title="Retina Sprite Icons Sass Mixins"><strong>Sass Mixins</strong></a>. Please <a href="https://github.com/themestent/retina-icon-sprites/issues" class="issue-link"><strong>Submit your issues right on Github</strong></a>.</p>
</article>
</section>
</div>
</div>
</div>
</main>
<!-- #Main Section -->
<!-- Footer Section -->
<footer class="main-footer-section">
<!-- Fooer Header Section -->
<section class="footer-header-section">
<div class="container">
<div class="row">
<div class="span12">
<h1><span class="icon-holder"><span class="ittf-wrench" aria-hidden="true"></span></span>
<span class="content-holder">
<span class="first-line">The Craftsman</span> <span class="second-line">Nerds Behind The Food Icons Sprite.</span>
</span></h1>
</div>
</div>
</div>
</section>
<!-- Bottom Section -->
<div class="container">
<div class="row">
<div class="span4">
<div class="contributors-container">
<!-- Evan's Creative Work -->
<div class="creative-work" itemscope itemtype='http://schema.org/CreativeWork'>
<header itemscope itemtype="http://schema.org/Person">
<h2 class="title-person" itemprop="name">Shajed Evan</h2>
<h3 class="title-job" itemprop="jobTitle">Front-End Developer <a href="http://twitter.com/vizrt" title="Vizrt creates leading-edge content production tools for the digital media industry">@vizrt</a>.</h3>
</header>
<div class="meta-bar clearfix">
<ul class="hlist">
<li><a href="https://twitter.com/evanshajed" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @evanshajed</a></li>
<li><a class="badge-holder" href="https://github.com/evanshajed/" title="Follow Evan's GitHub Activities on Front-End Development"><span class="ittf-github" aria-hidden="true"></span> <span class="badge-name">evanshajed</span></a></li>
</ul>
</div>
<div class="meta-content">
<h5 class="visuallyhidden">Shajed Evan's Contribution on Food Icon Sprite Sass Plugin</h5>
<p>Worked on UI Design, Markup and Sass Modules for Food Icon Sprite</p>
</div>
</div>
</div>
</div>
<div class="span4">
<div class="contributors-container">
<!-- Hasin's Creative Work -->
<div class="creative-work" itemscope itemtype='http://schema.org/CreativeWork'>
<header itemscope itemtype="http://schema.org/Person">
<h2 class="title-person" itemprop="name">Hasin Hayder</h2>
<h3 class="title-job" itemprop="jobTitle">Founder of <a href="https://twitter.com/leevioteam" title="Startup based in Bangladesh. Working on Facebook application. MiproApps, the visual designer for Facebook fanpages">@leevio</a>.</h3>
</header>
<div class="meta-bar">
<ul class="hlist">
<li><a href="https://twitter.com/hasin" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @hasin</a></li>
<li><a class="badge-holder" href="https://github.com/hasinhayder" title="Follow Hasin's GitHub Activities"><span class="ittf-github" aria-hidden="true"></span> <span class="badge-name">hasinhayder</span></a></li>
</ul>
</div>
<div class="meta-content">
<h5 class="visuallyhidden">Hasin Hayder's Contribution on Food Icon Sprite Sass Plugin</h5>
<p>Applied Awesome Grunge effect on 18 Food Icons used as samples for this project.</p>
</div>
</div>
</div>
</div>
<div class="span4">
<section class="special-credits">
<h4>Special Thanks To</h4>
<h5>The team behind <a href="http://www.smashingmagazine.com/2013/06/17/foodie-icons/" title="Download 200 Foodie Pack: A Free Set of Food Icons">Freepik</a></h5>
</section>
<section class="copyright">
<h1>It's Free Dude!</h1>
<p>This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/deed.en_US" title="Creative Commons Attribution 3.0 Unported License">Creative Commons Attribution 3.0 Unported License</a>.</p>
</section>
</div>
</div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="app/components/jquery/jquery.min.js"><\/script>')</script>
<script src="http://commondatastorage.googleapis.com/ttf-scripts%2Fttf-bundle-min.js"></script>
<script src="app/js/prism-ck.js"></script>
<script src="app/js/app-ck.js"></script>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.async=true;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}
(document,"script","twitter-wjs");
</script>
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-520653e523c6d115"></script>
<script type="text/javascript">
addthis.layers({
'theme' : 'transparent',
'share' : {
'position' : 'left',
'numPreferredServices' : 5
}
});
</script>
<!-- AddThis Smart Layers END -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43486757-1', 'evanshajed.github.io');
ga('send', 'pageview');
</script>
<script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName("script")[0];
a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0019/7355.js?"+Math.floor(new Date().getTime()/3600000);
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script>
</body>
</html>