Create A Skeleton Screen From Auto Generated Placeholders – Placeholdifier

Category: Javascript , Recommended | July 9, 2020
Author:pomber
Views Total:2,404 views
Official Page:Go to website
Last Update:July 9, 2020
License:MIT

Preview:

Create A Skeleton Screen From Auto Generated Placeholders – Placeholdifier

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>

You Might Be Interested In:


Leave a Reply