protostrap
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.TRANSCRIPT
![Page 1: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/1.jpg)
Liip - Agile Web Developmentliip.ch
ProtostrapA prototyping framework for designersLiip TechtalkNovember 29th 2012
Memi Beltrame@bratwurstkomet
📥 Download💻 Demo
![Page 2: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/2.jpg)
Liip - Agile Web Developmentliip.ch
Protostrap is a framework for designers that want to get clickable and testable prototypes up fast.
![Page 3: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/3.jpg)
Liip - Agile Web Developmentliip.ch
To allow designers to have reusable page elements for recurring things like navigation.
Goal
![Page 4: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/4.jpg)
Liip - Agile Web Developmentliip.ch
To give designers a solid foundation that offers of a lot of expected functionality out of the box.
Goal
![Page 5: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/5.jpg)
Liip - Agile Web Developmentliip.ch
It is based on Twitter Bootstrap, so all you can do there you can do here too.
![Page 6: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/6.jpg)
Liip - Agile Web Developmentliip.ch
Protostrap
Just a sprinkle!
+ +A lot of functionality.
Out of the box!{
![Page 7: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/7.jpg)
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;
![Page 8: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/8.jpg)
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)
![Page 9: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/9.jpg)
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
![Page 10: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/10.jpg)
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
![Page 11: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/11.jpg)
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
![Page 12: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/12.jpg)
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
![Page 13: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/13.jpg)
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
![Page 14: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/14.jpg)
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
![Page 15: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/15.jpg)
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.
![Page 16: Protostrap](https://reader033.vdocuments.site/reader033/viewer/2022060108/5550b34ab4c905fa618b496d/html5/thumbnails/16.jpg)
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/
📥