-
Notifications
You must be signed in to change notification settings - Fork 96
/
index.html
229 lines (170 loc) · 8.84 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
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
<!DOCTYPE html>
<html>
<head>
<title>Grunt Responsive Images</title>
<link rel="stylesheet" href="assets/css/common.css" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,700|Source+Code+Pro:300|Droid+Serif:700">
</head>
<body>
<header id="top" class="header">
<div class="header-inner">
<h1><a href="/">Grunt Responsive Images</a></h1>
</div>
</header>
<div class="page-header wrapper">
<div class="container">
<div class="box-out content-block">
<h1>Automate</h1>
<p>Take the grunt work out of responsive images with this image resizing task.</p>
</div>
</div>
</div>
<div class="navigation visible">
<ul>
<li class="sections"><a href="#install"><span>Installation</span></a>
<li class="sections"><a href="#docs"><span>Docs</span></a>
<li class="sections"><a href="#screencast"><span>Screencast</span></a>
<li class="sections"><a href="#examples"><span>Examples</span></a>
</ul>
</div>
<div class="page-content wrapper">
<div class="container">
<div class="main-content">
<section class="posts posts-blog">
<article class="post content-block" id="intro">
<header class="post-header">
<h1>Responsive Images are here!</h1>
</header>
<section class="body">
<div class="post-content">
<p>The browser vendors have decided!</p>
<p>The <code>picture</code> element is the winner!</p>
<p>Now all you have to do is implement responsive images on your site. And generate hundreds of images at small, medium and large resolutions.</p>
<p>Never fear! This site will help you with both!</p>
</div>
</section>
</article>
<article class="post content-block" id="install">
<header class="post-header">
<h1>Installation</h1>
</header>
<section class="body">
<div class="post-content">
<p>This plugin requires Grunt <code>~0.4.0</code>.</p>
<p>If you haven't used <a href="http://gruntjs.com/">Grunt</a> before, be sure to check out the <a href="http://gruntjs.com/getting-started">Getting Started</a> guide, as it explains how to create a <a href="http://gruntjs.com/sample-gruntfile">Gruntfile</a> as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:</p>
<pre><code>npm install grunt-responsive-images --save-dev</code></pre>
<p>You also need to install either GraphicsMagick or Imagemagick CLI tools.</p>
<p><strong>Installing GraphicsMagick (Recommended)</strong></p>
<p>If you're a Mac user and have <a href="http://brew.sh/">Homebrew</a> installed, simply type:</p>
<pre lang="shell"><code>brew install GraphicsMagick</code></pre>
<p>Otherwise, please visit the <a href="http://sourceforge.net/projects/graphicsmagick/files/graphicsmagick/">GraphicsMagick downloads page</a>.</p>
<p><strong>Or installing ImageMagick</strong></p>
<p>If you're a Mac user and have <a href="http://brew.sh/">Homebrew</a> installed, simply type:</p>
<pre><code>brew install ImageMagick</code></pre>
<p>Otherwise, please visit the <a href="http://www.imagemagick.org/script/binary-releases.php">ImageMagick downloads page</a>.</p>
<p>Once both the plugin and graphics engine have been installed, it may be enabled inside your Gruntfile with this line of JavaScript:</p>
<pre><code>grunt.loadNpmTasks('grunt-responsive-images');</code></pre>
</div>
</section>
</article>
<article class="post content-block" id="docs">
<header class="post-header">
<h1>Documentation</h1>
</header>
<section class="body">
<div class="post-content">
<p>Please see the project <a href="https://github.com/andismith/grunt-responsive-images/">readme</a> file for information on how to use the plugin.</p>
</div>
</section>
</article>
<article class="post content-block" id="screencast">
<header class="post-header">
<h1>Screencast</h1>
</header>
<section class="body">
<div class="post-content">
<p>Need a walkthrough?</p>
<div class="post-image">
<iframe src="//player.vimeo.com/video/92794354?byline=0&portrait=0&color=ffffff" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</section>
</article>
</section>
<article class="post content-block" id="examples">
<header class="post-header">
<h1>Examples</h1>
</header>
<section class="body">
<div class="post-content">
<h2>Using the Picture element</h2>
<p>The <picture> element loads an image based on the matched viewport. The element should contain a series of <source> elements with media queries followed by an <img> element, which will be the fallback for browsers that cannot load the source images.</p>
<p>At the time of writing, the <picture> element is only implemented in Chrome Canary, with support in Chrome, Firefox, Safari and Opera to follow. For browsers that do not support <picture>, we can include <a href="http://scottjehl.github.io/picturefill/">a picturefill polyfill</a>.</p>
<p><picture> can be implemented with the following:</p>
<pre><code><picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="wedding-large.jpg" media="(min-width: 820px)" />
<source srcset="wedding-medium.jpg" media="(min-width: 640px)" />
<source srcset="wedding-small.jpg" />
<!--[if IE 9]></video><![endif]-->
<img src="wedding-small.jpg" alt="Wedding Day" />
</picture></code></pre>
<p>The conditional comments are required to support the <picture> element in Internet Explorer 9.</p>
<p>The code above would create the following output:</p>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="assets/img/wedding-large.jpg" media="(min-width: 820px)">
<source srcset="assets/img/wedding-medium.jpg" media="(min-width: 640px)">
<source srcset="assets/img/wedding-small.jpg">
<!--[if IE 9]></video><![endif]-->
<img src="assets/img/wedding-small.jpg" alt="Wedding Day">
</picture>
<p>There is also <a href="https://github.com/miller/grunt-responsive-images-converter">a Grunt task available</a> for converting your Markdown images in to Responsive Images.</p>
</div>
</section>
</article>
</section>
</div>
<aside class="sidebar">
<section class="content-block">
<h1 class="aside">Latest</h1>
<p>v0.1.3</p>
</section>
<section class="highlight-block">
<a href="https://github.com/andismith/grunt-responsive-images/">
<h1 class="aside">Github</h1>
<p>Fork and view the source on Github</p>
</a>
</section>
<section class="social">
<ul>
<li class="twitter">
<a href="http://www.twitter.com/andismith" target-="_blank"><span>@andismith</span></a>
</li>
<li class="github">
<a href="https://github.com/andismith" target-="_blank"><span>andismith</span></a>
</li>
<li class="google-plus">
<a href="https://plus.google.com/+AndiSmithUK/?rel=author" target-="_blank"><span>AndiSmithUK</span></a>
</li>
<li class="linked-in">
<a href="http://uk.linkedin.com/in/andismith/" target-="_blank"><span>andismith</span></a>
</li>
</ul>
</section>
</aside>
</div>
</div>
<script src="assets/js/matchmedia.js"></script>
<script src="assets/js/picturefill.js"></script>
<script src="assets/js/common.js"></script>
<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-534640-12', 'andismith.com');
ga('send', 'pageview');
</script>
</body>
</html>