Cargando…
Mastering responsive web design with HTML5 and CSS3 : become a master in RWD with this practical and engaging guide /
Push your HTML and CSS skills to the limit and build professional grade, responsive websites About This Book Take your RWD skills to the next level with HTML5 and CSS3 best practices that will give you a solid foundation to build out from Harness the power of the CSS pre-processor Sass to speed up t...
| Clasificación: | Libro Electrónico |
|---|---|
| Autor principal: | |
| Formato: | Electrónico eBook |
| Idioma: | Inglés |
| Publicado: |
Birmingham, UK :
Packt Publishing,
2015.
|
| Colección: | Community experience distilled.
|
| Temas: | |
| Acceso en línea: | Texto completo (Requiere registro previo con correo institucional) |
Tabla de Contenidos:
- Cover ; Copyright; Credits; About the Author; Acknowledgment; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 1: Harness the Power of Sass for Responsive Web Design ; How does Sass work?; Installing Sass; Downloading the Ruby installer; Opening the command line; Installing the Sass gem; Using Sass; The basic concepts of Sass for RWD; Sass or SCSS; The Sass syntax; The SCSS syntax; Sass variables; Sass mixins; Sass arguments; How to use several arguments in the same mixin; Setting default values in multiple arguments; Nesting in Sass; Partial files (partials) in Sass.
- The Sass extend/inherit featureSass comments; Vendor prefixing; The order of vendor prefixing; Automating vendor prefixing; Using a third-party program to compile; The Prepros app; One compiler only; Sass mixins to house our media queries; Media queries mixin methods; Summary; Chapter 2: Marking Our Content with HTML5 ; The element; The element; The element; The element; The element; The element; The element; Using WAI-ARIA landmark roles to increase accessibility; WAI-ARIA landmark roles; The banner role; The navigation role.
- The main roleThe contentinfo role; The search role; The form role; The complementary role; Important meta tags to consider for RWD; The viewport meta tag; The X-UA-Compatible meta tag; The charset meta tag; A full HTML5 example page with ARIA roles and meta tags ; Output screenshots for desktop and mobile; Summary; Chapter 3: Mobile-first or Desktop-first? ; Create your designs in a desktop-first view, but implement them with mobile-first; Why create designs in a desktop-first view?; Why implement with mobile-first?; Sass mixins for the mobile-first and desktop-first media queries.
- The mobile-first mixin The desktop-first mixin ; Dealing with legacy browsers; How to use Respond.js for RWD; The days of an IE-specific style sheet are dead; Other benefits of not using an IE-specific style sheet; How to deal with high-density screens; Bitmaps or vectors for high-density screens?; Sometimes RWD is not necessarily the right solution; Retrofitting an old website with RWD; The base page; HTML; CSS/SCSS; Creating the _980gs.scss file; Retrofitting with AWD; Creating the styles.scss file; 980px to 768px (AWD); 768px to 640px (AWD); 640px to 480px (AWD); 480px to 320px (AWD).
- Retrofitting with RWDThe RWD magic formula ; The main container; The Header and Footer sections; The Nav section; The Content section; 980px to 768px (RWD); 768px to 640px (RWD); 640px to 480px (RWD); 480px to 320px (RWD); Summary; Chapter 4: CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD ; What is a grid?; CSS grids; The pros and cons of CSS grids for RWD; CSS frameworks; UI kits; The pros and cons of CSS frameworks for RWD; Creating a custom CSS grid; Doing the math; Adding the UTF-8 character set directive and a Credits section.