Creating Adaptive Layouts with CSS Part II

2. Creating Adaptive Layouts with CSS Part II Leon Braginski Senior Program Manager Microsoft Corporation

3. Agenda Media Queries CSS3 Grid CSS3 Flexbox CSS3 Multi-column Recommendations Resources

4. Media Queries • Apply CSS rule based on output medium’s features, such as: • Width • Height • Orientation • Adapts application layout to: • initial state • runtime changes, such as resizing, orientation

5. Code: Media Queries <styletype="text/css"> @media (orientation: landscape) { body{background-color: Green} #landscape {display: block} #portrait {display: none} } @media (orientation: portrait) { body{background-color: Maroon} #landscape {display: none} #portrait {display: block} } </style> <divid="landscape">Detected mode: landscape</div> <divid="portrait"> Detected mode: portrait</div>

6. Demo Media Queries

7. CSS Grid Layout • Layout APIs • No extra HTML overhead, unlike tables • Fluid by nature • Elements of grid are sized and positioned on the grid • Provides fluid page layouts adapting to size changes • Can be easily combined with media queries or nested

8. Grid Overview 3 1 2 1 2 3

9. Code: Grid #mainContainer{ display: -ms-grid; -ms-grid-columns: 1fr6fr130px; } #banner { -ms-grid-column: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; } #toc { -ms-grid-column: 1; -ms-grid-row: 2; } #textArea { -ms-grid-column: 2; -ms-grid-row: 2; } #images { -ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-row-span: 2; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 2; -ms-grid-row: 3; } banner toc textArea Growth images footer Growth

10. Flexible Grid Sizing #mainContainer { display: -ms-grid; -ms-grid-columns: 1fr6fr130px; } toc textArea images Leftover space 130px 1 fraction 6 fractions

11. Demo Grid

12. CSS Flexbox Layout • CSS3 layout mode to control block layout • Children layout can be: • Horizontal • Vertical • Unused space be allocated to each child as needed • Support for grouping and children ordering • Nesting allows to build layouts in two dimensions

13. Filling Available Width <divid="playControl"> <button>Back</button> <button>Play</button> <button>Forward</button> </div> #playControl { display: -ms-box; -ms-box-orient: horizontal; -ms-box-align: middle; } button { -ms-box-flex: 1; }

14. Changing Control Alignment <divid="playControl"> <button>Back</button> <button>Play</button> <button>Forward</button> </div> #playControl { display: -ms-box; -ms-box-orient: horizontal; /* alignment perpendicular to the axis defined by the -ms-box-orient property) */ -ms-box-align: middle; /*excess space distribution along the axis defined by the -ms-box-orient property) */ -ms-box-pack: center; }

15. Altering Orientation @media all and (min-width: 300px) and (max-width: 400px) { #playControl { -ms-box-orient: vertical; /*excess space distribution along the axis defined by the -ms-box-orient property) */ -ms-box-pack: center; } }

16. Reordering Controls @media all and (max-width: 299px) { #playControl { -ms-box-orient: vertical; } #playButton { -ms-box-flex: 10; -ms-box-ordinal-group: 1; } #backButton { -ms-box-ordinal-group: 2; } #fwdButton { -ms-box-ordinal-group: 2; } }

17. Demo FLEXBOX

18. Multi-column Layout • Layout similar to newspaper • Content of block flows into multiple contiguous boxes • Automatic adjustment of number of columns • Options to refine the look and feel: • Width of columns • Spacing • Lines between columns and more

19. Multi-column Automatic Reflow

20. Code: Multi-column layout <styletype="text/css"> div { column-width: 12em; column-rule: thinsolidblack; column-gap: 2em; } </style> <div> <p> … </p> <pstyle="break-before: column;"> </p> <p> … </p> </div> 12em 2em 12em

21. Demo Multi-column

22. Recommendations • Download IE10 PP1 • http://ie.microsoft.com/testdrive/Info/Downloads/Default.html • Design web application layouts to adapt to: • Various resolutions • Various form factors • Various orientations • Take advantage of media queries to select device families • Use grid for high level page layout • Consider using flexbox, multi-column or nested grid for fluid block level management

23. Resources • Internet Explorer Test Drive • www.ietestdrive.com • MIX 2011 Presentation: • http://channel9.msdn.com/events/mix/mix11/htm11 • IE Engineering Team Blog: • http://blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx • CSS Media Queries • http://www.w3.org/TR/css3-mediaqueries/ • Flexible Box Layout Module • http://www.w3.org/TR/css3-flexbox/ • CSS Grid Alignment • http://dev.w3.org/csswg/css3-grid-align/ • CSS Multi-column Layout Module • http://www.w3.org/TR/css3-multicol/

24. © 2010 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.