Create A Skeleton Screen From Auto Generated Placeholders – Placeholdifier

Preview:

Description:

Placeholdifier is a CSS library that lets you generate a Skeleton Screen (also called website wireframe, website mockup) from any HTML elements within the document.

The library provides a font named Placeholdifier that turns any text into color blocks similar to the placeholder images.

It is also available as a Chrome extension that allows developers to turn any website into a live wireframe.

How to use it:

1. Load the Placeholdifier.css from a CDN.

<link href="https://unpkg.com/placeholdifier/placeholdifier.css" rel="stylesheet" />

2. Add the CSS class placeholdify to HTML elements and done.

<h1 class="placeholdify">CSSScript.com</h1>
<p class="placeholdify">CSSScript.com</p>
<pre class="placeholdify">pre.placeholdify,
pre.placeholdify *,
.placeholdify pre *,
code.placeholdify,
code.placeholdify *,
.placeholdify code * {
  font-family: "Placeholdifier Monospace" !important;
}
.placeholdify img,
.placeholdify video {
  filter: brightness(0%) contrast(0%) opacity(0.8);
}
</pre>