CSS in Depth

by Keith J. Grant

Overview

Summary

CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design.

Foreword by Chris Coyier, Cofounder of CodePen.

Dig even deeper into the secrets of CSS with our video course CSS in Depth in Motion, available exclusively at Manning.com (www.manning.com/livevideo/css-in-depth-​in-motion)!

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology

Some websites really pop. They look great, they're visually consistent, and they feel interactive and responsive. You can bet their developers knew CSS in depth. CSS specifies everything from the structural layout of page elements to their individual look and feel. True masters know the patterns of CSS development, the techniques to implement them, and the subtle touches that result in beautiful typography, fluid transitions, and balanced graphics. Join them!

About the Book

CSS in Depth exposes you to a world of CSS techniques that range from clever to mind-blowing. This instantly useful book is packed with creative examples and powerful best practices that will sharpen your technical skills and inspire your sense of design. You'll gain new insights into familiar features like floats and units, and experiment with emerging ideas like responsive design and pattern libraries. Bottom line: this book will make you a better web designer and your apps will look fantastic!

What's Inside

• Avoid common CSS pitfalls
• Master misunderstood concepts
• Use flexbox and grid layout
• Responsive designs for any device
• Code for reuse and maintainability

About the Reader

Written for web developers who know the basics of CSS and HTML.

About the Author

Keith J. Grant is a senior web developer who builds and maintains web applications and websites, including The New York Stock Exchange site.

Table of Contents

PART 1 - REVIEWING THE FUNDAMENTALS
1. Cascade, specificity, and inheritance
2. Working with relative units
3. Mastering the box model
PART 2 - MASTERING LAYOUT
4. Making sense of floats
5. Flexbox
6. Grid layout
7. Positioning and stacking contexts
8. Responsive design
PART 3 - CSS AT SCALE
9. Modular CSS
10. Pattern libraries
PART 4 - ADVANCED TOPICS
11. Backgrounds, shadows, and blend modes
12. Contrast, color, and spacing
13. Typography
14. Transitions
15. Transforms
16. Animations

Product Details

ISBN-13:	9781617293450
Publisher:	Manning
Publication date:	04/07/2018
Edition description:	1st Edition
Pages:	472
Product dimensions:	7.30(w) x 9.00(h) x 1.00(d)

About the Author

Keith J. Grant is a senior web developer who builds and maintains web applications and websites, including The New York Stock Exchange site.

Table of Contents

Foreword xv

Preface xvii

Acknotvledgments xix

About this book xxi

Part 1 Reviewing the fundamentals 1

1 Cascade, specificity, and inheritance 3

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

2 Working with relative units 28

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

3 Mastering the box model 55

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-heigkt 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

Part 2 Mastering Layout 85

4 Making sense of floats 87

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

5 Flexbox 116

5.1 Flexbox principles 117

Building a basic flexbox menu 120

Adding padding and spacing 123

5.2 Flex item sizes 124

Using the Jlex-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

6 Grid layout 144

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

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

7 Positioning and stacking contexts 177

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

8 Responsive design 201

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 srcsel to serve the correct image 228

Part 3 CSS at Scale 231

9 Modular CSS 233

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

10 Pattern libraries 253

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 4 Advanced Topics 277

11 Backgrounds, shadows, and blend modes 279

11.1 Gradients 280

Using multiple color slops 283

Using radial gradients 285

11.2 Shadows 287

Defining depth with gradients and shadows 288

Creating elements with a fiat design 289

Creating buttons with a more modem 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

12 Contrast, color, and spacing 300

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

13 Typography 329

13.1 Web fonts 331

13.2 Google fonts 332

13.3 How @font-face works 336

Font formats and fallbacks 337

Multiple variants of the same typeface 338

13.4 Adjusting space for readability 339

Body copy spacing 340

Headings, small elements, and spacing 342

13.5 The dreaded FOUT and FOIT 346

Using Font Face Observer 348

Falling back to system fonts 349

Getting ready for font-display 351

14 Transitions 353

14.1 From here to there 354

14.2 Timing functions 356

Understanding Bézier curves 357

Steps 360

14.3 Non-animatable properties 361

Properties that cannot be animated 364

Fading in and out 365

14.4 Transitioning to auto height 367

15 Transforms 370

15.1 Rotate, translate, scale, and skew 371

Changing the transform origin 374

Applying multiple transforms 375

15.2 Transforms in motion 375

Scaling up the icon 381

Creating "fly in" labels 383

Staggering the transitions 386

15.3 Animation performance 387

Looking at the rendering pipeline 387

15.4 Three-dimensional (3D) transforms 389

Controlling perspective 390

Implementing advanced 3D transforms 393

16 Animations 396

16.1 Keyframes 397

16.2 Animating 3D transforms 400

Building the lay out without animations 400

Adding animation to the layout 405

16.3 Animation delay and fill mode 407

16.4 Conveying meaning through animation 409

Responding to user interaction 409

Drawing the user's attention 413

16.5 One final piece of advice 416

Appendix A Selectors reference 417

Appendix B Preprocessors 422

Index 435