JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Roughdraft.js

    Github

    Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code
    Filed under 

    • 🔾21%Overall
    • ★463
    • ⏳57.9 days
    • 🕩37
    • 👥6

    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.

    Show All