This document discusses using the Foundation front-end framework for both prototyping and production. It notes that Foundation is useful for prototyping because it allows for low-fidelity, quick iteration optimized for development speed. However, it also argues that Foundation is suitable for production use, as it results in high-fidelity, stable, highly customized sites and apps optimized for end user speed. The document promotes Foundation by highlighting its large community, wide usage in both small and large projects, and emphasis on best practices like responsive design, accessibility, and modern coding standards.

1. Foundation
Prototype To Production
@kbal11
@ZURB @ZURBFoundation

2. Hi there.
I’m from ZURB.

3. We’re a team of T-shaped
product designers who
help grow businesses.

4. We also make…

5. Foundation
for Sites
Foundation
for Email

6. Front-end platform for reaching
anyone on any device

7. Foundation by the Numbers
27,000 Daily Google Searches
880+ Contributors
24,200 Github Stars

8. Why a Framework?

10. Why a Framework?
We take care of tons of stuff for you.

11. Lower cost of ownership.
We take care of tons of stuff for you.

12. Battle tested.
Dozens of clients large and small.

13. Less QA and debugging.
We’ve fixed it all already.

14. Responsiveness
Mobile First Isn’t Just a Slogan

15. Standardization
Bring new team up to speed and reduce thrash.

16. Refined and refined and refined.
We’ve gone through 6 major version of Foundation for Sites alone.

17. Supported by an organization.
ZURB, duh.

18. Aren’t Frameworks Just
For Prototyping?

19. Prototype VS Production

20. Prototyping
• Low Fidelity
• Quick Iteration
• Optimize for Development Speed

21. Production
• High Fidelity
• Stable
• Highly Customized
• Optimize for End User Speed

22. Prototype

23. Production

24. Prototyping With
Foundation

25. Prototyping
• Low Fidelity
• Quick Iteration
• Optimize for Development Speed

26. Low Fidelity

27. Wireframe in Code

28. Quick Iteration

30. Consolidated Settings

31. The ZURB Stack

32. Optimize For
Development Speed

33. Built-In Responsive Grid

34. Interactivity Without Javascript

35. 30+ Components
Out Of The Box

36. What About
Production?

37. Production
• High Fidelity
• Stable
• Highly Customized
• Optimize for End User Speed

38. High Fidelity

39. Semantic

40. Accessibility Baked In

41. Stable

42. Battle Tested

43. Highly Customized

44. Extensible

45. “Foundational”

46. Optimize For
End User Speed

47. Streamlined

48. Fast

49. More Important Than
Ever

50. The Rise Of Design

51. Design And Development

52. Design And Development

53. Common Language

54. Speed of Change

55. Best Practices Like…

56. Mobile First Development
Because we hear people use phones

57. SCSS
CSS With Superpowers

58. Accessibility
Every Device Doesn’t Just Mean Phones

59. ES2016
21 years old and ready to party

60. Unified Event Listeners
Everybody’s doing it

61. Foundation In Production

63. Build On A Solid
Foundation

64. Thank You!
@kbal11
@ZURB @ZURBFoundation