Mastering CSS

Final tidbit of advice: Audio Podcasts are terrific

Flexbox

HiDPI devices

Web fonts

Making the site responsive

Creating the navigation

CSS3

Modular CSS

Floats

The box model and block versus inline elements

Conclusion and links

JavaScript and jQuery

Creating and importing partial files with SASS

SASS nesting

Mixins

Variables

CSS preprocessors

The next steps

Wrapping Up

Summary

Flexbox homework assignment

Gulp

Autoprefixer

Vendor prefixes

Accessibility impact

Changing the display order of flex items

Using the flex-flow shorthand

Using align-content

Using flex-wrap

Using flex-wrap and align-content

Using the align-self Flexbox property

Using align-items

Building the product listing

Flexbox Part 2

Summary

Using automatic margins

Nesting Flexboxes

Using the justify-content property

More layout more positioning

Using the flex shorthand

Using flex-shrink

Using flex-basis

Using flex-grow

Understanding flex-grow flex-basis flex-shrink and flex

Browser shrinking

Changing the flex-direction

Turning on flexbox using display: flex

Removing float-related properties from the columns section

From floats to flexbox

Justify-content and align-items

Main axis and cross axis

Main size and cross size

Flex container and flex items

Flex terminology

Overview of the flexible box layout module

Flexbox Part 1

Summary

Using the W descriptor and sizes attribute of the srcset attribute

Browser support

Simplifying the srcset attribute

Testing the image set

Adding a set of images to srcset

What is srcset?

Source set attribute (srcset)

Using an inline SVG

You can't stop SVG's you can only hope to constrain them!

Adding the SVG as a regular ol' <img>

Adding the SVG file as a background image

Saving an Illustrator file as an SVG

Scalable Vector Graphic (SVG)

Serving the 2x image only to retina devices

Media query for device pixel ratio

Targeting the seaweed in the footer

Background images

Checking the image quality on a retina device

Sizing down the 2x image using CSS

Creating a retina size image (2x)

2x images

Workflow for HiDPI Devices

Summary

Styling icon fonts

Adding the icon font to our website

Downloading a free icon font from the ZURB Foundation

Building the footer

Icon fonts

Adding fonts to the site

Selecting fonts from Typekit

Adobe Typekit

Applying fonts in CSS

Finding Google Fonts

Google Web Fonts

Making it work in all browsers

@font-face: a little tricky business

Defining and applying new fonts in our CSS

Adding font files directly to the site

The @font-face property

Web Fonts

Summary

The anatomy of the viewport meta tag

Testing our responsive design on a mobile device

Viewport meta tag

Using jQuery to trigger the menu on a click

Hiding the menu

Adding the hamburger menu icon

Styling the mobile nav in its open state

Mobile menu

Solving the navigation problem

The mobile-first approach

Adding our three columns to the media query

Considering iPads and other tablet dimensions

Anatomy of a media query

Media queries

Shrinking images on the shark movies page

The shark image

The octopus crab and whale images

Flexible images

A fluid grid on the shark movies page

Changing padding to a percentage

Calculating percentage widths

Converting pixels to percentages

Fluid grids

Becoming Responsive

Summary

Adding box-shadow

Fixing the Z index issue

Finalizing the navigation

Additional info on animations

Vendor prefixes

Using the animation shorthand

animation-fill-mode

Animation delay iteration-count and fill-mode

CSS animations (part 2)

Vendor prefixes

Setting additional keyframes

Defining the animation name duration and timing function

CSS animations (part 1)

Hiding the drop-down menu using the off-screen hidden technique

Fixing the hover state

Styling the dropdown

Creating the basic HTML list

Building the drop-down menu

Using fixed positioning for the nav bar

Absolutely positioning the shark

Absolute positioning

nth-of-type pseudo class

nth-child pseudo class

The last child

The first child

Using pseudo classes

Using CSS to style the navigation

The semantic HTML for building a menu

Starting the navigation

Creating the Main Navigation and Drop-Down Menu

Summary

The CSS output of the ultimate gradient generator

Using the ultimate CSS gradient generator

Gradients

Styling the button

Positioning using CSS

Adding the HTML

Styling the call-to-action button

Adding vendor prefixes and :focus states

Using the rotate value

Using the translate function

Applying a scale to our button

Transforms

Vendor prefixes

Using the transition property

Creating a hover state

Transitions

Reality of the point system

The universal selector

The !important declaration

The weights of different selectors

Specificity rules

Positioning the button

Changing the border and font colors of the buttons

Changing the width of the buttons

Multiple classes

Building standard buttons

Different button types

Creating buttons with modular CSS

Creating Buttons with Modular Reusable CSS Classes and CSS3

Summary

Clearfix hack

The float method

Using overflow property with hidden value

Using the clear method

Solving the problems of floats

Collapsed containers

Targeting .column using a pseudo class

Floating columns

Centering an element

Creating a multicolumn layout

Using the clear property to solve basic problems with floats

The original purpose of floats

The Shark movies page

Float introduction–flowing text around images

Creating a Page Layout with Floats

Summary

BEM

Calculating the weight of selectors

Creating descendant selectors

Parent child and sibling elements

Descendant selectors

Should we use classes or IDs?

IDs

Classifying multiple elements

Classes

Renaming elements — classes and IDs

Using the console to find errors

Changing CSS inside the inspector

How to open developer tools

Chrome DevTools

Customizing the CSS reset

Examining the CSS reset

Loading Eric Meyer's CSS reset

CSS reset

Code suggestion

Syntax highlighting

Multiple cursors

Snippets

Text editors

Ramping Up

Summary

Block level elements versus inline elements

The box model

The box model and block versus inline elements

Inline style sheets

Embedded style sheets

External style sheets

Dissecting a rule set

The anatomy of a rule set and the three types of style sheets

CSS Foundations

Questions

Piracy

Errata

Downloading the color images of this book

Downloading the example code

Customer support

Reader feedback

Conventions

Who this book is for

What you need for this book

What this book covers

Preface

Customer Feedback

Why subscribe?

www.PacktPub.com

About the Author

Credits

Mastering CSS

Copyright

Title Page

coverpage

coverpage

Title Page

Copyright

Mastering CSS

Credits

About the Author

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

CSS Foundations

The anatomy of a rule set and the three types of style sheets

Dissecting a rule set

External style sheets

Embedded style sheets

Inline style sheets

The box model and block versus inline elements

The box model

Block level elements versus inline elements

Summary

Ramping Up

Text editors

Snippets

Multiple cursors

Syntax highlighting

Code suggestion

CSS reset

Loading Eric Meyer's CSS reset

Examining the CSS reset

Customizing the CSS reset

Chrome DevTools

How to open developer tools

Changing CSS inside the inspector

Using the console to find errors

Renaming elements — classes and IDs

Classes

Classifying multiple elements

IDs

Should we use classes or IDs?

Descendant selectors

Parent child and sibling elements

Creating descendant selectors

Calculating the weight of selectors

BEM

Summary

Creating a Page Layout with Floats

Float introduction–flowing text around images

The Shark movies page

The original purpose of floats

Using the clear property to solve basic problems with floats

Creating a multicolumn layout

Centering an element

Floating columns

Targeting .column using a pseudo class

Collapsed containers

Solving the problems of floats

Using the clear method

Using overflow property with hidden value

The float method

Clearfix hack

Summary

Creating Buttons with Modular Reusable CSS Classes and CSS3

Creating buttons with modular CSS

Different button types

Building standard buttons

Multiple classes

Changing the width of the buttons

Changing the border and font colors of the buttons

Positioning the button

Specificity rules

The weights of different selectors

The !important declaration

The universal selector

Reality of the point system

Transitions

Creating a hover state

Using the transition property

Vendor prefixes

Transforms

Applying a scale to our button

Using the translate function

Using the rotate value

Adding vendor prefixes and :focus states

Styling the call-to-action button

Adding the HTML

Positioning using CSS

Styling the button

Gradients

Using the ultimate CSS gradient generator

The CSS output of the ultimate gradient generator

Summary

Creating the Main Navigation and Drop-Down Menu

Starting the navigation

The semantic HTML for building a menu

Using CSS to style the navigation

Using pseudo classes

The first child

The last child

nth-child pseudo class

nth-of-type pseudo class

Absolute positioning

Absolutely positioning the shark

Using fixed positioning for the nav bar

Building the drop-down menu

Creating the basic HTML list

Styling the dropdown

Fixing the hover state

Hiding the drop-down menu using the off-screen hidden technique

CSS animations (part 1)

Defining the animation name duration and timing function

Setting additional keyframes

Vendor prefixes

CSS animations (part 2)

Animation delay iteration-count and fill-mode

animation-fill-mode

Using the animation shorthand

Vendor prefixes

Additional info on animations

Finalizing the navigation

Fixing the Z index issue

Adding box-shadow

Summary

Becoming Responsive

Fluid grids

Converting pixels to percentages

Calculating percentage widths

Changing padding to a percentage

A fluid grid on the shark movies page

Flexible images

The octopus crab and whale images

The shark image

Shrinking images on the shark movies page

Media queries

Anatomy of a media query

Considering iPads and other tablet dimensions

Adding our three columns to the media query

The mobile-first approach

Solving the navigation problem

Mobile menu

Styling the mobile nav in its open state

Adding the hamburger menu icon

Hiding the menu

Using jQuery to trigger the menu on a click

Viewport meta tag

Testing our responsive design on a mobile device

The anatomy of the viewport meta tag

Summary

Web Fonts

The @font-face property

Adding font files directly to the site

Defining and applying new fonts in our CSS

@font-face: a little tricky business

Making it work in all browsers

Google Web Fonts

Finding Google Fonts

Applying fonts in CSS

Adobe Typekit

Selecting fonts from Typekit

Adding fonts to the site

Icon fonts

Building the footer

Downloading a free icon font from the ZURB Foundation

Adding the icon font to our website

Styling icon fonts

Summary

Workflow for HiDPI Devices

2x images

Creating a retina size image (2x)

Sizing down the 2x image using CSS

Checking the image quality on a retina device

Background images

Targeting the seaweed in the footer

Media query for device pixel ratio

Serving the 2x image only to retina devices

Scalable Vector Graphic (SVG)

Saving an Illustrator file as an SVG

Adding the SVG file as a background image

Adding the SVG as a regular ol' <img>

You can't stop SVG's you can only hope to constrain them!

Using an inline SVG

Source set attribute (srcset)

What is srcset?

Adding a set of images to srcset

Testing the image set

Simplifying the srcset attribute

Browser support

Using the W descriptor and sizes attribute of the srcset attribute

Summary

Flexbox Part 1

Overview of the flexible box layout module

Flex terminology

Flex container and flex items

Main size and cross size

Main axis and cross axis

Justify-content and align-items

From floats to flexbox

Removing float-related properties from the columns section

Turning on flexbox using display: flex

Changing the flex-direction

Browser shrinking

Understanding flex-grow flex-basis flex-shrink and flex

Using flex-grow

Using flex-basis

Using flex-shrink

Using the flex shorthand

More layout more positioning

Using the justify-content property

Nesting Flexboxes

Using automatic margins

Summary

Flexbox Part 2

Building the product listing

Using align-items

Using the align-self Flexbox property

Using flex-wrap and align-content

Using flex-wrap

Using align-content

Using the flex-flow shorthand

Changing the display order of flex items

Accessibility impact

Vendor prefixes

Autoprefixer

Gulp

Flexbox homework assignment

Summary

Wrapping Up

The next steps

CSS preprocessors

Variables

Mixins

SASS nesting

Creating and importing partial files with SASS

JavaScript and jQuery

Conclusion and links

The box model and block versus inline elements

Floats

Modular CSS

CSS3

Creating the navigation

Making the site responsive

Web fonts

HiDPI devices

Flexbox

Final tidbit of advice: Audio Podcasts are terrific