Mockup
Browser, window and phone frames for screenshots, demos and landing pages.
Browser
Interfaces cooked differently.
<div class="mn-mockup-browser" style="max-width:34rem;margin:auto">
<div class="mn-mockup-bar"><span class="mn-mockup-url">mian.ro</span></div>
<div class="mn-mockup-body mn-stack" style="--mn-gap:.75rem"><h3 class="mn-h4" style="margin:0">Interfaces cooked differently.</h3><div class="mn-row"><button class="mn-btn mn-btn-sm">Get started</button><button class="mn-btn mn-btn-sm mn-btn-outline">Components</button></div></div>
</div>Window and phone
$ curl -O https://mian.ro/r/calendar.json
✓ calendar.json saved
Mian
<div class="mn-mockup-window" style="max-width:22rem">
<div class="mn-mockup-bar">zsh</div>
<div class="mn-mockup-body">$ curl -O https://mian.ro/r/calendar.json
✓ calendar.json saved</div>
</div>
<div class="mn-mockup-phone" style="--_w:11rem"><div class="mn-mockup-screen"><div style="padding:3rem 1rem 1rem" class="mn-stack"><strong>Mian</strong><div class="mn-progress" role="progressbar" aria-label="Loading" aria-valuenow="60" style="--_v:60%"></div><button class="mn-btn mn-btn-sm mn-btn-block">Continue</button></div></div></div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/mockup.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-mockup-browser | A browser window: mn-mockup-bar (with mn-mockup-url) and mn-mockup-body. |
| mn-mockup-window | A terminal/code window. |
| mn-mockup-phone | A phone frame with mn-mockup-screen inside; --_w sets the width. |
Accessibility
- Frames are decoration: the content inside must make sense on its own. If a frame only holds an image, give the image good alt text.