Create A Skeleton Screen From Auto Generated Placeholders – Placeholdifier

Category: Javascript , Recommended | July 9, 2020
Author: pomber
Views Total: 402 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