Facade

Facade is a lightweight browser window mockup in HTML & CSS. Here's an example:

No more Photoshop.

No more taking screenhots and trying to make them fit inside a layer that almost has the right dimensions, but not quite. Cut the crap and create your mockups straight in your HTML.

It's fluid.

Facade doesn't scale like a plain old responsive image, it adapts, just like a normal browser window would. If you're a bit like me, you're the kind of person that constantly resizes the browser window to see if something is responsive. Don't worry, it's been taken care of. Kick the tires a bit and drag that window. You know you want it!

Tiny, simple and clean.

Based on the beautiful minimal browser mockup done by Jacob Säwensten. One CSS file and one class name and you're good to go. Take a look at the documentation. Easy peasy.

Documentation

Here's an example of the code:

<link rel="stylesheet" href="css/facade.css">
...
<section class="facade-minimal" data-url="http://www.bowie-to-bowie.io"> 
    <h1>Ground control to Major Tom...</h1>
</section>

which will result into:

Ground control to Major Tom...

Browser support

Known issues

About

If you were wondering why the heck anyone would ever need this, it was made because of some poor decisions I made when writing a PHP course - which you can download for free on Github (if you speak Dutch, that is). I quickly got fed up with making screenshots of how the output HTML should look like or updating them every time something changed.

Example of difficult to maintain screenshot of exercise output
Before: screenshot of output. Difficult to update.

PHP Excercise 020 - Part 1

Registration form

After: Using Facade to show output. Superflexible.

Since the output always was HTML-code I decided to create a little CSS framework that makes an element look like a browser window. That way I could show what the output should look like instead of having to take screenshots of the HTML. In the end I got a bit carried away and made this entirely in CSS, but it was a fun exercise and I like the fact that this is just one css-file (and admittedly some SVG wizardry) and one class. It's amazing what you can do with ::before and ::after elements. They've become my favorite CSS tools!

Other projects

Here are some other projects I've been working on: