MANNING Keith J. Grant FOREWORD BY Chris Coyier Box model and border-box sizing The box model refers to the composition of elements on a page. When you specify the height or width of an element, you’re setting the content size—any padding, border, and margin will be added to that. Width Height Content Padding Border Margin Applying box-sizing: border-box to an element changes the box model to a more pre- dictable behavior. Setting height or width will control the size of the entire element, including its padding and border. Width Height Content Padding Border Margin See chapter 3 for information on applying border-box sizing to the entire page, as well as other important concepts including: Centering content Creating columns of equal height Controlling spacing between elements CSS in Depth CSS in Depth KEITH J. GRANT MANNING SHELTER ISLAND For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: [email protected] ©2018 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development editor: Kristen Watterson 20 Baldwin Road Review editor: Aleksandar Dragosavljevic´ PO Box 761 Technical development editor: Robin Dewson Shelter Island, NY 11964 Project editor: Kevin Sullivan Copy editor: Frances Buran Proofreader: Elizabeth Martin Technical proofreader: Birnou Sébarte Typesetter: Dennis Dalinnik Cover designer: Marija Tudor ISBN: 9781617293450 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – EBM – 23 22 21 20 19 18 brief contents PART 1REVIEWING THE FUNDAMENTALS....................................1 1 ■ Cascade, specificity, and inheritance 3 2 ■ Working with relative units 28 3 ■ Mastering the box model 55 PART 2MASTERING LAYOUT....................................................85 4 ■ Making sense of floats 87 5 ■ Flexbox 116 6 ■ Grid layout 144 7 ■ Positioning and stacking contexts 177 8 ■ Responsive design 201 PART 3 CSS AT SCALE ...........................................................231 9 ■ Modular CSS 233 10 ■ Pattern libraries 253 v vi BRIEF CONTENTS PART 4ADVANCED TOPICS.....................................................277 11 ■ Backgrounds, shadows, and blend modes 279 12 ■ Contrast, color, and spacing 300 13 ■ Typography 329 14 ■ Transitions 353 15 ■ Transforms 370 16 ■ Animations 396 contents foreword xv preface xvii acknowledgments xix about this book xxi PART 1REVIEWING THE FUNDAMENTALS..........................1 Cascade, specificity, and inheritance 3 1 1.1 The cascade 4 Understanding stylesheet origin 8 ■ Understanding specificity 10 ■ Understanding source order 15 Two rules of thumb 17 1.2 Inheritance 18 1.3 Special values 20 Using the inherit keyword 21 ■ Using the initial keyword 22 1.4 Shorthand properties 23 Beware shorthands silently overriding other styles 23 Understanding the order of shorthand values 24 vii viii CONTENTS Working with relative units 28 2 2.1 The power of relative values 29 The struggle for pixel-perfect design 29 ■ The end of the pixel- perfect web 29 2.2 Ems and rems 31 Using ems to define font-size 32 ■ Using rems for font-size 36 2.3 Stop thinking in pixels 37 Setting a sane default font size 39 ■ Making the panel responsive 40 ■ Resizing a single component 41 2.4 Viewport-relative units 43 Using vw for font size 45 ■ Using calc() for font size 45 2.5 Unitless numbers and line-height 46 2.6 Custom properties (aka CSS variables) 48 Changing custom properties dynamically 50 ■ Changing custom properties with JavaScript 53 ■ Experimenting with custom properties 54 Mastering the box model 55 3 3.1 Difficulties with element width 56 Avoiding magic numbers 59 ■ Adjusting the box model 59 Using universal border-box sizing 61 ■ Adding a gutter between columns 62 3.2 Difficulties with element height 64 Controlling overflow behavior 64 ■ Applying alternatives to percentage-based heights 65 ■ Using min-height and max-height 70 ■ Vertically centering content 71 3.3 Negative margins 73 3.4 Collapsed margins 74 Collapsing between text 74 ■ Collapsing multiple margins 75 Collapsing outside a container 76 3.5 Spacing elements within a container 77 Considering changing content 79 ■ Creating a more general solution: the lobotomized owl selector 80 CONTENTS ix PART 2MASTERING LAYOUT..........................................85 Making sense of floats 87 4 4.1 The purpose of floats 88 4.2 Container collapsing and the clearfix 93 Understanding container collapsing 94 ■ Understanding the clearfix 96 4.3 Unexpected “float catching” 99 4.4 Media objects and block formatting contexts 102 Establishing a block formatting context 103 ■ Using a block formatting context for media object layouts 104 4.5 Grid systems 105 Understanding a grid system 106 ■ Building a grid system 107 Adding gutters 111 Flexbox 116 5 5.1 Flexbox principles 117 Building a basic flexbox menu 120 ■ Adding padding and spacing 123 5.2 Flex item sizes 124 Using the flex-basis property 126 ■ Using flex-grow 127 Using flex-shrink 128 ■ Some practical uses 129 5.3 Flex direction 130 Changing the flex direction 132 ■ Styling the login form 133 5.4 Alignment, spacing, and other details 135 Understanding flex container properties 135 ■ Understanding flex item properties 139 ■ Using alignment properties 140 5.5 A couple of things to be aware of 142 Flexbugs 142 ■ Full-page layout 142 Grid layout 144 6 6.1 Web layout is here 145 Building a basic grid 146 6.2 Anatomy of a grid 148 Numbering grid lines 153 ■ Working together with flexbox 155 6.3 Alternate syntaxes 158 Naming grid lines 158 ■ Naming grid areas 160 x CONTENTS 6.4 Explicit and implicit grid 162 Adding variety 166 ■ Adjusting grid items to fill the grid track 169 6.5 Feature queries 172 6.6 Alignment 175 Positioning and stacking contexts 177 7 7.1 Fixed positioning 178 Creating a modal dialog with fixed positioning 178 Controlling the size of positioned elements 182 7.2 Absolute positioning 182 Absolutely positioning the Close button 182 ■ Positioning a pseudo-element 183 7.3 Relative positioning 185 Creating a dropdown menu 186 ■ Creating a CSS triangle 188 7.4 Stacking contexts and z-index 190 Understanding the rendering process and stacking order 191 Manipulating stacking order with z-index 193 ■ Understanding stacking contexts 194 7.5 Sticky positioning 197 Responsive design 201 8 8.1 Mobile first 202 Creating a mobile menu 209 ■ Adding the viewport meta tag 213 8.2 Media queries 214 Understanding types of media query 215 ■ Adding breakpoints to the page 217 ■ Adding responsive columns 221 8.3 Fluid layouts 223 Adding styles for a large viewport 224 ■ Dealing with tables 226 8.4 Responsive images 227 Using multiple images for different viewport sizes 227 Using srcset to serve the correct image 228 CONTENTS xi PART 3CSS AT SCALE..................................................231 Modular CSS 233 9 9.1 Base styles: laying the groundwork 234 9.2 A simple module 235 Variations of a module 237 ■ Modules with multiple elements 241 9.3 Modules composed into larger structures 243 Dividing multiple responsibilities among modules 244 Naming modules 248 9.4 Utility classes 250 9.5 CSS methodologies 251 Pattern libraries 253 10 10.1 Introduction to KSS 254 Setting up KSS 255 ■ Writing KSS documentation 257 Documenting module variants 261 ■ Creating an overview page 264 ■ Documenting modules that require JavaScript 264 Organizing the pattern library into sections 266 10.2 Shifting the way you build CSS 269 Using a CSS First workflow 269 ■ Using a pattern library as an API 270 PART 4ADVANCED TOPICS...........................................277 Backgrounds, shadows,and blend modes 279 11 11.1 Gradients 280 Using multiple color stops 283 ■ Using radial gradients 285 11.2 Shadows 287 Defining depth with gradients and shadows 288 ■ Creating elements with a flat design 289 ■ Creating buttons with a more modern look 290 11.3 Blend modes 291 Tinting an image 294 ■ Understanding types of blend mode 295 ■ Adding texture to an image 296 Using mix blend modes 298 xii CONTENTS Contrast, color, and spacing 300 12 12.1 Contrast is king 302 Establishing patterns 303 ■ Implementing the design 304 12.2 Color 306 Understanding color notations 312 ■ Adding new colors to a palette 316 ■ Considering contrast for font colors 318 12.3 Spacing 320 Using ems vs. px 320 ■ Factoring in line height 323 Spacing inline elements 326 Typography 329 13 13.1 Web fonts 331 13.2 Google fonts 332 13.3 How @font-face works 336 Font formats and fallbacks 337 ■ Multiple