activity add add-circle-2-color add-item addon app-switcher arrow-down arrow-left arrow-left-circle arrow-right arrow-right-long arrow-up atlassian attachment audio audio-circle backlog billing bitbucket bitbucket/branches bitbucket/builds bitbucket/clone bitbucket/commits bitbucket/compare bitbucket/forks bitbucket/output bitbucket/pipelines bitbucket/pullrequests bitbucket/repos bitbucket/snippets board book bullet-list calendar calendar-filled camera camera-filled camera-rotate camera-take-picture editor/cancel canvas check check-circle checkbox chevron-down chevron-down-two-color chevron-left chevron-left-circle chevron-right chevron-right-circle chevron-up chevron-up-two-color code comment component editor/confirm confluence copy cross cross-circle dashboard decision detail-view discover discover-filled document document-filled documents download dropbox edit edit-filled editor/add editor/addon editor/advanced editor/align-center editor/align-left editor/align-right editor/attachment editor/bold editor/bullet-list editor/close editor/code editor/date editor/decision editor/done editor/edit editor/emoji editor/error editor/expand editor/feedback editor/file editor/help editor/hint editor/image editor/image-border editor/image-resize editor/indent editor/info editor/italic editor/link editor/mention editor/more editor/note editor/number-list editor/open editor/outdent editor/panel editor/photo editor/recent editor/redo editor/remove editor/search editor/table editor/task editor/text-color editor/underline editor/undo editor/unlink editor/warning emoji emoji/activity emoji/atlassian emoji/custom emoji/emoji emoji/flags emoji/food emoji/frequent emoji/nature emoji/objects emoji/people emoji/symbols emoji/travel error expand export feedback file filter folder folder-filled followers following googledrive graph-bar graph-line editor/help editor/hint hipchat hipchat/chevron-double-down hipchat/chevron-double-up hipchat/chevron-down hipchat/chevron-up hipchat/lobby hipchat/media-attachment-count hipchat/media-uploader home-circle-2-colour home-filled image image-border image-resize info invite-team issue issue-raise issues jira lightbulb lightbulb-filled link link-filled list location lock lock-circle lock-filled marketplace media-services/actual-size media-services/add-comment media-services/arrow audio media-services/blur media-services/brush code document media-services/filter media-services/grid image media-services/line media-services/open-mediaviewer media-services/oval pdf media-services/preselected presentation media-services/scale-large media-services/scale-small spreadsheet media-services/square media-services/text unknown video zip media-services/zoom-in media-services/zoom-out mention menu more more-vertical notification notification-all notification-direct office-building open overview page page-filled pdf people people-group person portfolio preferences presence-active presence-busy presence-unavailable question question-circle queues quote radio editor/recent redo refresh editor/remove room-menu schedule 2 schedule 1 screen search send settings share ship shortcut sign-in sign-out star star-filled table task time trash tray undo unlink unlock-circle upload user-avatar-two-color vid-audio-muted vid-audio-on vid-backward vid-camera-off vid-connection-two-color vid-forward vid-full-screen-off vid-full-screen-on vid-hang-up vid-hd-two-color vid-pause vid-play vid-raised-hand vid-share-screen vid-speaking-two-color video-circle video-filled warning watch watch-filled world

Bowtie Ipsum - Random Content Generators

Prototyping should be fast. Time spent populating a page with data that's fake anyway is wasted time. Let Bowtie Ipsum do the work for you.

Bowtie Ipsum is easy to use. Simply name a div with the proper class and on page load BI will inject the data right into it. Want to override the random generation for a single div? No sweat. Any time there's already content in an element, BI will ignore it.

Download or use the CDN
Download
pug
html
<script src='https://prototype.guide/randomData.js'></script>
script(src='https://prototype.guide/randomData.js')

Documentation

Include the script on the page and name dom elements with the correct class name. When the fill is complete, the plugin fires a randomDataFilled event.

Confluence generators

random-user

Code

pug
html
<div class="random-user">
  <div class="avatar"></div>
  <div class="name"></div>
</div>
.random-user
  .avatar
  .name

Both .avatar and .name are optional fields. Multiple can be included as well. It will auto-fill with the same name/avatar for any present.

Images and names should be matched by sex (i.e. you wont get a female avatar with a male name). Be aware not to use .random-name or .random-avatar as fields, as that will auto-populate with non-matched names/avatars. Just use .name and .avatar within the .random-user field.

Avatars are 400x400px native resolution.

Examples

random-name

Code

pug
html
<div class="random-name"></div>
.random-name

Populates a non-gender specific random name.

Examples

random-avatar

Code

pug
html
<div class="random-avatar"></div>
.random-avatar

Populates a non-gender specific random avatar. Avatars are 400x400px native resolution.

Examples

random-project-icon

Code

pug
html
<div class="random-project-icon"></div>
.random-project-icon

Populates a random project icon. Project icons are 256x256px native resolution.

Examples

random-number

Code

pug
html
<!--will return between 1-100-->
<div class="random-number"></div>

<!--will return between 1-1000-->
<div class="random-number" range="1000"></div>

<!--will return between 10-20-->
<div class="random-number" range="10-20"></div>
//will return between 1-100
.random-number
  
//will return between 1-1000
.random-number(range='1000')

//will return between 10-20
.random-number(range='10-20')

Populates a random number. By default this is between 1-100, however the bounds can be defined.

A single number in the dom defines the upper bounds.
pug
html
<div class="random-number" range="1000"></div>
.random-number(range='1000')

This will return a number between 1-1000

A number range in the dom defines the minimum and maximum.
pug
html
<div class="random-number" range="300-400"></div>
.random-number(range='300-400')

This will return a number between 300-400

Note that this overrides the default override functionality. If you want a particular div to be a single number, just define a number range where the minimum is equal to the maximum, i.e. 322-322

Examples

random-date

Code

pug
html
<div class="random-date"></div>
.random-date

Populates a random date. Dates are listed by day first, then truncated month.

If you're showing a list of pages by date, add descending to the first dom. Every dom after will be filled with a date that is sometime before the previous one.
pug
html
<div class="random-date" order="descending"></div>
<div class="random-date"></div>
<div class="random-date"></div>
.random-date(order='descending')
.random-date
.random-date

Each .random-date element after will be populated according to the counter set by the first descending element. The time difference between the dates will be a random duration from 0-60 hours. The first descending or ascending element will always be the current date.

If there are multiple descending elements, the second one encountered will reset the date to the current one and start over.

Ascending also works, just opposite of descending.
pug
html
<div class="random-date" order="ascending"></div>
<div class="random-date"></div>
<div class="random-date"></div>
.random-date(order='ascending')
.random-date
.random-date
If you want to go back to completely random dates, just use an order='random' and every .random-date element after will be populated with a random date.
pug
html
<div class="random-date" order="random"></div>
<div class="random-date"></div>
<div class="random-date"></div>
.random-date(order='random')
.random-date
.random-date

Examples

Descending examples

Ascending examples

random-project

Code

pug
html
<div class="random-project"></div>
.random-project

Populates a random project name.

Examples

Jira specific generators

random-status

Code

pug
html
<div class="random-status"></div>
.random-status
Populates a random issue status. Statuses are one of the following:
  • In Progress
  • Done
  • In Review
  • To Do

Examples

random-issue-icon

Code

pug
html
<div class="random-issue-icon"></div>
.random-issue-icon
Populates a random issue type icon.

Examples

random-issue

Code

pug
html
<div class="random-issue"></div>
.random-issue
Populates a random issue name.

Examples

random-issue-code

Code

pug
html
<div class="random-issue-code"></div>
.random-issue-code
Populates a random issue code.

Examples

Confluence specific generators

random-page

Code

pug
html
<div class="random-page"></div>
.random-page
Populates a random page name.

Examples