https://github.com/ndreckshage/roughdraft.js
Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code
https://github.com/ndreckshage/roughdraft.js
Last synced: 21 days ago
JSON representation
Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code
- Host: GitHub
- URL: https://github.com/ndreckshage/roughdraft.js
- Owner: ndreckshage
- Created: 2013-01-19T00:54:36.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-08-08T04:59:39.000Z (over 10 years ago)
- Last Synced: 2024-04-17T00:00:40.328Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://ndreckshage.github.com/roughdraft.js/
- Size: 829 KB
- Stars: 463
- Watchers: 34
- Forks: 37
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
RoughDraft.js v0.1.5
====================
Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code.
```html
![]()
```
[LIVE DEMO OF THE ABOVE](http://ndreckshage.github.com/roughdraft.js/)
See [API](#api) below for more details.
Installation
------------
*Important:* Depends on jQuery. Must be loaded after.
######Steps:
1. [Download RoughDraft.js](https://github.com/ndreckshage/roughdraft.js/zipball/master) or install via Bower
```javascript
bower install --save-dev roughdraft.js
```
2. Create a new mockup
```html
$(function(){
$(window).roughDraft();
});
```
*Recommendation*: This is meant to be used as a [living frontend styleguide](http://alistapart.com/article/creating-style-guides) 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](https://github.com/ndreckshage/roughdraft.js/wiki/Full-Usage-Wiki)
LIBRARIES
----------
**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](http://www.lebowskiipsum.com)*
+ "tunaipsum.com" -- *courtesy of [tunaipsum.com](http://www.tunaipsum.com)*
+ "robotipsum.com" -- *courtesy of [robotipsum.com](http://www.robotipsum.com)*
+ "lorizzle.nl" -- *courtesy of [lorizzle.nl](http://www.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.
```javascript
$(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](https://github.com/fzaninotto/Faker) that I am hosting at [http://roughdraftjs.com/api/](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.
# Want to Contribute?
[Ideas, information, contributor list, etc.](CONTRIBUTE.md)