Embed Size (px)
DESCRIPTION
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.
Citation preview
Liip - Agile Web Developmentliip.ch
ProtostrapA prototyping framework for designersLiip TechtalkNovember 29th 2012
Memi Beltrame@bratwurstkomet
📥 Download💻 Demo
Liip - Agile Web Developmentliip.ch
Protostrap is a framework for designers that want to get clickable and testable prototypes up fast.
Liip - Agile Web Developmentliip.ch
To allow designers to have reusable page elements for recurring things like navigation.
Goal
Liip - Agile Web Developmentliip.ch
To give designers a solid foundation that offers of a lot of expected functionality out of the box.
Goal
Liip - Agile Web Developmentliip.ch
It is based on Twitter Bootstrap, so all you can do there you can do here too.
Liip - Agile Web Developmentliip.ch
Protostrap
Just a sprinkle!
+ +A lot of functionality.
Out of the box!{
Liip - Agile Web Developmentliip.ch
Just a sprinkle!
Only very basic PHP knowledge needed:
<?php // this includes the header include('./header.php');?>
$navbarClasses = array('active','','');
echo $username;
Liip - Agile Web Developmentliip.ch
Just a sprinkle!
PHP is used to:
•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 Developmentliip.ch
Heaps of functionalityout of the box
• 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.
Site structure
Liip - Agile Web Developmentliip.ch
Heaps of functionalityout of the box
• iOS tabbar with styles for active and non active tabs
• Badges ⓵ and ⓶ for iOS tabbar
Mobile
Liip - Agile Web Developmentliip.ch
Heaps of functionalityout of the box
• 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
Mobile
Liip - Agile Web Developmentliip.ch
Heaps of functionalityout of the box
• Grid• Accordeon with dynamic ID• Carousel with Touch support• Tabs• Stacked Navigation• Breadcrumb that is horizontally scrollable on
mobile.
Ready-to-Use Examples
Liip - Agile Web Developmentliip.ch
Heaps of functionalityout of the box
• Protostrap uses the Entypo typefacethat allows to have scalable icons.
• Relies on the bootstrap syntax:
• Scales up for headings • Inherits the parents color value
Entypo Pictogram Suite
<i class="icon-user"></i>
Entypo pictograms by Daniel Bruce
http://entypo.com
Liip - Agile Web Developmentliip.ch
Heaps of functionalityout of the box
• 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
In the Pipeline
Liip - Agile Web Developmentliip.ch
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 Developmentliip.ch
Resources
Demo: http://preview.liip.ch/protostrap
Download: https://github.com/liip/Protostrap/archive/master.zip
GitHub:https://github.com/liip/Protostrap/
📥
