Bootstrap 3.0

2,007 views
1,770 views

Published on

The boots we all wear!
Framework integration

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,007
On SlideShare
0
From Embeds
0
Number of Embeds
317
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Bootstrap 3.0

  1. 1. The “Boots” we all wear Bootstrap 3.0 Framework - Integration
  2. 2. What is it? 12 Grid responsive Css framework
  3. 3. It’s currently the new standard for every website to be accessible in multiple devices across different screen sizes Smashing magazine, Gizmodo, Codrops, Dribbble, ...
  4. 4. Yes, ok and So... How? Who? What? How does it affect YOU?
  5. 5. Use Case Scenario, I called it - “The Routines” Int. Design Start with IA in Axure Gra. Design Design all of the PSD’s Front-end Css Layout & Style it Back-end Add functionality
  6. 6. Axure Complete sets of IA At least 6 - 8 pages +++ / project
  7. 7. Photoshop Between 6 ++ PSD’s / project
  8. 8. Html - Css Complete sets of styling - layout At least 6 - 8 pages +++ / project
  9. 9. Functionality Varies depending on project At least 6 - 8 +++ functions - custom code / project
  10. 10. And we are still doing it the same way for every single project… ! everytime, again and again for some projects which are rather similar
  11. 11. So How can Bootstrap 3.0 Help us to achieve ! High quality website within less hours involves more team work make things easier return more profit ! Without Cost & learning Anything!
  12. 12. Thanx, to the large open source community that envy Bootstrap, We now have pieces of building blocks that we can connect together. ! This method is still fresh, not much known, a secret...
  13. 13. Bootstrap 3.0 layout for Axure Flat UI Pro Bootstrap 3.0 PSD http://axutopia.com/twitter-bootstrap/ http://axutopia.com/twitter-bootstrap/ Int. Design Gra. Design Functions, jQuery, Web elements, etc Flat UI Pro Bootstrap 3.0 - Css http://getbootstrap.com/ http://axutopia.com/twitter-bootstrap/ Back-end Front-end 1 Bootstrap 3.0 Grid System - Html http://getbootstrap.com/ Front-end 2
  14. 14. http://designmodo.com/demo/flat-ui/ http://axutopia.com/twitter-bootstrap/ http://pixeldropr.com/ http://getbootstrap.com/ http://bootswatch.com/flatly/ http://www.yabdab.com/demo/bootsnap/
  15. 15. <link href="http://bootswatch.com/flatly/bootstrap.css" rel="stylesheet"> Paste this on the last row of http://getbootstrap.com/components/
  16. 16. Wireframe layout & functionality Create only minimum 1 PSD UI Int. Design Gra. Design Construct web elements Transform the UI PSD styling - Css color Back-end Front-end 1 Load Balancing Method Construct the template - Css Grid Front-end 2
  17. 17. Layout & Functionality Create new web UI Int. Design Gra. Design Only the layout Front-end 2 Only the style Front-end 1 Back-end Result
  18. 18. http://highlander.novademo.com/m/ Bootstrap 3.0 for Magento 1.8 https://drupal.org/project/bootstrap Bootstrap 3.0 for Drupal 7
  19. 19. Interaction Design Perspective There is an available Bootstrap 3 Axure Library IA will look more stylish than our current IA IA define layout & functionality
  20. 20. Graphic Designer Perspective A PSD ready with Html code available for Bootstrap 3 1 UI page psd for any site 1 Style for each web elements makes design more accurate Not so-dependent on IA result while designing
  21. 21. Front-End Perspective Quick 12 grid layouting, responsive / non responsive. Save time creating responsive front-end Front-end now can use the IA as reference Front-end now can template website without being attached to a local server
  22. 22. Back-End Perspective Easier to manipulate the Html layout Back-end now can contribute Front-end work easily Back-end now can use the IA as reference Back-end can build functionality by looking straight to IA
  23. 23. Project Manager & Sales Perspective There are not much website in the Netherlands that use Bootstrap (especially for Magento) More open source framework Responsive ready website offer Front-end, Back-end and interns can now also template Magento easily More room for marketing communication, strategy, research, etc
  24. 24. The Circles Perspective Negligible cost Very low risk No E=mc2 (calculation)... Stairway to make Profit!
  25. 25. Risk ! It’s never been implemented yet We need to work closer and communicate better as a team No stable / own Magento Bootstrap 3 yet Sell the same hours, use it for other areas
  26. 26. Conclusion Big advantage for everybody Flexible team work Synchronize IA, Design, Frontend, Backend Easily upgrade / update website for Front-end’er Nothing is needed to be learned besides small portion for Front-end’er Responsive / not responsive is not a ‘drama’ anymore Reindert needs to find Bootstrap developer
  27. 27. FAQ Why Bootstrap? The largest responsive mobile first community Flexible team work & team plays Faster development, grid layout & responsive (xs, sm, md, lg) More opportunities for intern to actually template project Exchange website style between different cms Html 5 ready Compatible with IE:9 and compatible with less (OOIP style) Free... It's Open Source Framework
  28. 28. The “Boots” we all wear Questions? Framework - Integration

×