Advanced CSS & Sass w/ Jonas Schmedtmann

01 Getting Started

VS Code & Chrome

support files

02 Natours Project - Setup and First Steps

006 Building the Header Part 1

polygon(top-left, top-right, bottom-right, bottom-left)

polygon(x y, x y, x y, x y)

polygon(0 0, 100% 0, 100% 100%, 0 100%)

clip path generator

007 Building the Header Part 2

To fix the position to the box's center rather than the top left corner transform: translate(-50%, -50%)

008 Creating CSS Animations

009 Building a Complex Animated Button

010 Building a Complex Animated Button part 2

Completed Heading of Natours

03 How CSS Works: A Look Behind the Scenes

012 Three Pillars of Writing Good HTML and CSS (never forget them)

013 How CSS Works Behind the Scenes: An Overview

What Happens to CSS When We Load Up a Webpage?

014 How CSS is Parsed. Part 1: The Cascade and Specificity

CSS Rule Basics

There is a Selector and Declaration Block. Inside the Declaration Block each Declaration consists of a Property and Declared Value.

The Cascade

Process of combining different stylesheets and resolving conflicts between different CSS rules and declarations when more than one rule applies to a certain element.

For example there is 'author CSS' which we write as a developer. But then there is 'user CSS' which can be set in a browser. A user may set a particular default font-size or scale the whole page.

And finally there is the browser CSS or 'user-agent CSS' which is set. For example default margins and padding set in the browser.

Cascade: Importance > Specificity > Source Order

  1. Importance
    1. User !important declarations
    2. Author !important declarations
    3. Author declarations
    4. User declarations
    5. Default browser declarations
  2. Specificity of Selectors
    1. Inline styles
    2. IDs
    3. Classes, pseudo-classes, attribute
    4. Elements, pseudo-elements
    • Specificity calc count (Inline, ID, Class, Elem)
    • div.top nav#nav .first (0, 1, 2, 2)
  3. Source Order – the last declaration in the code will override all other declarations and will be applied.

Cascade & Specificity: What to Remember

015 Specificity in Practice

016 How CSS is Parsed, Part 2: Value Processing

How CSS Values are Processed

width (paragraph) padding (paragraph) font-size (root) font-size (section) font-size (paragraph)
1. Declared value (author declarations) 140px 66% 1.5rem
2. Cascaded value (after the cascade) 66% 16px (Browser default) 1.5rem
3. Specified value (defaulting, if there is no cascaded value) 66% 0px (initial value) 16px 1.5rem 24px (inherited from section)
4. Computeed value (converting relative values to absolute) 66% 0px 16px 24px (1.5 * 16px) 24px
5. Used value (final calculations, based on layout) 184.8px (66% of 280px) 0px 16px 24px 24px
6. Actual value (browser and device restrictions) 185px 0px 16px 24px 24px

How Units are Converted from Relative to Absolute (px)

Example (x) How to convert to pixels Results in pixels
% (fonts) 150% x% * parent's computed font-size 24px (16px * 1.5)
% (lengths) (height, padding, margin, etc...) 10% (header child padding) x% * parent's computed width 100px (1000px * .1)
em (font) (uses parent element as reference) 3em (header child font-size) x% * parentcomputed font-size 72px (24px * 3)
em (lengths) (uses parent element as reference) 2em (header padding) x% * current elementcomputed font-size 48px (24px * 2)
rem (uses root as the reference) 10rem x% * rootcomputed font-size 160px (16px * 10)
vh (viewport height) 90vh x * 1% viewport height 90% of the current viewport height
vw (viewport width) 80vw x * 1% viewport width 80% of the current viewport width

CSS Value Processing: What you need to Remember

017 How CSS is Parsed Part 3: Inheritance

Inheritance in CSS

Inheritance is a way of propagating property values from parent elements to their children. Some properties can be inherited and others cannot.

Inheritance summary

018 Converting px to rem an effective workflow

But it's actually bad practice to hard code the default font-size in our CSS. This is because it affects acessibility and particular user-agent settings are overridden by the author set default. So instead of 10px, we assume the default browser font-size: 16px and then downscale that default. In our case, we set font-size: 62.5% which reduces 16px to 10px.

updated natours project with responsive units

019 How CSS Renders a Website: The Visual Formatting Model

Visual Formatting Model

Algorithm that calculates boxes and determines the layout of these boxes for each element in the render tree in order to determine the final layout of the page.

The Box Model

Box Types: Inline, Block, and Inline-Block

Positioning Schemes: Normal Flow, Absolute Postioning, and Floats

Stacking Contexts

020 CSS Architecture, Components, and BEM

The Think – Build – Architect Mindset

021 Implementing BEM in the Natour Project

Changing the class names in both the HTML and CSS to follow the BEM method. There are three blocks defined at this point:

natours with BEM updates

04 Introduction to NPM and SASS

023 What is Sass?

Sass is a CSS preprocessor, an extension of CSS that adds power and elegance to the basic language.

Main Sass Features

Sass syntax vs. SCSS syntax

024 First Steps with Sass: Variables and Nesting

025 SASS: Mixins, Extends and Functions

Mixins

Extends

Code Pen example reworked into local Sass with flex (no floats)

026 Brief intro to Command Line

027 NPM Packages: Installing Sass Locally

Node JS

Allows developers to write and run JS applications on the server-side. Developers started using node.js to also write tools to help them with local web development.

NPM

NPM is a simple command line interface that allows developers to install and manage packages on their local computers (or the server running node.js). There are all kinds of open-source tools, libraries and frameworks needed for modern development. Modern web development could simply not exist without a package manager.

Install Node.JS

028 NPM Scripts: Writing and Compiling SASS locally

First SASS file and SASS to CSS compile script

Natours with Sass Basics updates

029 Installing global packages:Live server example

05 Natours Project Advanced CSS and Sass

031 Converting Our CSS Code to Sass Variables and Nesting

Variables

Nesting

032 Implementing 7-1 CSS Architecture with Sass

Base Folder and files

Creating four 'partial' files inside our base folder:

Abstracts folder and files

Contains code that is not going to output CSS:

Components Folder

Will contain files for each component that we create. Remember a component are reusable building blocks, usable anywhere on the page. For example: buttons, alerts, forms, list groups, and more

Layout folder

Will contain files for each piece of page layout. For example: header, footer, hero, and more.

Pages folder

Contains page specific styling css. For now starting with just the one:

Themes folder

If there is theming for the site/application styling files go here.

Vendor folder

For external css included with your project such as Bootstrap or an icon library like font-awesome.

These will be all imported into the main.scss file. And all the different pieces of css are moved to the appropriate partial files.

Natours with 7-1 Sass setup

033 Principles of Responsive Design and Layout Types

Fluid Grids and Layouts

Allows content to easily adapt to the current viewport width used to browse teh website. Uses % rather than px for all layout related lengths.

Flexible/Responsive Images

Images behave differently than text content, so we need to ensure that they adapt to the current viewport.

Media Queries

Allow the changing of styles for certain viewport widths (breakpoints), for which different layouts are created for different widths of the site.

034 Building a Fluid Grid with Floats

Topics

Natours v6 with Grid System index and grid

035 Building the About System part 1

Topics

036 Building the About part 2

037 Building the About part 3

Natours v7 with About Section

038 Building the Features Section

Topics

Natours v8 with features section

039 Natours Tours Section - Part 1

Topics

040 Natours Tours Section Part 2

041 Natours Tours Section Part 3

Natours v9 with tours section

042 Natours Stories Section Part 1

Topics

042 Natours Project story section part 2

043 Natours Project story section part 3

Natours v10 with stories section

045 Natours Project Booking Section Part 1

Topics

046 Natours Booking Section Part 2

047 Natours Project Booking section part 3

Natours Project v11 with Booking Section

048 Natours Project Footer

Topics

Natours project v12 with footer

049 Natours Project Navigation Part 1

Topics

050 Natours Project Navigation Part 2

051 Natours Project Navigation Part 3

Natours Project v13 with Navigation

052 Natours Project Pure CSS popup Part 1

Topics