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>See API below for more details.
Important: Depends on jQuery. Must be loaded after.
######Steps:
-
Download RoughDraft.js or install via Bower
bower install --save-dev roughdraft.js
-
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.
- 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
Lorem Ipsum remote APIs ("library")
- "lorem" : "http://www.randomtext.me/api/lorem/p-20/40-50"
- "bacon" : "https://baconipsum.com/api/?type=all-meat¶s=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.
- "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
- "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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent