Fast and Easy: Create HTML Mockups with RoughDraft.js

In the process of the development of the next client's website it comes inescapably - the moment, where you will have to present a design that does look real, though you almost always don't have any real content at that time. The urgent need for placeholder content lies in the air and you go through your gazillions of bookmarks to find the proper fit. The future sees you more relaxed as soon as you take my advice and start using RoughDraft.js to quickly create a mockup tailored to your project's needs. Did I mention that you need not put a lot of effort into it? [caption id="attachment_76222" align="alignnone" width="550"] RoughDraft in Action[/caption]

RoughDraft.js: Lots of Content with Only a few Lines of Code

RoughDraft.js is a tool for the automatic output of content based on individually configured parameters. Once the JavaScript library has been embedded and called, you only need very few lines of code to create a large amount of content in various layouts:

<div data-draft-repeat="20">
  <img data-draft-image="200/100" />
  <p data-draft-text="15/w"></p>
</div>

Content to be generated is marked up just as any other content would be. Data attributes carry additional information, which RoughDraft.js reads and then uses to generate the corresponding output. In our example above we ask the JavaScript to generate a DIV and repeat it twenty times. The containers will then be equipped with an image of 200 by 100 pixels, followed by a paragraph of text with an amount of 15 words each. If you want to be able to style the generated content using CSS or provide further functionality, you would simply add these as classes and attributes to the HTML.

Embed some Ipsum and Placeholder Imagery

The necessary dummy texts and images can be drawn from different sources. You can use the classical Lorem Ipsum as well as Bacon Ipsum and some even more exotic variants. Images can be generated using placehold.it, placekitten.com and several more. Sources can easily be configured and thus easily changed, should the client not like kitten content for his mockup:

$(window).roughDraft({
  "author": "bacon",
  "illustrator" : "placehold"
});

While the size of the images is always defined in pixels, texts can be configured in a variety of ways. Besides defining an amount of words („#/w“), we could as well state an amount of sentences („#/s“) or paragraphs („#/p“). Special formats care for the output of numbers or user profile information:

<p data-draft-number="100-999"></p>
<p data-draft-user="email"></p>

To see a little variety in numbers you are able to define a range from which one number is then picked at random. When it comes to user information, you can choose between name, email address and country. Conclusion: Implementing RoughDraft.js is a snap. It offers various possibilities and lots of options to have lots of different content types generated very individually. Changes to the configuration are a snap, too. Need less text and more images or longer texts and smaller images or ... Just change two parameters and you are good to go. As the developer states, the future might see even improved functionality, such as the possibility to embed videos and other types of content. Stay tuned...

Related Links

• Quickly create and prototype a full interactive HTML mock-up | RoughDraft.js

(dpe)