forked from alefeuvre/foundation-grid-displayer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (142 loc) · 10.2 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
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Grid displayer bookmarklet for Twitter Bootstrap and ZURB Foundation</title>
<!-- Included CSS Files -->
<link rel="stylesheet" type="text/css" href="stylesheets/foundation.css">
<link rel="stylesheet" type="text/css" href="stylesheets/app.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:300">
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
var dontClick = function() {
alert("Don't click me, drag me!");
return false;
};
var buildCall = function() {
var callHrefPart1 = 'javascript:(function()%20{%20%20%20var%20head%20=%20document.getElementsByTagName("head")[0];%20%20%20var%20bklScript%20=%20document.createElement("script");%20%20%20bklScript.type%20=%20"text/javascript";%20%20%20bklScript.src%20=%20"http://alefeuvre.github.com/foundation-grid-displayer/gd-bookmarklet.min.js',
callHrefPart2 = '";%20%20%20head.appendChild(bklScript);%20})();',
callHref = "";
if ($('#fw-b').attr('checked') && !$('#fw-f').attr('checked')) { // Bootstrap only
callHref = callHrefPart1 + "?bmletFramework=b" + callHrefPart2;
}
if ($('#fw-f').attr('checked') && !$('#fw-b').attr('checked')) { // Foundation only
callHref = callHrefPart1 + "?bmletFramework=f" + callHrefPart2;
}
if (callHref == "") {
callHref = callHrefPart1 + callHrefPart2;
}
$("#bmletButton").attr("href", callHref);
};
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30567117-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body data-grid-framework="f2" data-grid-color="red" data-grid-opacity="0.5" data-grid-zindex="10" onload="buildCall();">
<div class="container">
<header class="row">
<div class="ten columns">
<h1>Grid displayer</h1>
<h2>for Bootstrap and Foundation</h2>
<p>In-browser web design made easier with this bookmarklet which displays the grid of your favourite front-end framework.</p>
</div>
<div class="two columns buttons">
<a href="https://news.ycombinator.com/submit" class="hn-button" data-title="Grid displayer bookmarklet for Twitter Bootstrap and Foundation" data-url="http://alefeuvre.github.io/foundation-grid-displayer/" data-count="horizontal" data-style="twitter">Vote on Hacker News</a>
<iframe src="//ghbtns.com/github-btn.html?user=alefeuvre&repo=foundation-grid-displayer&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="84" height="20"></iframe><!-- width 84 instead of default 110 = cheap align right -->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://alefeuvre.github.com/foundation-grid-displayer/" data-text="Grid displayer bookmarklet for #TwBootstrap and Foundation" data-via="gridisp" data-align="right">Tweet</a>
</div>
</header>
<div class="row">
<div class="four columns">
<h2><span class="shine">1</span> Install it</h2>
<p class="hide-on-phones">For Firefox and WebKit browsers only.</p>
<p class="show-on-phones">Not available for phones. <a href="mailto: ?subject=Grid displayer bookmarklet&body=Hi, Me! Check this out http://alefeuvre.github.com/foundation-grid-displayer/">Send yourself an email</a> to remember to check it out on your computer or tablet.</p>
</div>
<div class="eight columns">
<h2><span class="shine">2</span> Try it</h2>
<p>Try the bookmarklet <strong>on this page</strong> or on the following sites:</p>
</div>
</div>
<div class="row">
<div class="four columns hide-on-phones">
<p style="font-weight: bold; text-align: center;">↓ Drag this button to your bookmarks bar ↓</p>
<p style="margin-bottom: 0em;"><a href="#" id="bmletButton" onclick="return dontClick();" class="large shine button" title="Grid displayer bookmarklet for Bootstrap and Foundation">Grid displayer</a></p>
<p class="shine" style="padding: 0 0 0.5em; text-align: center;">for
<input type="checkbox" id="fw-b" onclick="buildCall();" checked /> <label for="fw-b">Bootstrap</label>
<input type="checkbox" id="fw-f" onclick="buildCall();" checked /> <label for="fw-f">Foundation</label></p>
</div>
<div class="four columns">
<p style="text-align: center;"><a href="http://www.copyisdesign.com" target="_blank"><img src="images/example1.png" alt="Copy is design built with Foundation 4"></a><br />
Compatible with Foundation 2, 3, 4 & 5</p>
</div>
<div class="four columns">
<p style="text-align: center;"><a href="http://getbootstrap.com/examples/grid/" target="_blank"><img src="images/example2.png" alt="Bootstrap 3 grid examples"></a><br />
Compatible with Bootstrap 2 & 3</p>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h2 id="useit"><span class="shine">3</span> Use it regularly</h2>
<p>You'll probably grow tired of editing the parameters every time the page or the displayer is reloaded. Set them once and for all, add these data attributes to the body:</p>
<p><script type="text/javascript" src="//snipt.net/embed/dfa99649ec014f04edda74261dbd3457/"></script></p>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h2><span class="shine">4</span> Love it</h2>
</div>
</div>
<div class="row" style="text-align: justify;">
<div class="four columns">
<h3>Spread the word</h3>
<p>Tell your friends or colleagues on <a href="http://twitter.com/intent/tweet?text=Grid%20displayer%20bookmarklet%20for%20Bootstrap%20and%20Foundation&url=http%3A%2F%2Falefeuvre.github.com%2Ffoundation-grid-displayer%2F&via=gridisp" target="_blank">Twitter</a>, <a href="http://www.facebook.com/share.php?u=http%3A%2F%2Falefeuvre.github.com%2Ffoundation-grid-displayer%2F" target="_blank">Facebook</a>, <a href="http://plus.google.com/share?url=http%3A%2F%2Falefeuvre.github.com%2Ffoundation-grid-displayer%2F" target="_blank">Google+</a>, by <a href="mailto:?subject=Grid%20Displayer%20bookmarklet&body=http%3A%2F%2Falefeuvre.github.com%2Ffoundation-grid-displayer%2F">email</a> or at the coffee break.<br />
Vote or discuss on <a href="https://news.ycombinator.com/item?id=6135451" target="_blank">Hacker News</a> or <a href="http://stackoverflow.com/questions/12770591/easy-way-to-see-the-bootstrap-grid" target="_blank">Stack Overflow</a>.</p>
</div>
<div class="four columns">
<h3>Stay tuned</h3>
<p><a href="http://twitter.com/gridisp" target="_blank">Follow @gridisp on Twitter</a> to find out when new features are released, and take part in the discussion on how to improve the bookmarklet.</p>
</div>
<div class="four columns">
<h3>Contribute</h3>
<p>The Grid Displayer is an Open Source project so you can be part of it: report bugs (or—even better—correct them!), submit enhancement suggestions or new features (pull requests are most welcome) on <a href="https://github.com/alefeuvre/foundation-grid-displayer/" target="_blank">GitHub</a>.</p>
</div>
</div>
<footer class="row">
<div class="twelve columns">
<h2>About</h2>
<ul class="disc">
<li><a href="http://getbootstrap.com">Bootstrap</a> and <a href="http://foundation.zurb.com">Foundation</a> are two popular front-end frameworks.</li>
<li>This bookmarklet is designed and built by <a href="http://twitter.com/jiraisurfer">Antoine Lefeuvre</a> with help from <a href="https://github.com/alefeuvre/foundation-grid-displayer/pulls?state=closed">contributors</a>.</li>
<li>This bookmarklet is released under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</li>
<li>Current version: <a href="https://github.com/alefeuvre/foundation-grid-displayer/blob/gh-pages/CHANGELOG.md">3.2</a>.</li>
<li>Other ressources for <a href="http://bootsnipp.com/resources">Bootstrap</a> and <a href="http://github.com/zurb/foundation#community">Foundation</a>.</li>
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="javascripts/jquery.min.js"></script>
<script src="javascripts/modernizr.foundation.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript">var HN=[];HN.factory=function(e){return function(){HN.push([e].concat(Array.prototype.slice.call(arguments,0)))};},HN.on=HN.factory("on"),HN.once=HN.factory("once"),HN.off=HN.factory("off"),HN.emit=HN.factory("emit"),HN.load=function(){var e="hn-button.js";if(document.getElementById(e))return;var t=document.createElement("script");t.id=e,t.src="//hn-button.herokuapp.com/hn-button.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},HN.load();</script>
</body>
</html>