Beer Flight

Introducing a new way to quickly present web design prototypes

Beer Flight is a tool to help demonstrate variations of a web design prototype. It's perfect for UX designers familiar with HTML & CSS to show (not tell) people what an experience would be like. Learn more.

Get started

1. Add the Beer Flight script to your HTML prototype.

<script src="https://cdn.rawgit.com/WhistleStudios/beerflight/master/beerflight.js"></script>

2. Add taster buttons to enable variations. Each button adds or removes a CSS class to elements on the page. The markup for a Beer Flight taster button looks like this:

<button beerflight-taster="Label" beerflight-selector="#selector" beerflight-class="class"></button>

3. Pour and serve.

Examples

CSS for a style variation...

.container { background: red; }
.container.try-blue { background: blue; }

...can be triggered with markup like this:

<!-- HTML for Beer Flight buttons) -->
<button beerflight-taster="Red"></button>
<button beerflight-taster="Blue" beerflight-selector=".container" beerflight-class="try-blue"></button>

Elements hidden by default CSS...

/* alert is hidden by default */
#alert { display: none; }
#alert.show-me { display: block; }

...can be revealed with buttons like these:

<!-- HTML for Beer Flight buttons) -->
<button beerflight-taster="Home"></button>
<button beerflight-taster="Notification" beerflight-selector="#alert" beerflight-class="show-me"></button>