content-placeholder
Progressively enhanced content placeholders
Layer 1: different widths for line lengths
Layer 2: multiple background images with linear gradients to insert spaces
Layer 3: use flexbox layout to create a random order of lines for each placeholder
Install
npm install progressive-content-placeholder
Usage
Include the script and styles and create a new Placeholder
object:
new Placeholder();
or use the jquery wrapper:
$(document).ready(function() {
$('.foo').placeholder(4);
});
Yet another example usage:
new Placeholder({
el: document.querySelectorAll('.content'),
lines: 8
});
There are also several modifiers available, such as:
-
.placeholder--plain
for plain text without any breaks, -
.placeholder--block
blocktext, -
.placeholder--right
align right, -
.placeholder--center
align center, -
.placeholder--asc
ascending sort by line length or -
.placeholder--desc
descending sort by line length
Options
Option | Description | Default |
---|---|---|
el |
element selector | document.querySelectorAll('.placeholder') |
lines |
amount of lines to insert | 4 |
The amount of lines will be overwritten by the data-placeholder-lines
attribute.
Customize
To customize the styling even more, use the sass mixin and include the partial with your own settings.
$placeholder-breakpoints: 0 768px 1024px;
$placeholder-randoms: 8;
$placeholder-sizes: (
small: (
height: 0.5rem,
margin: 0.5rem,
color: #ddd #fff,
length: 10 90,
width: 60 90,
lines: 16,
words: 4,
space: 10
),
medium: (
height: 0.75rem,
margin: 0.75rem,
color: #ccc #fff,
length: 10 90,
width: 60 90,
lines: 16,
words: 4,
space: 10
),
large: (
height: 1rem,
margin: 1rem,
color: #bbb #fff,
length: 10 90,
width: 60 90,
lines: 16,
words: 4,
space: 10
)
);
@import "placeholder";
@include placeholder();