snipt

Ctrl+h for KB shortcuts

HTML

Set the grid displayer parameters once and for all

1
2
3
4
5
6
<body data-grid-framework="bo" data-grid-color="blue" data-grid-opacity="0.5" data-grid-zindex="10" data-grid-gutterwidth="30px" data-grid-nbcols="16">
<!--
Framework codes: b3 (Bootstrap 3 fixed), b3f (Bootstrap 3 fluid), bo (Bootstrap 2 fixed), bf (Bootstrap 2 fluid), f4 (Foundation 4 & 5), f3 (Foundation 3), f2 (Foundation 2).
Note 1: 'Gutter width' parameter only applies to gutterless grid systems (Bootstrap 3, Foundation 4 & 5).
Note 2: 'Nb cols' parameter for Bootstrap only.
-->
https://snipt.net/embed/dfa99649ec014f04edda74261dbd3457/
/raw/dfa99649ec014f04edda74261dbd3457/
dfa99649ec014f04edda74261dbd3457
html
HTML
6
2019-07-19T16:06:31
True
False
False
/api/public/snipt/38437/
custom-parameters-for-foundation-grid-displayer
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="p">&lt;</span><span class="nt">body</span> <span class="na">data-grid-framework</span><span class="o">=</span><span class="s">&quot;bo&quot;</span> <span class="na">data-grid-color</span><span class="o">=</span><span class="s">&quot;blue&quot;</span> <span class="na">data-grid-opacity</span><span class="o">=</span><span class="s">&quot;0.5&quot;</span> <span class="na">data-grid-zindex</span><span class="o">=</span><span class="s">&quot;10&quot;</span> <span class="na">data-grid-gutterwidth</span><span class="o">=</span><span class="s">&quot;30px&quot;</span> <span class="na">data-grid-nbcols</span><span class="o">=</span><span class="s">&quot;16&quot;</span><span class="p">&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="c">&lt;!--</span> </span><span id="L-3"><a name="L-3"></a><span class="c">Framework codes: b3 (Bootstrap 3 fixed), b3f (Bootstrap 3 fluid), bo (Bootstrap 2 fixed), bf (Bootstrap 2 fluid), f4 (Foundation 4 &amp; 5), f3 (Foundation 3), f2 (Foundation 2).</span> </span><span id="L-4"><a name="L-4"></a><span class="c">Note 1: &#39;Gutter width&#39; parameter only applies to gutterless grid systems (Bootstrap 3, Foundation 4 &amp; 5).</span> </span><span id="L-5"><a name="L-5"></a><span class="c">Note 2: &#39;Nb cols&#39; parameter for Bootstrap only.</span> </span><span id="L-6"><a name="L-6"></a><span class="c">--&gt;</span> </span></pre></div> </td></tr></table>
bootstrap, foundation, grid, html5, microdata

HTML

mobile four column grid

1
2
3
4
5
6
7
8
<div class="row display">
  <div class="three phone-one columns">
    .three.phone-one.columns				
  </div>
  <div class="nine phone-three columns">
    .nine.phone-three.columns				
  </div>
</div>
https://snipt.net/embed/65d7bb9f3cf79b366fa1c9e970892817/
/raw/65d7bb9f3cf79b366fa1c9e970892817/
65d7bb9f3cf79b366fa1c9e970892817
html
HTML
8
2019-07-20T13:04:28
True
False
False
/api/public/snipt/32429/
mobile-four-column-grid
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a> <a href="#L-7">7</a> <a href="#L-8">8</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row display&quot;</span><span class="p">&gt;</span> </span><span id="L-2"><a name="L-2"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;three phone-one columns&quot;</span><span class="p">&gt;</span> </span><span id="L-3"><a name="L-3"></a> .three.phone-one.columns </span><span id="L-4"><a name="L-4"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-5"><a name="L-5"></a> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;nine phone-three columns&quot;</span><span class="p">&gt;</span> </span><span id="L-6"><a name="L-6"></a> .nine.phone-three.columns </span><span id="L-7"><a name="L-7"></a> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span><span id="L-8"><a name="L-8"></a><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
grid, mobile

HTML

social grid without plugin

1
2
3
4
5
6
7
8
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.tipsy.js"></script>
<script type='text/javascript'>
  $(function() {
   $('.tipsy').tipsy({gravity: $.fn.tipsy.autoNS});
  });
</script>
<a href="http://www.twitter.com/scottwyden" class='tipsy' title="Follow me on Twitter" alt="Follow me on Twitter" target="_blank"><img src="images.twitter_32.png"></a> <a href="http://feeds.feedburner.com/scottwyden" class='tipsy' title="Subscribe via RSS" alt="Subscribe via RSS" target="_blank"><img src="images.rss_32.png"></a> <a href="http://feedburner.google.com/fb/a/mailverify?uri=scottwyden&loc=en_US" class='tipsy' title="Subscribe via Email" alt="Subscribe via Email" target="_blank"><img src="images.email_32.png"></a> <a href="http://photos.scottwyden.com/forsale" class='tipsy' title="Photography For Sale" alt="Photography For Sale" target="_blank"><img src="http://scottwyden.com/favicon32.png"></a> <a href="http://flickr.com/scottwyden" class='tipsy' title="Join me on Flickr" alt="Join me on Flickr" target="_blank"><img src="images.flickr_32.png"></a> <a href="http://facebook.com/scottwydenimagery" class='tipsy' title="Become a fan on Facebook" alt="Become a fan on Facebook" target="_blank"><img src="images.facebook_32.png"></a>
https://snipt.net/embed/a79dd84126e28da0eaaaf45c6b7fff9f/
/raw/a79dd84126e28da0eaaaf45c6b7fff9f/
a79dd84126e28da0eaaaf45c6b7fff9f
html
HTML
8
2019-07-14T11:23:14
True
False
False
/api/public/snipt/13852/
social-grid-without-plugin
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a> <a href="#L-7">7</a> <a href="#L-8">8</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-2"><a name="L-2"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/js/jquery.tipsy.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-3"><a name="L-3"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#39;text/javascript&#39;</span><span class="p">&gt;</span> </span><span id="L-4"><a name="L-4"></a> <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span><span id="L-5"><a name="L-5"></a> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.tipsy&#39;</span><span class="p">).</span><span class="nx">tipsy</span><span class="p">({</span><span class="nx">gravity</span><span class="o">:</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tipsy</span><span class="p">.</span><span class="nx">autoNS</span><span class="p">});</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">});</span> </span><span id="L-7"><a name="L-7"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span><span id="L-8"><a name="L-8"></a><span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://www.twitter.com/scottwyden&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#39;tipsy&#39;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Follow me on Twitter&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;Follow me on Twitter&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;images.twitter_32.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://feeds.feedburner.com/scottwyden&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#39;tipsy&#39;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Subscribe via RSS&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;Subscribe via RSS&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;images.rss_32.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://feedburner.google.com/fb/a/mailverify?uri=scottwyden&amp;loc=en_US&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#39;tipsy&#39;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Subscribe via Email&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;Subscribe via Email&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;images.email_32.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://photos.scottwyden.com/forsale&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#39;tipsy&#39;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Photography For Sale&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;Photography For Sale&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;http://scottwyden.com/favicon32.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://flickr.com/scottwyden&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#39;tipsy&#39;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Join me on Flickr&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;Join me on Flickr&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;images.flickr_32.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;http://facebook.com/scottwydenimagery&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#39;tipsy&#39;</span> <span class="na">title</span><span class="o">=</span><span class="s">&quot;Become a fan on Facebook&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;Become a fan on Facebook&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;images.facebook_32.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span> </span></pre></div> </td></tr></table>
grid, jquery, social, tipsy