Skip to content

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

Notifications You must be signed in to change notification settings

ndreckshage/roughdraft.js

Repository files navigation

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.

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •