Get new jQuery plugins just once a week

×

roughdraft.js

September 25, 2014

Create an interactive HTML mock-up by lorem ipsum/images generators

Roughdraft.js is a jQuery plugin to quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code.

Created by ndreckshage

Download

Example

RoughDraft-js jQuery plugin

prototype

RoughDraft.js v0.1.5

Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code.

<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"></i>
      <button class="btn" data-draft-number="$/2-3"></button>
    </div>
  </div>
</section>

LIVE DEMO OF THE ABOVE

See API below for more details.

Installation

Important: Depends on jQuery. Must be loaded after.

Steps:
  1. Download RoughDraft.js or install via Bower

    bower install --save-dev roughdraft.js
    
  2. Create a new mockup

    ```html

    <!-- Your HTML Goes Here! -->
    
    <script>
      $(function(){
        $(window).roughDraft();
      });
    </script>
    

    ```

    Recommendation: This is meant to be used as a living frontend styleguide and should not be loaded in Production.

API

Please see Full Usage Wiki for more information

LIBRARIES

Lorem Ipsum remote APIs ("library") + "lorem" : "http://www.randomtext.me/api/lorem/p-20/40-50" + "bacon" : "https://baconipsum.com/api/?type=all-meat&paras=20&start-with-lorem=1" + "hipster" : "http://hipsterjesus.com/api?paras=20&type=hipster-centric&html=false"

Lorem Ipsum (local only) ("bookstore") NOTE —— all with author permission. If you want to commit a new library, please make sure you have the author permission.

Note: To save load time you can specify a thesaurus that will be used instead of making an HTTP call for lorem ipsum text.

javascript $(window).roughDraft({ author: 'lorem', customIpsum: true, customIpsumPath: '/bower_components/roughdraft.js/roughdraft.thesaurus.json' });

Image generators + "placekitten" : "http://placekitten.com/ + params" + "placehold" : "http://placehold.it/ + params" + "placedog" : "http://placedog.com/ + params" + "baconmockup" : "http://baconmockup.com/ + params"

User generator + Created an API of the php port of Faker that I am hosting at http://roughdraftjs.com/api/

Class name sequencer Style patterns with expectable class name sequence of your choice.

To use the feature, simply add a class name containing *alfa* and that node's siblings will have similar class name following NATO phonetic alphabet.

Want to Contribute?

Ideas, information, contributor list, etc.

roughdraft.js

Related posts:

Mason js
Color Picker Slider
Hashtegny

To install using Bower
bower install roughdraft.js

RoughDraft-js jQuery plugin

http://jquer.in/wp-content/uploads/2014/09/RoughDraft-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever