Facade is a lightweight browser window mockup in HTML & CSS. Here's an example:
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.
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!
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.
facade-minimalclass on there
data-urlattribute and fill in your juicy mockup url
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:
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.
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
::after elements. They've become my favorite CSS tools!
Here are some other projects I've been working on: