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
If you want to format dates in the form of YYYY-MM-DD, use a format='long'.
pug
html
<div class="random-date" format="long"></div>
<div class="random-date" format="long"></div>
<div class="random-date" format="long"></div>
.random-date(format='long')
.random-date(format='long')
.random-date(format='long')

Examples

Descending examples

Ascending examples

Long format examples

random-project

Code

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

.icon, .name, .key, and .description are optional fields. Multiple can be included as well. It will auto-fill with the same combination for .name/.key/.description for any present, however the project icon will be random.

Project icons are 256x256px native resolution.

Name examples

Full project example

random-project-name

Code

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

Populates a random project name.

Examples

random-project-key

Code

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

Populates a random project key.

Examples

random-project-description

Code

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

Populates a random project description.

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

random-priority-icon

Code

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

Examples

Confluence specific generators

random-page

Code

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

Examples

Bitbucket specific generators

random-repository

Code

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

Examples

random-branch

Code

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

Examples

random-commit

Code

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

Examples

random-pull-request

Code

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

Examples