Cargando…
Mastering PostCSS for Web Design.
Explore the power of PostCSS to write highly performing, modular, and modern CSS code for your web pagesAbout This Book Incorporate cutting-edge styles in your web pages with PostCSS Simplify the process of writing CSS to a great extent using PostCSS shortcuts, fallbacks, and pack plugins This in-de...
| Clasificación: | Libro Electrónico |
|---|---|
| Autor principal: | |
| Formato: | Electrónico eBook |
| Idioma: | Inglés |
| Publicado: |
Packt Publishing
2016.
|
| Temas: | |
| Acceso en línea: | Texto completo |
Tabla de Contenidos:
- Cover; Copyright; Credits; About the Author; About the Reviewer; www.PacktPub.com; Table of Contents; Preface; Chapter 1: Introducing PostCSS; Discovering the art of processing; Introducing PostCSS; Exploring the benefits of using PostCSS; Considering some of the pitfalls; Clearing up some misconceptions; Preparing for exercises in this book; Setting up a development environment; Installing PostCSS; Creating a simple example using PostCSS; Adding source map support; Creating minified style sheets; Altering to compile automatically; Linting code using plugins; Exploring how PostCSS works.
- Making the move from SASSSummary; Chapter 2: Creating Variables and Mixins; Introducing variables and mixins; Setting up SASS; Creating a hover effect example; Using LESS CSS as an alternative; Transitioning to using PostCSS; Adding variable support to PostCSS; Updating our hover effect demo; Taking it a step further; Setting the order of plugins; Creating mixins with PostCSS; Updating our hover effect demo; Comparing PostCSS to standard processors; Looping content with PostCSS; Iterating through @each statements; Switching to using PostCSS; Summary; Chapter 3: Nesting Rules.
- Introducing nestingNavigating through pages; Preparing our demo; Converting from existing processors; Transitioning to using PostCSS plugins; Converting our demo to PostCSS; Compiling our code; Exploring the pitfalls of nesting; Taking a better approach; Reconsidering our code; Updating our code; Making the switch to BEM; Creating simple message boxes; Compiling and linting our code; Installing BEM support; Exploring our changes in more detail; Fixing our errors; Summary; Chapter 4: Building Media Queries; Revisiting media queries; Exploring custom media queries in PostCSS.
- Beginning with plain CSSAltering our demo to use PostCSS; Making images responsive; Making an image responsive with PostCSS; Implementing responsive capabilities to images; Adding support for retina images; Taking the next steps; Exploring other media possibilities; Adding responsive text support; Optimizing media queries; Retrofitting support for older browsers; Moving away from responsive design; Taking things further with CSS4; Summary; Chapter 5: Managing Colors, Images, and Fonts; Adding color, fonts, and media to sites; Maintaining asset links; Automating links to assets.
- Managing fonts with PostCSSCreating image sprites; Demo
- creating a credit card icon bar; Working with SVG in PostCSS; Altering icon images using PostCSS; Exploring the results in more detail; Considering alternative options; Adding support for WebP images; Switching WebP images in and out; Viewing the differences in file sizes; Manipulating colors and color palettes; Displaying and mixing colors using palettes; Dissecting our demo in more detail; Creating color functions with PostCSS; Adjusting colors using functions; Dissecting our demo; Creating colors with PostCSS filters.