Css For Windows 8 App Development (expert's Voice In Windows 8)

CSS for Windows 8 App Development is your learning guide for CSS – the language of great Windows 8-style apps. Learn the built-in styles that make the built-in controls shine, how to define them, and how to use CSS to give your custom app assets that beautiful Modern UI style. CSS (Cascading Style Sheets) is the clear standard for styling web applications, and with HTML, CSS, and JavaScript now powering apps on Windows 8, it’s the clear standard there as well. CSS is a powerful styling and layout language that greatly simplifies the selection of page elements and their visual display, layout, and animation. Additionally, Windows 8 apps appear on a large variety of screen formats, and CSS is the primary means for uniquely defining these layouts. Learn the language of great Windows 8-style apps Raise your knowledge of the CSS3 standard Use the styles built-in to Windows 8 style apps Apply CSS styles to your app What you’ll learn Master the use of powerful CSS selectors Learn new CSS3 functionality such as flex boxes, grids, animation, and transforms Control your styles from JavaScript for really powerful interactions See the styles implemented by built-in controls like ListView and override them Learn style rules that will help you implement good Windows 8 style See how to use LESS in your Windows 8-style app Who this book is for CSS for Windows 8 App Development is for software developers of all skill levels working with web applications. If you’re new, the foundational CSS examples will bring you up to speed quickly. If you’re more familiar with CSS, you’ll gain critical insight into its application in Windows 8 for creating a great Modern UI. Table of Contents Windows 8 Design Introduction to Windows 8 Development Selectors and Style Rules Text Properties Box Properties Transforms, Transitions, and Animation Properties Layout Properties Global Styles WinJS Control Styles Overriding and Defining Styles CSS Libraries and Resources Styling SVG Apress CSS for Windows 8 App Development 289 Contents at a Glance 3 Contents 292 About the Author 299 About the Technical Reviewer 300 Acknowledgments 301 Introduction 4 Chapter 1: Windows 8 Design 6 Windows Reimagined 6 Traits of Great Windows 8 App Design 8 Use Microsoft Design Style 9 Navigation 10 Three-tier navigation 10 Hub 10 Section 10 Detail 10 Flat navigation 11 Interactions 12 Layout 14 Be Fast and Fluid 16 Snap and Scale Beautifully 16 Use the Right Contracts 17 Invest in a Great Tile 17 Feel Connected and Alive 17 Roam to the Cloud 18 Follow the Design Principles 18 Microsoft Design Principles 18 Show Pride in Craftsmanship 19 Do More with Less 19 Be Fast and Fluid 19 Be Authentically Digital 20 Win as One 20 Design Scenario 20 Scope 21 Usage Scenarios 21 Summary 24 Chapter 2: Introduction to Windows 8 Development 25 Windows 8 Architecture 25 Tools 26 Visual Studio 2012 26 Project Templates 27 The Blank Template 27 Why Choose a Blank Project? 32 The Navigation Template 32 Why Choose a Navigation Project? 34 The Grid Template 34 Why Choose a Grid Project? 35 DOM Explorer 35 Debugging 37 Blend 38 Distributing Your App 42 Sideloading 42 Publishing to the Windows Store 44 Summary 45 Chapter 3: Selectors and Style Rules 46 Style Format and Location 47 Inline Styles 47 Embedded Style Sheets 48 External Style Sheets 48 Basic Style Rule Syntax 49 Selectors 51 Type Selectors 52 Class Selectors 54 ID Selectors 56 Attribute Selectors 57 Pseudo-class and Pseudo-element Selectors 59 :root 60 ::first-letter 60 :checked 61 ::before, ::after, and content 62 :required 62 ::-ms-expand 63 ::-ms-browse 63 Positional pseudo-classes 63 :target 65 :not( ) 65 Combinators 66 Descendent 66 Child 67 General sibling 67 Adjacent sibling 67 Selector Groups 67 Style Definition 68 Shorthand Properties 70 Property Values 71 Cascading Order, Specificity, and Scope 72 Cascading 72 Specificity 73 Scope 74 Media Queries 74 Summary 76 Chapter 4: Text Properties 77 Text 77 Color and opacity 77 Named Colors 78 Hex Colors 78 RGB Colors 79 HSL Colors 79 Opacity 79 Fonts and Text Styles 80 font-style 80 font-variant 80 font-weight 81 font-size 82 line-height 83 font-family 84 font shorthand property 85 text-transform 86 Text Decoration 86 font-face 87 Microsoft vendor specific text properties 88 Alignment and justification 88 Columns 90 column-width and column-count 93 column-gap and column-rule 94 column-fill 94 Samples of Multiple Columns 95 List Styles 97 Hyphenation 99 -ms-hyphens 99 -ms-hyphenate-limit-zone 100 -ms-hyphenate-limit-chars 101 -ms-hyphenate-limit-lines 102 Summary 103 Chapter 5: Box Properties 104 The Box Model 105 Sizing 105 Overflow 109 Visibility 112 Margin 112 Borders 116 Padding 117 Background 118 background-color 118 background-image 118 background-size 119 background-repeat 120 background-position 121 background-origin 122 background-clip 122 background-attachment 123 Gradients 124 Shadow 127 Summary 129 Chapter 6: Transforms, Transitions, and Animation Properties 130 Transforms 130 Transform functions 131 perspective 131 perspective-origin 131 backface-visibility 131 transform-origin 131 transform-style 131 transform 132 2D transform functions 132 rotate() 132 scale() 133 skew() 137 translate() 138 matrix() 139 3D transform functions 139 perspective() 140 rotate3d() 141 scale3d() 143 translate3d() 144 matrix3d() 145 Transitions 147 Animations 149 MSCSSMatrix Object 154 Summary 155 Chapter 7: Layout Properties 156 Legacy layout 156 Table layout 157 Display and Position 158 Display Properties 158 inline 158 block 159 inline-block 159 list-item 159 run-in 159 inline-table and table-* 159 -ms-flexbox and -ms-inline-flexbox 159 -ms-grid and -ms-inline-grid 159 Position Properties 159 static 160 absolute 160 relative 160 fixed 160 Floating 162 Modern Layout 162 Flexbox 162 Flexbox Properties 163 -ms-flex-direction 163 -ms-flex-align 163 -ms-flex-pack 163 -ms-flex-wrap 163 -ms-flex-flow 163 -ms-flex 163 -ms-flex-order 164 Using a Flexbox in a Windows 8 App 169 Grid 171 Using a Grid in a Windows 8 App 176 ViewBox and ListView 179 Scroll Control 185 Limits 185 Limit Properties 185 -ms-scroll-limit-x-min and -ms-scroll-limit-y-min 185 -ms-scroll-limit-x-max and -ms-scroll-limit-y-max 186 -ms-scroll-limit 186 Rails 186 Snap Points 186 Snap Point Properties 186 -ms-scroll-snap-points-x and -ms-scroll-snap-points-y 186 -ms-scroll-snap-type 187 -ms-scroll-snap-x and -ms-scroll-snap-y 187 Chaining 187 Summary 187 Chapter 8: Global Styles 189 Typography 189 Fonts 189 Type Styles 190 Snapped View 193 App bar 195 Settings Pane 201 Flyouts and Menus 205 Flyouts 205 Menus 208 High Contrast Mode 211 Summary 212 Chapter 9: WinJS Control Styles 213 HTML Controls 213 Button 214 File Upload Control 216 Text Input Controls 216 Radio Buttons 218 Checkboxes 218 Range 219 Select Box 220 Progress Indicator 220 WinJS Controls 221 Binding Template 222 DatePicker 222 TimePicker 223 Rating 224 ToggleSwitch 225 ListView 226 SemanticZoom 230 FlipView 232 ViewBox 235 HtmlControl 236 Page 237 Summary 238 Chapter 10: Overriding and Defining Styles 239 Locating Style Selectors 239 Overriding and Extending Styles 246 Overriding Styles 246 Extending Styles 248 Formatting the slider on a range input element 249 Changing the default icon in a rating control 249 Defining Styles 252 Featured items in a ListView 252 lst1011.html 254 lst1011.js 254 lst1011.css 255 Custom WinJS controls 255 AddressControl.js 257 lst1012.html 257 lst1012.css 257 lst1012.js 257 Summary 257 Appendix A: CSS Libraries and Resources 258 Book Code 258 codeSHOW 258 The World Wide Web Consortium 259 Microsoft Developer Network (MSDN) 259 CSS Tricks 259 Web Platform Docs 260 LESS 260 Variables 260 Mixins 261 Nested Rules 262 Functions and Operations 263 Setup 264 Other Online Galleries 264 Appendix B: Styling SVG 265 Introduction to the SVG Format 265 SVG Embedded in HTML 266 CSS Properties for SVG 267 Fill 268 Strokes 270 Markers 270 Filters 271 Masks 271 Pointer Events 271 Visibility 272 Applying What You’ve Learned 272 An SVG-Watermarked Background Image 272 Fancy SVG Tiles on the Hub 276 A Timeline Graphic Built Using SVG 278 Index 281

CSS for Windows 8 App Development is your learning guide for CSS – the language of great Windows 8-style apps. Learn the built-in styles that make the built-in controls shine, how to define them, and how to use CSS to give your custom app assets that beautiful Modern UI style.

CSS (Cascading Style Sheets) is the clear standard for styling web applications, and with HTML, CSS, and JavaScript now powering apps on Windows 8, it’s the clear standard there as well. CSS is a powerful styling and layout language that greatly simplifies the selection of page elements and their visual display, layout, and animation. Additionally, Windows 8 apps appear on a large variety of screen formats, and CSS is the primary means for uniquely defining these layouts.

• Learn the language of great Windows 8-style apps
• Raise your knowledge of the CSS3 standard
• Use the styles built-in to Windows 8 style apps
• Apply CSS styles to your app

What you’ll learn

• Master the use of powerful CSS selectors
• Learn new CSS3 functionality such as flex boxes, grids, animation, and transforms
• Control your styles from JavaScript for really powerful interactions
• See the styles implemented by built-in controls like ListView and override them
• Learn style rules that will help you implement good Windows 8 style
• See how to use LESS in your Windows 8-style app

Who this book is for

CSS for Windows 8 App Development is for software developers of all skill levels working with web applications. If you’re new, the foundational CSS examples will bring you up to speed quickly. If you’re more familiar with CSS, you’ll gain critical insight into its application in Windows 8 for creating a great Modern UI.

Table of Contents

1. Windows 8 Design
2. Introduction to Windows 8 Development
3. Selectors and Style Rules
4. Text Properties
5. Box Properties
6. Transforms, Transitions, and Animation Properties
7. Layout Properties
8. Global Styles
9. WinJSControl Styles
10. Overriding and Defining Styles
11. CSS Libraries and Resources
12. Styling SVG

CSS for Windows 8 App Development is your learning guide for CSS - the language of great Windows 8-style apps. Learn the built-in styles that make the built-in controls shine, how to define them, and how to use CSS to give your custom app assets that beautiful Modern UI style. CSS (Cascading Style Sheets) is the clear standard for styling web applications, and with HTML, CSS, and JavaScript now powering apps on Windows 8, it's the clear standard there as well. CSS is a powerful styling and layout language that greatly simplifies the selection of page elements and their visual display, layout, and animation. Additionally, Windows 8 apps appear on a large variety of screen formats, and CSS is the primary means for uniquely defining these layouts. Read more... Abstract: CSS for Windows 8 App Development is your learning guide for CSS - the language of great Windows 8-style apps. Learn the built-in styles that make the built-in controls shine, how to define them, and how to use CSS to give your custom app assets that beautiful Modern UI style. CSS (Cascading Style Sheets) is the clear standard for styling web applications, and with HTML, CSS, and JavaScript now powering apps on Windows 8, it's the clear standard there as well. CSS is a powerful styling and layout language that greatly simplifies the selection of page elements and their visual display, layout, and animation. Additionally, Windows 8 apps appear on a large variety of screen formats, and CSS is the primary means for uniquely defining these layouts