Designing metro style apps using css3
Download
1 / 37

- PowerPoint PPT Presentation


  • 520 Views
  • 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

PLAT-873T

Designing Metro style apps using CSS3

Christian Stockwell

Program Manager, Internet Explorer

Microsoft Corporation


Agenda l.jpg
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



Windows 8 l.jpg
Windows 8 apps.

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


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

Block

Float

Inline

Inline

Inline

Text TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Block

(x,y)

Block

Absolute

Scroll

Visible

Hidden

Flow

Position

Overflow


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

    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


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 http://forums.dev.windows.com

Session feedbackhttp://bldw.in/SessionFeedback


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.


ad