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--descdescending sort by line length

Options

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();