This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
lite-frames with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
This is a library of light weight frames UI (device, screens) made into web-components. you are allowed to embed whatever inside the frames
Lite frame provide quality and light-weight frames for your web project instead of using the conventional image format or building something from scratch.
These frame are build with HTML and CSS so they are definitely lighter than high quality png frames.
Lite Frames have plans to add more frames (and screens) e.g terminal frame, chrome browser frame, and other useful frames.
<script src="https://email@example.com/dist/lite-frames.js"> </script>
npm i lite-frames
import the package
See Stencils Docs on how to use with any frameworks or libraries when using npm
Every Lite Frame is a individual element, e.g For
Iphone X we have
A Lite Frame
width of it
parent and must have a parent element with a width greater than 0px
<div style="width:200px;"> <lite-iphone-x></lite-iphone-x> </div>
Lite Frame have two theme modes
Contents to be embedded inside the frame can be added as a decendant of the frame.
<lite-iphone-x theme="dark"> <!-- Html Content or text content --> <h1>This is the content<h1> </lite-iphone-x>
|Google pixel 4|
|theme||Component's theme||dark, light|