Placeholder UI

A simple fast free user interface placeholder-ui plugin.

Placeholder UI is a Image or Video placeholder user interface plugin. Placeholder UI is one-dependency module placeholder-ui dependent on Snizzle CSS selector Javascript engine. Placeholder UI that set default placeholder of all elements image/video of empty src. Placehlder UI in multiple features available like background, text color, cutom text, size preview and more.

• 🙏🏻 Follow on Github
• 🔖 Releases
• ⬇️ Install
• 📚 Examples
• 📖 Documentation
• 🚀 CDN links
• 🌐 Browsers support

⬇️ Install npm

# install locally (recommended)
npm install placeholder-ui --save

Including Placeholder UI

Below are some of the most common ways to include placeholder-ui.

Browser

Script tag

<!--Implement Snizzle CSS selector engine libraray in head section (Recomended)-->
<script src="https://cdn.jsdelivr.net/npm/snizzle/dist/snizzle-min.js"></script>

<!-- Implement placeholder-ui plugin from cdn link or your download destination -->
<script src="https://cdn.jsdelivr.net/npm/placeholder-ui/plugin/placeholder-ui-min.js"></script>

📖 Documentation

Public API

placeholder(Object options)

Parameters options: A placeholder Object {}

📚 Examples

HTML code

<!-- for image placeholder required image in [data-sizes] attribute -->
<img src="" alt="" data-sizes="200x300">
<!-- for video placeholder required video in [data-text] attribute -->
<video src="" data-text="Example Text"></video>

Javascript code

placeholder.set({
	background: "#677cbb",  // Placeholder background (optional)
	color: "#fff",          // Placholder text color (optional)
	sizePreview: true,      // true/false true for incling size preview (optinal)
	fontFamily: "Arial",    // Custom font-family (optinal)
	fontSize: 20,           // Custom font-size (optinal)
	fontWeight: 900,        // Custom font-weight (optinal)
	fontStyle: "normal"     // Custom font-style italic/oblique/normal (optinal)
});

🚀 CDN Links

• Github link
• CDN link

🌐 Browsers support

Desktop

• Chrome 16+
• Edge 12+
• Firefox 3.6+
• Internet Explorer 7+1
• Opera 11.6+
• Safari 4.0+

1Workarounds for Internet Explorer 6 are still in the code but the browser is no longer actively tested.

Mobile

• Android 2.3+
• iOS 5.1+

To report a bug in any of these browsers, please add an issue with a test case from jsfiddle or jsbin.

Usage

HTML Code

<img src="" alt="Placeholder UI" data-sizes="222x333">

Javascript Code

placeholder.set({
	sizePreview: true,
	fontFamily: "monospace"
});

Preview:

Javascript Code

placeholder.set({
	background: "dark",
	sizePreview: true,
	color: "#ddd",
	fontFamily: "monospace"
});

Preview:

Javascript Code

placeholder.set({
	background: "#677cbb",
	color: "#fff",
	sizePreview: true,
	fontFamily: "Arial",
	fontSize: 20,	
	fontWeight: 900,
	fontStyle: "normal"
});

Preview:

HTML Code

<video src="" data-text="Shahzada Modassir\nVideo frame">

Javascript Code

placeholder.set({
	background: "#555555",
	fontWeight: 900,
	fontSize: 20,
	color: "#eeeeee",
	fontStyle: "italic"
});

Preview: