HTML5 and CSS3: Building Responsive Websites

Cover......Page 1
Copyright......Page 3
Preface......Page 6
Table of Contents......Page 12
Module 1: Responsive Web Design Beginner's Guide......Page 20
Chapter 1: Responsive Web Design......Page 22
Responsive web design in a nutshell......Page 23
A look into responsive frameworks......Page 27
Summary......Page 36
Choosing a code editor......Page 38
Managing project dependency with Bower......Page 50
Summary......Page 55
Chapter 3: Constructing a Simple Responsive Blog with Responsive.gs......Page 56
Responsive.gs components......Page 57
Using HTML5 elements for semantic markups......Page 59
Examining the blog's wireframe......Page 64
Organizing project directories and files......Page 66
The blog HTML structures......Page 71
Summary......Page 79
Chapter 4: Enhancing the Blog Appearance......Page 80
Using CSS3......Page 81
Working with Koala......Page 85
Composing the blog styles......Page 91
Optimize the blog for desktop......Page 107
Making Internet Explorer more capable with polyfills......Page 109
Summary......Page 112
Chapter 5: Developing a Portfolio Website 
with Bootstrap......Page 114
The Bootstrap components......Page 115
Digging into Bootstrap......Page 122
Examining the portfolio website layout......Page 123
Project directories, assets, and dependencies......Page 125
The portfolio website HTML structure......Page 136
Summary......Page 144
Chapter 6: Polishing the Responsive Portfolio Website with LESS......Page 146
Basic LESS syntax......Page 147
External style sheet references......Page 158
Working with Koala......Page 162
Polishing the portfolio website with LESS......Page 166
Improve and make the website functioning with JavaScript......Page 178
Summary......Page 181
Chapter 7: A Responsive Website for Business with Foundation......Page 182
Examining the website layout......Page 183
A look into Foundation......Page 187
Additional required assets......Page 194
The project directories, assets, and dependencies......Page 196
Summary......Page 206
Chapter 8: Extending Foundation......Page 208
Syntactically Awesome Style Sheets......Page 209
Project recap......Page 220
Style sheet organizations......Page 221
The website's look and feel......Page 226
Fine-tuning the website......Page 239
Summary......Page 244
Module 2: Responsive Web Design with HTML5 and CSS3......Page 246
Chapter 1: The Essentials of Responsive Web Design......Page 248
Defining responsive web design......Page 249
Setting browser support levels......Page 250
Our first responsive example......Page 252
Summary......Page 264
Chapter 2: Media Queries – Supporting Differing Viewports......Page 266
Why media queries are needed for a responsive web design......Page 267
Media query syntax......Page 268
Combining media queries......Page 270
Using media queries to alter a design......Page 273
Considerations for organizing and authoring media queries......Page 276
Combine media queries or write them where it suits?......Page 278
The viewport meta tag......Page 280
Media Queries Level 4......Page 282
Summary......Page 285
Chapter 3: Fluid Layouts and Responsive Images......Page 286
Converting a fixed pixel design to a fluid proportional layout......Page 287
Introducing Flexbox......Page 293
Getting Flexy......Page 296
Responsive images......Page 318
Summary......Page 323
Chapter 4: HTML5 for Responsive 
Web Designs......Page 324
HTML5 markup – understood by all modern browsers......Page 325
Starting an HTML5 page the right way......Page 326
Easy-going HTML5......Page 328
New semantic elements in HTML5......Page 330
HTML5 text-level semantics......Page 338
Obsolete HTML features......Page 339
Putting HTML5 elements to use......Page 340
WCAG and WAI-ARIA for more accessible web applications......Page 341
Embedding media in HTML5......Page 344
Responsive HTML5 video and iFrames......Page 346
A note about 'offline first'......Page 348
Summary......Page 349
Chapter 5: CSS3 – Selectors, Typography, Color Modes, and New Features......Page 350
Anatomy of a CSS rule......Page 351
Quick and useful CSS tricks......Page 352
Word wrapping......Page 355
Facilitating feature forks in CSS......Page 359
New CSS3 selectors and how to use them......Page 363
CSS3 structural pseudo-classes......Page 368
CSS custom properties and variables......Page 377
CSS Level 4 selectors......Page 378
Web typography......Page 380
New CSS3 color formats and alpha transparency......Page 384
Summary......Page 387
Chapter 6: Stunning Aesthetics 
with CSS3......Page 388
Text shadows with CSS3......Page 389
Box shadows......Page 391
Background gradients......Page 393
Repeating gradients......Page 398
Background gradient patterns......Page 399
Multiple background images......Page 401
High-resolution background images......Page 404
CSS filters......Page 405
A warning on CSS performance......Page 412
Summary......Page 414
Chapter 7: Using SVGs for Resolution Independence......Page 416
A brief history of SVG......Page 418
The graphic that is a document......Page 419
Creating SVGs with popular image editing packages and services......Page 423
Inserting SVGs into your web pages......Page 424
Inserting an SVG inline......Page 429
What you can do with each SVG 
insertion method (inline, object, background-image, and img)......Page 434
Extra SVG capabilities and oddities......Page 435
Animating SVG with JavaScript......Page 440
Using SVGs as filters......Page 443
A note on media queries inside SVGs......Page 446
Summary......Page 448
Chapter 8: Transitions, Transformations, and Animations......Page 450
What CSS3 transitions are and how we can use them......Page 451
CSS3 2D transforms......Page 457
CSS3 3D transformations......Page 465
Animating with CSS3......Page 472
Summary......Page 477
Chapter 9: Conquer Forms with 
HTML5 and CSS3......Page 478
HTML5 forms......Page 479
Understanding the component parts of HTML5 forms......Page 480
HTML5 input types......Page 486
How to polyfill non-supporting browsers......Page 497
Styling HTML5 forms with CSS3......Page 498
Summary......Page 504
Chapter 10: Approaching a Responsive Web Design......Page 506
Get designs in the browser as soon as possible......Page 507
View and use the design on real devices......Page 508
Embracing progressive enhancement......Page 509
Defining a browser support matrix......Page 510
Tiering the user experience......Page 511
Linking CSS breakpoints to JavaScript......Page 512
Avoid CSS frameworks in production......Page 514
Coding pragmatic solutions......Page 515
Use the simplest code possible......Page 517
Hiding, showing, and loading content across viewports......Page 518
Validators and linting tools......Page 519
Performance......Page 521
The next big things......Page 522
Summary......Page 523
Module 3: HTML5 and CSS3 Responsive Web Design Cookbook......Page 524
Introduction......Page 526
Resizing an image using percent width......Page 527
Responsive images using the cookie and JavaScript......Page 529
Making your video respond to your screen width......Page 532
Resizing an image using media queries......Page 534
Changing your navigation with media queries......Page 536
Making a CSS3 button glow for a loading element......Page 542
Introduction......Page 548
Creating fluid, responsive typography......Page 549
Making a text shadow with canvas......Page 550
Making an inner and outer shadow with canvas......Page 552
Rotating your text with canvas......Page 554
Rotating your text with CSS3......Page 555
Making 3D text with CSS3......Page 557
Adding texture to your text with text masking......Page 559
Styling alternating rows with the nth positional pseudo class......Page 560
Adding characters before and after pseudo elements......Page 562
Making a button with a relative font size......Page 563
Adding a shadow to your font......Page 565
Curving a corner with border radius......Page 567
Responsive layout with the min-width and max-width properties......Page 570
Controlling your layout with relative padding......Page 573
Adding a media query to your CSS......Page 576
Creating a responsive width layout with media queries......Page 580
Changing image sizes with media queries......Page 585
Hiding an element with media queries......Page 587
Making a smoothly transitioning responsive layout......Page 589
Introduction......Page 600
Using the Fluid 960 grid layout......Page 601
Using the Blueprint grid layout......Page 605
Fluid layout using the rule of thirds......Page 609
Trying Gumby, a responsive 960 grid......Page 614
The Bootstrap framework makes responsive layouts easy......Page 620
Introduction......Page 626
Using the Safari Developer Tools' User Agent switcher......Page 627
Masking your user agent in Chrome with a plugin......Page 630
Using browser resizing plugins......Page 633
Learning the viewport and its options......Page 634
 Adding tags for jQuery Mobile......Page 637
Adding a second page in jQuery Mobile......Page 640
Making a list element in jQuery Mobile......Page 643
Adding a mobile, native-looking button with jQuery Mobile......Page 650
Adding a mobile stylesheet for mobile browsers only using the media query......Page 656
Adding JavaScript for mobile browsers only......Page 658
Introduction......Page 660
Responsive testing using IE's Developer Tools......Page 661
Browser testing – using plugins......Page 664
Development environments – getting a free IDE......Page 670
Virtualization – downloading VirtualBox......Page 673
Getting a browser resizer for Chrome......Page 677
Writing "Hello World" unobtrusively......Page 682
Creating a glowing "submit" button with the event listener......Page 686
Making a button stand out when you hover over it......Page 690
Resizing an element with unobtrusive jQuery......Page 694
Masking a password with unobtrusive JavaScript......Page 698
Using an event listener to animate an image shadow......Page 700
Bibliography......Page 706
HTML5 and CSS3_Building Responsive Websites_Preface_SZ.pdf......Page 0
_GoBack......Page 8