Designing metro style apps using css3
1 / 37

- PowerPoint PPT Presentation

  • Updated On :

PLAT-873T. Designing Metro style apps using CSS3. Christian Stockwell Program Manager, Internet Explorer Microsoft Corporation. Agenda. CSS Concepts Structuring your app Flowing content Create beautiful text-centric designs You’ll leave with examples of how to

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about '' - payton

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Designing metro style apps using css3 l.jpg


Designing Metro style apps using CSS3

Christian Stockwell

Program Manager, Internet Explorer

Microsoft Corporation

Agenda l.jpg

  • 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

Windows 8 l.jpg
Windows 8 apps.

Metro style apps

Desktop apps












Model Controller






Devices & Printing


& Data

Graphics & Media

System Services


Internet Explorer


Application Model

Windows Core OS Services


These features work identically in internet explorer 10 and metro style apps using html l.jpg
These features work identically in apps.Internet Explorer 10 and Metro style apps using HTML.

Magazine app l.jpg

demo apps.

Magazine app

An engaging Metro style reading experience built with CSS3 and HTML5

Slide7 l.jpg

CSS apps.concepts

Making your app great with css l.jpg
Making your app great with CSS apps.

Separate presentation from content, and…

Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText






Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText











Slide9 l.jpg

CSS3 apps.

Slide11 l.jpg

App structure with apps.CSS3

flexible box& CSS3 grid

Css3 flexible b ox l ayout l.jpg

demo apps.

CSS3 flexible box layout

Design a flexible collection with CSS 3 flexible box layout

Css 3 flexible box layout l.jpg
CSS 3 flexible box layout apps.

  • 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

Css 3 flexible box layout uses l.jpg
CSS 3 flexible box layout uses apps.

  • Build simple designs that partition space vertically or horizontally

  • Align related elements and distribute available space

  • Perfect for menus, lightweight collections, or simple designs

Css3 grid layout l.jpg

demo apps.

CSS3 grid layout

Design an adaptable app with

CSS3 grid layout

Css3 g rid layout l.jpg
CSS3 apps.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

Css3 grid layout uses l.jpg
CSS3 grid layout uses apps.

  • 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

Slide18 l.jpg

Flow content with apps.

CSS3 regions

Css3 regions l.jpg

demo apps.

CSS3 regions

Paginate HTML content using CSS3 regions to create adaptable page layouts

Css 3 regions l.jpg
CSS 3 Regions apps.

  • Define content sources

  • Define content containers

  • Dynamically flow content sources through content containers

  • flow-into

  • flow-from

  • msRegionUpdate

  • msRegionOverflow

  • msGetRegionContent()

Css 3 r egions uses l.jpg
CSS 3 apps.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

Slide22 l.jpg

Beautiful text layouts with apps.

positioned floats, CSS3 multiple columns and CSS3 hyphenation

Css3 text layouts l.jpg

demo apps.

CSS3 text layouts

Design elegant text layouts with multiple columns and hyphenation

Css3 multiple column layout l.jpg
CSS3 multiple column layout apps.

  • 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

Css3 hyphenation l.jpg
CSS3 hyphenation apps.

  • 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

Positioned floats l.jpg

demo apps.

Positioned floats

Create rich text flows with

positioned floats

Positioned floats27 l.jpg
Positioned floats apps.

  • 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

Slide28 l.jpg

Review apps.

Magazine app construction l.jpg

demo apps.

Magazine app construction

Bring it all back together

Css3 grid and css3 f lexible box to design elegant and flexible apps l.jpg
CSS3 Grid and CSS3 apps.flexible box to design elegant and flexible apps.

Positioned floats css3 multiple column and css3 hyphenation for beautiful text centric designs l.jpg
Positioned floats, CSS3 multiple column, and CSS3 hyphenation for beautiful text-centric designs.

Related sessions l.jpg
Related sessions hyphenation for beautiful text-centric designs.

  • [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

Further reading and documentation l.jpg
Further reading and documentation hyphenation for beautiful text-centric designs.

  • Internet Explorer Test Drive site

  • Internet Explorer Engineering Team Blog

  • W3C CSS Specifications and Drafts

  • What’s new in IE9

  • What’s new in IE10

Feedback and q uestions http forums dev windows com session f eedback http bldw in sessionfeedback l.jpg

t hyphenation for beautiful text-centric designs.hank you

Feedback and questions

Session feedback

Slide36 l.jpg

© hyphenation for beautiful text-centric designs.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.