Permalink
Browse files

Plugins

  • Loading branch information...
1 parent 9e29662 commit 629162ab9a4841efa4fd82a16937fc7456ec98d7 @iKreativ committed Jun 6, 2012
Showing with 37 additions and 2 deletions.
  1. +3 −0 assets/js/plugins.js
  2. +33 −1 plugins.html
  3. +1 −1 typography.html
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -113,9 +113,41 @@
<h1>Workless comes packed with some pretty awesome jQuery plugins for creating modals, tooltips, text formatting and more!</h1>
</header>
<!-- /header -->
-
+
+ <!-- zoomooz -->
+ <h2>Zoomooz</h2>
+ <!-- Styles inlined just for demo -->
+ <div style="background:#eeeeee;border:1px solid #dddddd;height:50px;text-align:center;padding: 125px 0;margin-bottom:25px;" class="zoomTarget one_third">Target 1</div>
+ <div style="background:#eeeeee;border:1px solid #dddddd;height:50px;text-align:center;padding: 125px 0;margin-bottom:25px;" class="zoomTarget one_third">Target 2</div>
+ <div style="background:#eeeeee;border:1px solid #dddddd;height:50px;text-align:center;padding: 125px 0;margin-bottom:25px;" class="zoomTarget one_third last">Target 3</div>
+
+ <p>Zoomooz allows you to specify any <span class="highlight tooltip-s zoomTarget" title="Click this, it's another target!">target</span> to zoom on and when click the whole site zooms into that target. It's like a modal, only waaaay cooler! You can read the full docs here: <a href="http://janne.aukia.com/zoomooz/" target="_blank">http://janne.aukia.com/zoomooz/</a></p>
+
+ <hr>
+
+ <h2>Tooltips<h2>
+ <p>You can add additional information to any element simply by adding the tooltip class. It pulls the information from the title tag of the same element. Check <span class="highlight tooltip-s" title="Pretty cool huh?">this</span> out. What about another one? Ok, check <span class="highlight tooltip-e" title="This is another tooltip. You can also specify the direction of the tooltip!">this</span>. Sweet!</p>
+ <p>Along with the actual class, you can also specify the tooltip direction, just like a compass. North, East, South and West.</p>
+<pre>
+&lt;span class=&quot;tooltip-n&quot; title=&quot;Pretty cool huh?&quot;&gt;this&lt;/span&gt;
+&lt;span class=&quot;tooltip-e&quot; title=&quot;Pretty cool huh?&quot;&gt;this&lt;/span&gt;
+&lt;span class=&quot;tooltip-s&quot; title=&quot;Pretty cool huh?&quot;&gt;this&lt;/span&gt;
+&lt;span class=&quot;tooltip-w&quot; title=&quot;Pretty cool huh?&quot;&gt;this&lt;/span&gt;
+</pre>
+
<hr>
+ <h2>Modals</h2>
+ <p>Workless uses PrettyPhoto for modals. This allows a ton of options and a very awesome modal!</p>
+ <p>You can check out their awesome demos and usage right here: <a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/" target="_blank">http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/</a>.</p>
+
+ <hr>
+
+ <h2>Extras</h2>
+ <p>Along with the above built-in plugins, there are also more that are already working behind the scenes! Uniform automatically styles up your form elements, Prettify adds some class to <code>&lt;pre&gt;</code> tags and some custom jQuery automatically switches your <code>&lt;nav&gt;</code> out to a <code>&lt;select&gt;</code> for smaller screens!</p>
+
+ <hr>
+
<!-- footer -->
<footer class="one_full">
<p class="small muted">A project by <a href="//ikreativ.com">Scott Parry</a> (<a href="//twitter.com/iKreativ">@iKreativ</a>). Originally based off <a href="//html5boilerplate.com/">H5BP</a> and <a href="//twitter.github.com/bootstrap/">Bootstrap</a>. Released under the <a href="//philsturgeon.co.uk/code/dbad-license/">DBAD License</a>.</p>
View
@@ -201,7 +201,7 @@ <h2>Misc</h2>
<p>There are also many other items such as <code>&lt;code&gt;</code> and</p>
<pre>
-Automatically formatted &lt;pre&gt; pre tags
+Automatically formatted &lt;pre&gt; tags
</pre>
</div>

0 comments on commit 629162a

Please sign in to comment.