Protostrap is a framework for designers that want to get clickable and testable prototypes up fast. It allows designers to have reusable page elements for recurring things like navigation, headers and footers. It is based on Twitter Bootstrap.

1. Protostrap
A prototyping framework
for designers
Liip Techtalk
November 29th 2012
Memi Beltrame
@bratwurstkomet
💻 Demo
📥 Download
Liip - Agile Web Development
liip.ch

2. Protostrap is a framework
for designers that want to
get clickable and testable
prototypes up fast.
Liip - Agile Web Development
liip.ch

3. Goal
To allow designers to have
reusable page elements for
recurring things like
navigation.
Liip - Agile Web Development
liip.ch

4. Goal
To give designers a solid
foundation that offers of a lot
of expected functionality out
of the box.
Liip - Agile Web Development
liip.ch

5. It is based on Twitter
Bootstrap, so all you can do
there you can do here too.
Liip - Agile Web Development
liip.ch

6. Protostrap
+ +
Just a sprinkle! A lot of functionality.
Out of the box!
{
Liip - Agile Web Development
liip.ch

7. Only very basic PHP
Just a sprinkle!
knowledge needed:
<?php // this includes the header
include('./header.php');?>
$navbarClasses = array('active','','');
echo $username;
Liip - Agile Web Development
liip.ch

8. PHP is used to:
Just a sprinkle!
• Stitch elements together
• Allow fake auth layer
• Create id‘s for accordeons
• Fake Google searches
(Fake Google is not in the master branch yet)
Liip - Agile Web Development
liip.ch

9. Heaps of functionality
out of the box
Site structure
• Templates and snippets for
header, footer, iosTabbar
• Navigation snippets including bootstrap
navigation elements
• missing.php to show the "End of Prototype"
• 404 Handler that redirects to missing.php
• Fake Login Process and logged in status,
authentification error faking.
Liip - Agile Web Development
liip.ch

10. Heaps of functionality
out of the box
Mobile
• iOS tabbar with styles for
active and non active tabs
• Badges and for iOS
tabbar
Liip - Agile Web Development
liip.ch

11. Heaps of functionality
out of the box
Mobile
• Can be added to the
homescreen as a native
mobile-webapp
• Displays an "Add to
Homescreen" hint
• standalone app mode for ios,
correctly handling all the links
not to open in safari
Liip - Agile Web Development
liip.ch

12. Heaps of functionality
out of the box
Ready-to-Use Examples
• Grid
• Accordeon with dynamic ID
• Carousel with Touch support
• Tabs
• Stacked Navigation
• Breadcrumb that is horizontally scrollable on
mobile.
Liip - Agile Web Development
liip.ch

13. Heaps of functionality
out of the box
Entypo Pictogram Suite
• Protostrap uses the Entypo typeface
that allows to have scalable icons.
• Relies on the bootstrap syntax:
<i class="icon-user"></i>
• Scales up for headings
• Inherits the parents color value Entypo pictograms
by Daniel Bruce
http://entypo.com
Liip - Agile Web Development
liip.ch

14. Heaps of functionality
out of the box
In the Pipeline
• Megamenu files
• Forms with UX optimized Feedback
• Easy verification triggering for Form-Feedback
• Files to fake Google search
• Typeahead example with a more flexible
typeahead to emulate live-search
Liip - Agile Web Development
liip.ch

15. ⚠ Not for use on live sites
Protostrap is prototyping software and
lacks all the security features needed
on a live system.
Do NOT use this in a
production environment.
Liip - Agile Web Development
liip.ch

16. Demo:
📥 Resources
http://preview.liip.ch/protostrap
Download:
https://github.com/liip/Protostrap/archive/master.zip
GitHub:
https://github.com/liip/Protostrap/
Liip - Agile Web Development
liip.ch