Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code
JavaScript PHP
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
generator-api
test
tools
.bowerrc
.gitignore
CONTRIBUTE.md
README.md
bower.json
jquery.roughdraft.js
jquery.roughdraft.min.js
roughdraft.thesaurus.json

README.md

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

    <head>
      <script src="/bower_components/jquery/jquery.min.js"></script>
      <script src="/bower_components/roughdraft/roughdraft.min.js"></script>
    </head>
    <body>
    
      <!-- Your HTML Goes Here! -->
    
      <script>
        $(function(){
          $(window).roughDraft();
        });
      </script>
    </body>

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

API

  • data-draft-repeat
  • data-draft-text
  • data-draft-image
  • data-draft-date
  • data-draft-number
  • data-draft-user

Please see Full Usage Wiki for more information

LIBRARIES

Lorem Ipsum remote APIs ("library")

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.

  • "lorem"
  • "lebowskiipsum.com" -- courtesy of lebowskiipsum.com
  • "tunaipsum.com" -- courtesy of tunaipsum.com
  • "robotipsum.com" -- courtesy of robotipsum.com
  • "lorizzle.nl" -- courtesy of lorizzle.nl
  • add your favorite ipsum generator with JSON converter/add to repository library

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

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

Image generators

User generator

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.