Responsive web design with HTML5 and CSS3 : build responsive and future-proof websites to meet the demands of modern web users /
Frain, Ben,
Responsive web design with HTML5 and CSS3 : build responsive and future-proof websites to meet the demands of modern web users / Build responsive and future-proof websites to meet the demands of modern web users Ben Frain. - Second edition. - xiii, 286 : illustrations ; 24 cm. - Community experience distilled . - Community experience distilled. .
Includes index.
Cover; Copyright; Credits; About the Author; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 1: The Essentials of Responsive Web Design; Beginning our quest; Defining responsive web design; Responsive web design in a nutshell; Setting browser support levels; A brief note on tooling and text editors; Our first responsive example; Our basic HTML file; Taming images; Enter media queries; Amending the example for a larger screen; The shortcomings of our example; Summary; Chapter 2: Media Queries -- Supporting Differing Viewports Why media queries are needed for a responsive web designBasic conditional logic in CSS; Media query syntax; Media queries in link tags; Combining media queries; Media queries with @import; Media queries in CSS; What can media queries test for?; Using media queries to alter a design; Any CSS can be wrapped in a media query; Media queries for HiDPI devices; Considerations for organizing and authoring media queries; Linking to different CSS files with media queries; The practicalities of separating media queries; Nesting media queries 'inline'; Combine media queries or write them where it suits? The viewport meta tagMedia Queries Level 4; Scripting media feature; Interaction media features; The hover media feature; Environment media features; Summary; Chapter 3: Fluid Layouts and Responsive Images; Converting a fixed pixel design to a fluid proportional layout; Why do we need Flexbox?; Inline block and whitespace; Floats; Table and table-cell; Introducing Flexbox; The bumpy path to Flexbox; Browser support for Flexbox; Leave prefixing to someone else; Getting flexy; Perfect vertically centered text; Offset items; Reverse the order of items How about if we want them laid out vertically instead?Column reverse; Different Flexbox layouts inside different media queries; Inline-flex; Flexbox alignment properties; The align-items property; The align-self property; Possible alignment values; The justify-content property; The flex property; Simple sticky footer; Changing source order; Wrapping up Flexbox; Responsive images; The intrinsic problem of responsive images; Simple resolution switching with srcset; Advanced switching with srcset and sizes; Did you say the browser 'might' pick one image over another? Art direction with the picture elementFacilitate new-fangled image formats; Summary; Chapter 4: HTML5 for Responsive Web Designs; HTML5 markup -- understood by all modern browsers; Starting an HTML5 page the right way; The doctype; The HTML tag and lang attribute; Specifying alternate languages; Character encoding; Easy-going HTML5; A sensible approach to HTML5 markup; All hail the mighty tag; New semantic elements in HTML5; The element; The element; The element; The element; The element; The and elements.
Available to OhioLINK libraries.
9781784398934 9781784398262 1784398268
Web sites--Design.
HTML (Document markup language)
Cascading style sheets.
Cascading style sheets -- Handbooks, manuals, etc.
HTML (Document markup language) -- Handbooks, manuals, etc.
Web site development -- Computer programs -- Handbooks, manuals, etc.
Web sites -- Design -- Handbooks, manuals, etc.
TK5105.888 / .F73 2015
006.7
Responsive web design with HTML5 and CSS3 : build responsive and future-proof websites to meet the demands of modern web users / Build responsive and future-proof websites to meet the demands of modern web users Ben Frain. - Second edition. - xiii, 286 : illustrations ; 24 cm. - Community experience distilled . - Community experience distilled. .
Includes index.
Cover; Copyright; Credits; About the Author; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 1: The Essentials of Responsive Web Design; Beginning our quest; Defining responsive web design; Responsive web design in a nutshell; Setting browser support levels; A brief note on tooling and text editors; Our first responsive example; Our basic HTML file; Taming images; Enter media queries; Amending the example for a larger screen; The shortcomings of our example; Summary; Chapter 2: Media Queries -- Supporting Differing Viewports Why media queries are needed for a responsive web designBasic conditional logic in CSS; Media query syntax; Media queries in link tags; Combining media queries; Media queries with @import; Media queries in CSS; What can media queries test for?; Using media queries to alter a design; Any CSS can be wrapped in a media query; Media queries for HiDPI devices; Considerations for organizing and authoring media queries; Linking to different CSS files with media queries; The practicalities of separating media queries; Nesting media queries 'inline'; Combine media queries or write them where it suits? The viewport meta tagMedia Queries Level 4; Scripting media feature; Interaction media features; The hover media feature; Environment media features; Summary; Chapter 3: Fluid Layouts and Responsive Images; Converting a fixed pixel design to a fluid proportional layout; Why do we need Flexbox?; Inline block and whitespace; Floats; Table and table-cell; Introducing Flexbox; The bumpy path to Flexbox; Browser support for Flexbox; Leave prefixing to someone else; Getting flexy; Perfect vertically centered text; Offset items; Reverse the order of items How about if we want them laid out vertically instead?Column reverse; Different Flexbox layouts inside different media queries; Inline-flex; Flexbox alignment properties; The align-items property; The align-self property; Possible alignment values; The justify-content property; The flex property; Simple sticky footer; Changing source order; Wrapping up Flexbox; Responsive images; The intrinsic problem of responsive images; Simple resolution switching with srcset; Advanced switching with srcset and sizes; Did you say the browser 'might' pick one image over another? Art direction with the picture elementFacilitate new-fangled image formats; Summary; Chapter 4: HTML5 for Responsive Web Designs; HTML5 markup -- understood by all modern browsers; Starting an HTML5 page the right way; The doctype; The HTML tag and lang attribute; Specifying alternate languages; Character encoding; Easy-going HTML5; A sensible approach to HTML5 markup; All hail the mighty tag; New semantic elements in HTML5; The element; The element; The element; The element; The element; The and elements.
Available to OhioLINK libraries.
9781784398934 9781784398262 1784398268
Web sites--Design.
HTML (Document markup language)
Cascading style sheets.
Cascading style sheets -- Handbooks, manuals, etc.
HTML (Document markup language) -- Handbooks, manuals, etc.
Web site development -- Computer programs -- Handbooks, manuals, etc.
Web sites -- Design -- Handbooks, manuals, etc.
TK5105.888 / .F73 2015
006.7