Pepita
Generate placeholder text and images with simple CSS classes.
Installation
Download the package with npm :
$ npm install pepita
Usage
Go to your HTML file and load auto-pepita.js :
Specify what you want by adding a class to your element :
The text will appear once you open the file in your browser :
esse fugiat eu eiusmod eiusmod proident elit nisi nulla veniam laboris labore ipsum ullamco elit irure
Syntax
Everything in bold is a variable that you can change (e.g write 32 instead of length)
Text
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
Image
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
Examples
Text :
No length given:
Before :
No length is specified here, so default of 16 is used.
After :
cupidatat enim ex nostrud amet fugiat do ad in elit adipisicing consequat anim nisi veniam nisi
Length specified:
Before :
Length of 8 specified. Generates 8 words.
After :
nostrud ut proident officia laboris minim amet ipsum
Type specified :
Before :
Paragraph is one of three options (words, sentences and paragraphs). If nothing is given, default of words is assumed.
After :
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.
Images :
Default image:
Before :
Generates a 400px by 400px, black, image.
After : In the code :
which looks like this :
Height, width and color :
Before :
Everything specified. Width, height and color.
After :
Customization
Besides specifying variables directly in the class name, /dist/pepita.jsexports 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.
Known bugs
- 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.
Thanks
Special thanks to the contributors of the lorem-ipsum package.
Contributing
Feedback (especially regarding useability and workflow) is hightly encouraged.