Generate placeholder text and images with simple CSS classes.
Download the package with npm :
$ npm install pepita
Go to your HTML file and load auto-pepita.js
:
<head>
<script src="./node_modules/pepita/dist/auto-pepita.js"></script>
</head>
Specify what you want by adding a class to your element :
<p class="pepita-text-words-16"></p>
</body>
The text will appear once you open the file in your browser :
<body>
<p class="pepita-text-words-16">
esse fugiat eu eiusmod eiusmod proident elit nisi nulla veniam laboris labore ipsum ullamco elit irure
</p>
</body>
Everything in bold is a variable that you can change (e.g write 32 instead of length)
These use the default length of 16 :
pepita-text
pepita-text-words
pepita-text-sentences
pepita-text-paragraphs
The following ones allow you to specify a length :
pepita-text-words-length
pepita-text-sentences-length
pepita-text-paragraphs-length
Default height and width for an image are 400px. Default color is black.
pepita-image
pepita-image-size
pepita-image-width-height
pepita-image-width-height-color
Before :
<p class="pepita-text"></p>
No length is specified here, so default of 16 is used.
After :
<p class="pepita-text">
cupidatat enim ex nostrud amet fugiat do ad in elit adipisicing consequat anim nisi veniam nisi
</p>
Before :
<p class="pepita-text-8"></p>
Length of 8 specified. Generates 8 words.
After :
<p class="pepita-text-8">
nostrud ut proident officia laboris minim amet ipsum
</p>
Before :
<p class="pepita-text-paragraphs-1"></p>
Paragraph
is one of three options (words, sentences and paragraphs). If nothing is given, default of words
is assumed.
After :
<p class="pepita-text-paragraphs-1">
Cillum quis officia nostrud tempor eiusmod nulla labore qui occaecat. Officia mollit quis excepteur velit magna qui officia cupidatat duis. Nisi anim pariatur exercitation quis aute. Nisi nostrud ea magna nostrud ea labore irure sint sint nostrud voluptate qui. Aliqua quis id anim sunt commodo. Officia incididunt do nulla ullamco laborum ex voluptate eu excepteur aliqua. Minim Lorem qui nisi officia esse adipisicing laborum cupidatat occaecat dolor mollit sit veniam aliqua.
</p>
Before :
<img class="pepita-image"></img>
Generates a 400px by 400px, black, image.
After : In the code :
<img class="pepita-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAOGUlEQVR4Xu3VsQ0AIAwEsWT/oUFiA642NWmsl25n5oxHgAABAgQ+BVZAPsV8J0CAAIEnIC"></img>
which looks like this :
Before :
<img class="pepita-image-250-150-#f4be41"></img>
Everything specified. Width, height and color.
After :
Besides specifying variables directly in the class name, /dist/pepita.js
exports the following values :
Keyword (e.g shorten pepita to just p)
Default length
Default type (words, sentences, paragraphs)
Default width
Default height
Default Color (for images)
If you happen to make changes to src/pepita.js
directly, remember to later compile it with browserify.
- Adding to a child is not possible if the parent element also had text/image added.
- Some combination of incorrect labels does not give out a warning.
- Images can only be added to
<img>
tags.
Special thanks to the contributors of the lorem-ipsum package.
You can use pepita-remover to remove the dummy classes from your html file(s).
Feedback (especially regarding useability and workflow) is hightly encouraged.