Declarative wireframes for programmers, based on open web technologies.
Sometimes, you need to communicate to other people on what your software will do and how. The most efficient way is to create wireframes to show functionality and layouts. However, if you are a programmer, it is likely that writing code is easier for you than drawing boxes in an unfamiliar graphics editor.
Shireframe allows you to create wireframes by writing HTML using your favorite IDE, preview results in your favorite browser, branch/diff/merge wireframes as code in your favorite VCS and do anything else you usually do with source code.
Shireframe includes ready-made styling for sketchy look-and-feel, a number of reusable components, and bundled great libraries to simplify your life.
Interactivity support comes for free thanks to web technologies!
<!DOCTYPE html> <html> <head> <script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js"></script> <title>Doodle</title> </head> <body> <browser-chrome> <div class="container-fluid"> <div class="text-right vertical-margin"> <a>~Me</a> <a>Mail</a> <a>Pictures</a> <glyphicon th></glyphicon> <glyphicon user></glyphicon> </div> <div class="vertical-margin"> <row> <col-6 col-offset-3> <h1 class="text-title text-center"></h1> <box class="width-100 vertical-margin">|</box> </col-6> </row> <row> <col-3 col-offset-3> <button class="btn btn-default width-100">Doodle search</button> </col-3> <col-3> <button class="btn btn-default width-100">I'm feeling doodley</button> </col-3> </row> </div> <footer class="vertical-margin"> © <text-url></text-url> 2015 </footer> </div> </browser-chrome> </body> </html>
Shireframe includes the following libraries:
AngularJS drives the HTML and simplifies interactivity,
jQuery handles DOM manipulation,
RequireJS loads modules and styles,
Bootstrap provides solid foundation for layout and a number of helpful utility classes,
Lodash is a great utility belt,
Google font "Kalam" which looks hand-written while supporting both normal and bold styles (a rare combination),
and FontAwesome, because it is awesome indeed.
Create an HTML5 document and include a JS script.
And just start including your content into document body. Make sure to use some bundled goodness described below.
Open your HTML5 document in your favorite browser.
See the source code in
Most components are actually AngularJS directives or special CSS styles.
Here’s an exhaustive list:
When including shireframe-r.js, you can add attributes to the
<script> tag to modify behaviour. Available options are:
no-sketchy-filterremoves line "waviness"
more to come…
<script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js" no-sketchy-filter></script>
Make sure all closing elements match their opening counterparts.
Remember that it doesn’t work with self-closed tags like
box is just a div with a preset black border.
You may use it as fake inputbox or whatever.
Pipe symbol (
|) may denote a cursor within such an inputbox.
<box>Hello there!|</box> <div box>as an attribute</div> <div class="box">class is also ok</div>
col-12 are shorthands for Bootstrap’s grid classes
It is shorter to read and write than
<div class="col-xs-1 col-xs-offset-1">.
<row> <col-3 col-offset-1>First column</col-3> <col-3>Second column</col-3> <b col-3>Abusing B to make third column bold</b> </row>
Shorthands for FontAwesome and Glyphicon classes. They also turn all attributes into prefixed classes.
<fa star></fa> <fa gear fw 5x spin></fa> <glyphicon user></glyphicon>
Inserts a random kitten photo from teh internet. Each next tag instance will have a different picture, but they persist across page reloads. Use it as a placeholder for images or user photos. Fun!
<kitten></kitten> <kitten size="5em"></kitten>
Wrap your content in
<browser-chrome> … </browser-chrome>
to have a nice fake window border with a title, address bar and nav buttons.
Of course, they are fake and don’t react to clicks, but allow you to express
your app environment ("my app works in a web browser").
<browser-chrome> Look, a kitty in my web browser: <kitten></kitten> </browser-chrome>
This has nothing to do with with Google Chrome. It’s just any browser’s UI is frequently called chrome.
Shows the same thing as in your
<title> or awesome default if there isn’t any title.
Used in browser-chrome and potentially many other places.
<text-title></text-title> <h1 text-title></h1>
text-title, but transforms it to fake url like
<text-url></text-url> <a text-url></a>
Inserts a comment which expresses dissatisfaction or satisfaction.
<cheerful-comment></cheerful-comment> <angry-comment></angry-comment> <p cheerful-comment></p>
Inserts a widely-known placeholder text of N characters length.
<p lorem-ipsum="100"></p> <lorem-ipsum></lorem-ipsum>
Planned for future
my-profile-photowhich is the same in every tag instance
random-profile-photowhich is different in every tag instance
random-logoan abstract shape
login-formusername-password (or email-password) form with a "login" button
template-navbara ready navbar will include random-logo, title, searchbar, gear button (aka settings), my-profile-photo and a logout button
template-footera ready footer will include a made-up copyright statement and a few made-up links
ipad-chromewith orientation parameter
nonsenserandom placeholder text that looks like syntactically correct English but has no meaning
random-pie-chartbased on d3.js and c3.js
and more… Contributions welcome!
With one-time wireframes that will be thrown out soon, it is likely that you won’t care about separating and reusing future-proof CSS rules. Instead, inline styles are the way to go.
That’s why I provide a number of helper classes for you to use along with Bootstrap’s tools to perform common tasks.
Overrides Bootstrap’s font-weight to 600 which is supported by bundled handwriting font.
Adds 1em vertical space to the top and bottom of your element.
An alias for
An alias for
An alias for
An alias for
In the simplest form, you could create several
and link them together using
<a href="…"> links.
You probably know that already :-)
Another possibility is to use AngularJS directives
that add behavior like
Refer to AngularJS docs for more info.
Just remember that your wireframe is an ordinary HTML page and you can do anything you want with the page.
Create your own reusable components / API
You can refactor your templates to reusable components.
Extract bits and pieces into separate html files and register
partials attribute on shireframe
wireframe.html: <script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js" partials="my-partial another-partial"></script> <my-partial></my-partial> <another-partial>My content</another-partial>
my-partial.html: <b>Hey, I'm partial!</b>
another-partial.html: <i>Here's your content: <ng-transclude></ng-transclude></i>
Including other scripts & code
Shireframe uses cutting-edge web technologies, so only evergreen browsers are supported. Safari, Chrome, Firefox are ok. Sorry, IE users.
Also, SVG filter which is used to distort wireframe for "sketchy" look is completely broken on iOS, so you have to opt-out of filtering or use pre-rendered images to show wireframes on iPads and iPhones.
Render to PNG
There’s a script included in make-screenshot directory which will render a hi-res version of your wireframe.
shireframe/make-screenshot/make-screenshot.sh http://wherever.your/wireframe/is.html render.jpg
To make it work, you have to install PhantomJS 2.0 (1.x branch won’t work) and ImageMagick.
On Mac OS X with MacPorts, the following commands will bring in everything you need.
sudo port install phantomjs sudo port install ImageMagick
This project is licensed under the terms of GNU GPLv2 (GNU General Public License version 2) or later.
Shireframe is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the impliged warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
Fork, hack, push and pull-request. Contributions welcome!
Also, please help spreading the word and freeing your fellow colleague programmers from having to struggle with mouse-driven graphics editors.
Why the name?
W in wireframe looks like Cyrillic Ш (sh). That’s it.