Protostrap

10,486 views

Published on

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.

Published in: Design
  • Be the first to comment

Protostrap

  1. 1. ProtostrapA prototyping frameworkfor designersLiip TechtalkNovember 29th 2012Memi Beltrame@bratwurstkomet 💻 Demo 📥 Download Liip - Agile Web Development liip.ch
  2. 2. Protostrap is a frameworkfor designers that want toget clickable and testableprototypes up fast. Liip - Agile Web Development liip.ch
  3. 3. GoalTo allow designers to havereusable page elements forrecurring things likenavigation. Liip - Agile Web Development liip.ch
  4. 4. GoalTo give designers a solidfoundation that offers of a lotof expected functionality outof the box. Liip - Agile Web Development liip.ch
  5. 5. It is based on TwitterBootstrap, so all you can do there you can do here too. Liip - Agile Web Development liip.ch
  6. 6. Protostrap + + Just a sprinkle! A lot of functionality. Out of the box! { Liip - Agile Web Development liip.ch
  7. 7. Only very basic PHPJust a sprinkle! knowledge needed: <?php // this includes the header include(./header.php);?> $navbarClasses = array(active,,); echo $username; Liip - Agile Web Development liip.ch
  8. 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. 9. Heaps of functionality out of the boxSite 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. 10. Heaps of functionality out of the boxMobile• iOS tabbar with styles for active and non active tabs• Badges and for iOS tabbar Liip - Agile Web Development liip.ch
  11. 11. Heaps of functionality out of the boxMobile• 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. 12. Heaps of functionality out of the boxReady-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. 13. Heaps of functionality out of the boxEntypo 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. 14. Heaps of functionality out of the boxIn 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. 15. ⚠ Not for use on live sitesProtostrap is prototyping software andlacks all the security features neededon a live system.Do NOT use this in aproduction environment. Liip - Agile Web Development liip.ch
  16. 16. Demo: 📥 Resourceshttp://preview.liip.ch/protostrapDownload:https://github.com/liip/Protostrap/archive/master.zipGitHub:https://github.com/liip/Protostrap/ Liip - Agile Web Development liip.ch

×