Designing Metro style apps using CSS3

1. PLAT-873T Designing Metro style apps using CSS3 Christian Stockwell Program Manager, Internet Explorer Microsoft Corporation

2. Agenda • CSS Concepts • Structuring your app • Flowing content • Create beautiful text-centric designs You’ll leave with examples of how to • Create clean and flexible Metro style designs with CSS3 • Enrich text-centric experiences with CSS3

3. CSS3 and HTML5 enable you to build beautiful Metro style apps.

4. Windows 8 Metro style apps Desktop apps HTML JavaScript HTML / CSS XAML View JavaScript (Chakra) C C++ C# VB Model Controller C C++ C# VB WinRT APIs Devices & Printing Communication & Data Graphics & Media System Services .NET / SL Internet Explorer Win32 Application Model Windows Core OS Services Core

5. These features work identically in Internet Explorer 10 and Metro style apps using HTML.

6. demo Magazine app An engaging Metro style reading experience built with CSS3 and HTML5

7. CSS concepts

8. Making your app great with CSS Separate presentation from content, and… Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText Block Float Inline Inline Inline Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText Block (x,y) Block Absolute Scroll Visible Hidden Flow Position Overflow

9. CSS3

10. CSS3 is great for apps.

11. App structure with CSS3 flexible box& CSS3 grid

12. demo CSS3 flexible box layout Design a flexible collection with CSS 3 flexible box layout

13. CSS 3 flexible box layout • Define direction and ordering of flexible box items • Define how to distribute and share free space to flexibly space and size elements • Align items horizontally or vertically • display: flexbox • -ms-box-direction • -ms-box-orient • -ms-box-ordinal-group • -ms-box-line-progression • -ms-box-lines • -ms-box-pack • -ms-box-flex • -ms-box-align

14. CSS 3 flexible box layout uses • Build simple designs that partition space vertically or horizontally • Align related elements and distribute available space • Perfect for menus, lightweight collections, or simple designs

15. demo CSS3 grid layout Design an adaptable app with CSS3 grid layout

16. CSS3 grid layout • display: grid • -ms-grid-columns • -ms-grid-rows • -ms-grid-column • -ms-grid-row • -ms-grid-column-span • -ms-grid-row-span • -ms-grid-column-align • -ms-grid-row-align • Create a grid and define grid rows and columns • Place grid items within the grid rows and columns • Define flexible row, column sizing • Align grid children

17. CSS3 grid layout uses • Enables you to easily design grid-aligned apps that partition space vertically and horizontally • Uses declarative styles to create clean designs that can be easily adapted to multiple resolutions • Allows you to specify positions independent of content order • Perfect for more complex Metro style apps

18. Flow content with CSS3 regions

19. demo CSS3 regions Paginate HTML content using CSS3 regions to create adaptable page layouts

20. CSS 3 Regions • Define content sources • Define content containers • Dynamically flow content sources through content containers • flow-into • flow-from • msRegionUpdate • msRegionOverflow • msGetRegionContent()

21. CSS 3 regions uses • Create content flows that flow content across multiple disjoint containers • Design elegant and adaptable text layouts • Ideal for creating complex text-centric designs like magazines or books that adapt to multiple resolutions

22. Beautiful text layouts with positioned floats, CSS3 multiple columns and CSS3 hyphenation

23. demo CSS3 text layouts Design elegant text layouts with multiple columns and hyphenation

24. CSS3 multiple column layout • Break text across multiple columns • Specify column gaps • Enable and style column rules • Define column breaks • column-count • column-width • column-gap • column-rule-color • column-rule-style • column-rule-width • break-before • break-after • break-inside

25. CSS3 hyphenation • Turn on hyphenation for text • Tune hyphenation behavior through granular hyphenation properties • 18 languages supported by Windows 8 • hyphens • hyphenate-limit-zone • hyphenate-limit-lines • hyphenate-limit-chars

26. demo Positioned floats Create rich text flows with positioned floats

27. Positioned floats • float: -ms-positioned • -ms-flow-wrap • Position images, text, and other content anywhere on the page • Flow text around positioned floats, or opt elements out • Integrate media with complex and adaptable text layouts

28. Review

29. demo Magazine app construction Bring it all back together

30. CSS3 Grid and CSS3 flexible box to design elegant and flexible apps.

31. CSS3 Regions to dynamically flow text content across pages.

32. Positioned floats, CSS3 multiple column, and CSS3 hyphenation for beautiful text-centric designs.

33. Related sessions • [APP-207T] Reach your customers’ devices with one beautiful HTML5 user interface • [PLAT-376T] Building offline access in Metro style apps and websites using HTML5 • [PLAT-381T] Building beautiful and interactive apps with HTML5 & CSS3 • [PLAT-382T] What’s New with HTML5, JavaScript, and CSS3 • [PLAT-386T] 50 performance tricks to make your Metro style apps and sites using HTML5 faster

34. Further reading and documentation • Internet Explorer Test Drive site http://ietestdrive.com/ • Internet Explorer Engineering Team Blog http://blogs.msdn.com/b/ie/ • W3C CSS Specifications and Drafts http://www.w3.org/Style/CSS/ • What’s new in IE9 http://www.ietestdrive.com/Links/DevGuide9.html • What’s new in IE10 http://www.ietestdrive.com/Links/DevGuide10.html

35. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

36. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.