RoughDraft.js

Fork RoughDraft.js on GitHub

Quickly create and prototype a full interactive HTML mock-up without duplicating markup, server-side loops/code, or having to source fake content (lorem ipsum text/images).

These few lines...

<section>
  <div data-draft-repeat="30">
    <img data-draft-image="300/300" />
    <div>
      <p data-draft-text="1/s"></p>
      <span data-draft-user="first"></span><span data-draft-user="state"></span>
      <i data-draft-date="F-r/j-r"></i>
      <button class="btn btn-warning btn-mini btn-block" data-draft-number="$/2-3"></button>
    </div>
  </div>
</section>

...produce these distinct blocks.

Posted By: ()

Installation/Usage

  • Requires jQuery
  • Download the source code.
  • Place jquery.roughdraft.0.1.3.js in your sites JS folder.

Link to with...

<script type="text/javascript" src="js/jquery.roughdraft.0.1.3.js"></script>

Call with...

$(function(){
  $(window).roughDraft();
});

And then the data-draft tags turn into content.

<div data-draft-repeat="3"></div> <!-- number of times to repeat element -->
<img data-draft-image="200/300" /> <!-- width/height of image to return -->
<div data-draft-text="5/w"></div> <!-- number of words/sentences/paragraphs (w/s/p) -->
<div data-draft-date="D/M/Y"></div> <!-- dates in PHP format -->
<div data-draft-number="$/2-3/2"></div> <!-- random number with options 'isCurrency'/digit range/decimals -->
<div data-draft-user="full"></div> <!-- random user information (first/last/full/email/etc...) -->
          

Full documentation and source code available on Github