Advanced CSS & Sass w/ Jonas Schmedtmann

006 Building the Header Part 1

• The best way to perform a basic reset using the universal selector
• How to set project-wide font definitions
• How to clip parts of elements using clip-path

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

• The easiest way to center anything with the transform, top, and left properties.

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

008 Creating CSS Animations

• How to create CSS animations using @keyframes and the animation properties.
• Animation jigger bugfix with backface-visibility: hidden

009 Building a Complex Animated Button

• What pseudo-elements and pseudo-classes are;
• How and why to use the ::after pseudo-element;
• How to create a creative hover animation effect using the transition property.

010 Building a Complex Animated Button part 2

Completed Heading of Natours

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

• Responsive Design
  • fluid layouts
  • media queries
  • responsive images
  • correct units
  • desktop-first vs. mobile-first
• Maintainable and scalable code
  • Clean
  • Easy-to-understand
  • Growth
  • Reusable
  • How to organize files
  • How to name classes
  • How to structure HTML
• Web Performance
  • Fewer HTTP requests
  • Less code
  • Compress code
  • Use a CSS preprocessor
  • Fewer images
  • Compress images

013 How CSS Works Behind the Scenes: An Overview

What Happens to CSS When We Load Up a Webpage?

• Load HTML
  • Parse HTML
    • Build the Document Object Model (DOM)
    • Load CSS
      • Parse CSS - Resolve conflicting CSS Declarations (cascade)
      • Parse CSS - Process final CSS values (for example converting percentage units to pixels)
      • Build CSS Object Model (CSSOM)
• Render Tree formed from DOM & CSSOM
• Website rendering: the Visual Formatting Model (this deals with floats, positioning, etc...)
• Final rendered website

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

• CSS declarations marked with !important have the highest priority
• But, only use !important as a last resort. It's better to use correct specificities – this makes for better maintainable code.
• Inline styles written in your HTML will always have priority over styles in external stylesheets.
• A selector that contains 1 ID is more specific than one with 1000 classes.
• A selector that cotains 1 class is more specific than one with 1000 elements.
• The universal selector * has specificity value (0, 0, 0, 0)
• Rely more on specificity rather than on the order of selectors.
• But, rely on order when using 3rd-party stylesheets – always put your author stylesheet last

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

• Each property has an initial value, used if nothing is declared 9and if there is no inheritance – see next lecture);
• Browsers specify a root font-size for each page (usually 16px);
• Percentages and relative values are always converted to pixels;
• Percentages are measureed relative to their parent's font-size, if used to specify font-size;
• Percentages are measured relative to their parent's width, if used to specify lengths;
• em are measured relative to their parent font-size, ifused to specify lengths;
• em are measured relative to the current font-size, if used to specify lengths;
• rem are always measured realtive to the document's root font-size;
• vh and vw are simply percentage measurements of the viewport's height and width respectively.

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.

• Every CSS property must have a value
• Is there a cascaded value?
  • Yes! Specified value = Cascaded value
  • No! Then next ask is the property inherited? (this is specific to each property in question)
    • Yes! Specified value = Computed value of the parent element
    • For example the line-height of the child element is 150% of the parent element font-size not the child element. So in this case the child elment line-height will be 150% of the parent 20px value, not based on it's own 25px value.
    • No! Specified value = Initial value (specific to each property)

Inheritance summary

• Inheritance passes the values for some specific properties from parents to children – more maintainable code;
• Properties related to text are inherite: font-family, font-size, color, etc;
• Properties like margin, padding are not inherited.
• The computed value of a property is what gets inherited, not the declared value.
• Inheritance of a property only works if no one declares a value for that property;
• The inherit keyword forces inheritance on a certain propoerty;
• The initial keyword resets a property to its initial value.

018 Converting px to rem an effective workflow

• Select the root of the document with html selector and set the font-size: 10px;
• This allows all rem units to be a tenth of the pixel value.
• For example: 16px converts to 1.6rem units.

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.

• Note the use of the inherit keyword in the universal selector * { box-sizing: inherit;} and then also setting body { box-sizing: border-box;}.
• Adjust the universal selector a bit more by adding the *::before, *::after selectors to ensure all pseudo elements are reset as well.

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.

• Dimensions of boxes: the box model;
• Box type: inline, block and inline-block
• Positioning scheme: floats and positioning
• Stacking contexts: z-index values;
• Other elements in the render tree;
• Viewport size, dimensions of images, etc.

The Box Model

• Content: text, images, etc.
• Padding: transparent area around the content, inside the box;
• Border: goes around the padding and the content;
• Margin: space between boxes;
• Fill area: area that gets filled with background color or a background image. background-clip is a property which allows you to affect which parts inside the box the background fills.

Box Types: Inline, Block, and Inline-Block

• Block
  • Elements formatted visually as blocks
  • 100% of parent's width
  • Vertically, one after another
  • Box-model applies as shown: margin, border, padding, content
  • display: block, display: flex, display: list-item, and display: table;
• Inline
  • Content is distributed in lines
  • Occupies only the content's space
  • No line-breaks
  • No heights and widths
  • Paddings and margins only horizontal (left and right)
  • display: inline
• Inline-Block
  • A mix of block and inline
  • Occupies only the content's space
  • No line-breaks
  • Box-model applies as shown: margin, border, padding, content
  • display: inline-block

Positioning Schemes: Normal Flow, Absolute Postioning, and Floats

• Normal flow
  • Default positioning scheme;
  • not floated;
  • not absolutely positioned;
  • elements laid out according to their source order
  • position: relative
• Floats
  • element is removed from the normal flow;
  • text and inline elements will wrap around the floated element;
  • The container will not adjust its height to the element;
  • float: left and float: right
• Absolute positioning
  • Element is removed from the normal flow;
  • No impact on surrounding content or elements;
  • We use top, bottom, left, and right to offset the element from its relatively postioned container.
  • position: absolute and position: fixed

Stacking Contexts

• z-index
• opacity, filter, transform, and other properties can create stacking contexts

020 CSS Architecture, Components, and BEM

The Think – Build – Architect Mindset

• Think about the layout of your webpage or web app before writing code;
  • Component-Driven Design
  • Modular building blocks that make up interfaces;
  • Held together by the layout of the page;
  • Re-usable across a project, and between differnt projects;
  • Independent, allowing us to use them anywhere on the page. (Not dependent on their parent elements.
• Build your layout in HTML and CSS with a consistent structure for naming classes;
  • BEM
  • Block Element Modifier
  • 
  • 
  • BLOCK: standalone component that is meaningful on its own;
  • ELEMENT: part of a block that has no standalone meaning;
  • MODIFIER: a different version of a block or an element.
• Create a logical architecture for your CSS with files and folders.
  • The 7-1 Pattern
  • 7 differnt folders for partial Sass files, and
    • base/
    • components/
    • layout/
    • pages/
    • themes/
    • abstracts/
    • vendors/
  • 1 main Sass file to import all other files into a compiled CSS stylesheet

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:

• header
  • header__logo-box
  • header__logo
  • header__text-box
• heading-primary
  • heading-primary--main
  • heading-primary--sub
• btn
  • btn--white
  • btn--animated

natours with BEM updates

023 What is Sass?

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

• SASS Source Code
• ---> Sass compiler
• Compiled CSS Code

Main Sass Features

• Variables: for reusable values such as colors, font-sizes, spacing, etc;
• Nesting: to nest selectors inside of one another, allowing us to write less code;
• Operators: for mathematical operations right inside of CSS;
• Partials and imports: to write CSS in different files and importing them all into one single file;
• Mixins: to write reusable pieces of CSS code;
• Functions: similar to mixins, with the difference that they produce a value that can be used;
• Extends: to make different selectors inherit declarations that are common to all of them;
• Control directives: for writing complex code using conditionals and loops (not covered in this course).

Sass syntax vs. SCSS syntax

024 First Steps with Sass: Variables and Nesting

• $color-primary: #34f892; variable declarations which can later be used as values. For example: background-color: $color-primary
• Nesting selectors to descend select and the use of the &:hover to select pseudo classes of the parent selector

025 SASS: Mixins, Extends and Functions

Mixins

• @mixin name-of-mixin { your css } allows you to group a number of CSS properties and values into a single function. You then can call the mixin function within a CSS declaration with @include name-of-mixin
• mixins allow for arguments to be passed. @mixin name-of-mixin($arg1, $arg2){ css with $arg1 and $arg2}. Call the mixin and pass your arguments @include name-of-mixin($color1, $color2)
• custom functions follow similarly to javascript function declarations
  @function func-name($arg1, $arg2) {
@return something with $arg1 and $arg2
}

Extends

• The extend causes multiple selectors to use a common declaration. This is different from a mixin where a declaration is placed in different selectors. %extend-name { css declaration } creates the extend. @extend %extend-name is placed within a CSS declaration. The selector will then be added to the group of selectors (comma separated) that will use the extend declaration.

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

026 Brief intro to Command Line

• cd [directory name] change directory
• ls list directory contents
• .. up one directory level
• mkdir [directory name] make directory
• rmdir [directory name] delete empty directory
• rm -r [directory name] delete directory and all of its contents
• touch [filename] create file
• rm [filename] delete file
• cp [filename or directory name] [directory location] copies a file or directory to another specified directory
• mv [filename or directory name] [directory location] moves a file or directory to another specified directory
• ^C (control + c) stop a process running in the terminal.
• sudo prefix to a terminal command for a process that requires permission. Will prompt for the admin password.

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

• node -v in the terminal you can check the version of node.js installed
• npm init in the terminal create a package.json file which will document the description of the application as well as all the packages installed.
• npm install node-sass --save-dev in the terminal install the node sass compiler and save the record of it in the package.json file. --save-dev is specific for development dependencies (development helper tools) to be saved not deployed. Where as --save should be used with dependencies that need to be deployed (for example jquery).
• package.json file is updated with the names of installed devDependencies and dependencies.
• package-lock.json is created (npm vsersion 5.x.x and higher) which lists all the package dependencies that are required for the package installed to run.
• node_modules directory is created and all the packages and their files are organized and installed inside.
• npm install is the terminal command used to install all packages when there is no node_modules directory with all package files. When called in the terminal, the package.json file is read – dependences are determined, downloaded, and populated into the node_modules directory. Allows for the sharing of the application without also sharing the hundreds of package files as well. Much easier for them to simply be reinstalled.
• npm uninstall package-name --save this terminal command removes an install pacage and removes its reference from the package.json file

028 NPM Scripts: Writing and Compiling SASS locally

First SASS file and SASS to CSS compile script

• create a sass directory and create a main.scss file inside. Good practice to use the terminal to do this.
• cut/paste all CSS from the style.css file to the main.scss file.
• create variables for the three greens in your main.scss file.
• create a script in your package.json file. Calls the npm-sass package compiler. Looks something like this: "compile:sass": "node-sass sass/main.scss css/style.css" Names the script and passes the package to call, followed by the location of the sass file and finally the location of the css file to be compiled.
• npm run compile:sass is called in the terminal to run our compiler
• add the -w watch flag to our script and re-run the compiler. Now every saved changed to our main.scss file will call for the recompiling of our style.css file.

Natours with Sass Basics updates

029 Installing global packages:Live server example

• npm install live-server -g the "g" flag added to this terminal commmand causes the package to be installed globally.
• We don't need to actually install live-server from the command line if you have it installed as an extension in visual studio code.

031 Converting Our CSS Code to Sass Variables and Nesting

Variables

• finish converting any remaining color values to variables.

Nesting

• With BEM CSS naming, we can take advantage of nesting options in Sass. header__logo-box can become the nested selector &__logo-box with its declaration within the .header selector's declaration;
• You can do the same with the .btn class. Though the video doesn't recommend it, try creating an extend %btn to add to the &:link and &:visted nested declarations with @extend %btn.

032 Implementing 7-1 CSS Architecture with Sass

Base Folder and files

Creating four 'partial' files inside our base folder:

• _base.scss for low level basics included: resets, styles for the html and body element selectors.
• _animations.css
• _typography.scss
• _utilities.scss

Abstracts folder and files

Contains code that is not going to output CSS:

• _variables.scss
• _mixins.scss
• _functions.scss

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

• _button.scss

Layout folder

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

• _header.scss

Pages folder

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

• _home.scss

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.

• Float Layouts
• Flexbox
• CSS Grid

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

• How to architect and build a simple grid system;
• How the attribute selector works;
• How the :not pseudo-class works;
• How calc() works, and what's the difference between calc() and simple Sass operations.

• width: calc((100% - #{$gutter-horizontal})/2) when using the calc() function in Sass with a Sass variable, it must be wrapped in #{} syntax.
• [class^="col-"] selector is used to select all of our columns with a common attribute prefix selector.

Natours v6 with Grid System index and grid

035 Building the About System part 1

Topics

• Thinking about components;
• How and why to use utility classes;
  • .u-center-text a specific class for simply centering a block of text.
  • .u-margin-bottom-8 a class for adding an 8rem margin at the bottom.
• How to use the background-clip property;
• How to transform multiple properties simultaneously
• How to use the outline-offset property together with outline;
• How to style elements that are NOT hovered while others are. Clever descending selector .composition:hover .composition__photo:not(:hover) Where .composition is the parent div and .composition_photo is the img child which is descend selected.

036 Building the About part 2

037 Building the About part 3

Natours v7 with About Section

038 Building the Features Section

Topics

• Including and using an icon font;
  • Download the complete set of icons from linea.io
  • Using the /_basic/_ICONFONT/fonts and /_basic/_ICONFONT/styles.css
• An alternative way to create a "skewed section" design; Uses the transform: skewY(-5deg) property and value. But the children of the .feature-box are also skewed. So using a direct descendant selector this can be fixed.
• How and when to use the direct child selector. Using the .feature-box > * which selects all the immediate children of the parent. The deskew of that direct child is then transform: skewY(5deg) skewing in the opposite direction.

Natours v8 with features section

039 Natours Tours Section - Part 1

Topics

• How to build an animating, rotating card;
• How to use perspective MDN in CSS;
• How to use the backface-visibility MDN property;
• Using the background-blend-mode MDN property in concert with two values set to background-image property. Note this property does not work with all browsers (ie and edge in particular);
• How and when to use box-decoration-break MDN.

040 Natours Tours Section Part 2

041 Natours Tours Section Part 3

Natours v9 with tours section

042 Natours Stories Section Part 1

Topics

• How to make text flow around shapes with shape-outside MDN property
  • We use the value circle(50% at 50% 50%); basic shape MDN
  • passing three arguments to the function circle([radius] at [positionX] [positionY]).
  • must have a defined width and height;
  • and a float is required.
  • This causes the floated text to wrap around a circle shape, but we still need to make the element itself a circle using the clip-path property and the same circle function value.
  • And create space between the circle and the floated text, it's best to create space with transform: translateX()
• Note that the transform property is inherited, but a second declaration will take prcedence. So when we skewX(-8deg) and then attempt to deskew with the & > * all children selector. It doesn't work on the &__shape child because it has it's own transform property. So it needs to be edited directly with the skew(8deg) added as a second value.
• How to apply a filter to images;
• How to create a background video covering an entire section;
• How to use the <video> HTML element;
  • Uses free video found at coverr.co;
  • Inside the <video> element are nested two <source> elements.
• How and when to use the object-fit property.

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

• How to implement "solid-color gradients";
  • uses a linear-gradient() function that takes a degree value and three color values rather than your typical two.
  • linear-gradient(105deg,
rgba($color-white, .69) 0%,
rgba($color-white, .9) 50%,
transparent 50%)

• How the general and adjacent sibling selectors work and why we need them;
  • [selector1] + [selector2] Adjacent sibling elements are on the same level and immediately follow one another within a parent. This first selector selects the element immediately after it (not before). If there are elements in-between these two sibling elements, then you may use the general sibling selector [selector1] ~ [selector 2].
• How to use the ::input-placeholder pseudo-element;
• How and when to use the
  • :focus, when an input or button has been selected
  • :invalid takes advantage of the HTML5 standards for inputs and recognizes whether the input value is invalid and then selected,
  • :placeholder-shown when the input has no value the shown placeholder is selected, and
  • :checked ;
• Techniques to build custom radio buttons.
  • You cannot style the <input type="radio"> button,
  • So instead you create a new button by placing an empty <span> inside the <label> element,
  • The <span> can then be selected and styled into our custom button while the <input type="radio"> button is hidden
• It's common practice to use the !important value with all utility class declarations. This makes sure that the utility class will take precendence regardless.

046 Natours Booking Section Part 2

047 Natours Project Booking section part 3

Natours Project v11 with Booking Section

048 Natours Project Footer

Topics

• convert set of <li> elements into a row by setting them to disply: inline-block;
• also have the <div> container for the navigation and copyright sections use only the width of their contents by also setting display:inline-block. This will have the border top only take up the space of the content of the box, not the full width of the box set by the grid.

Natours project v12 with footer

049 Natours Project Navigation Part 1

Topics

• What the "checkbox hack" is and how it works;
  • Have a <input type="checkbox"> that will be hidden later;
  • Have a <label> connected to the checkbox that will become our button;
  • Use the :checked pseudo class to reveal the fullpage navigation.
• How to create custom animation timing functions using cubic bezier curvers;
  • easings.net
  • cubic-bezier.com
• How to animate "solid-color gradients";
  • Use a linear-gradient with a degree value as well as three color values and percent position linear-gradient(120deg, transparent 0%, transparent 50%, $color-white 50%);
  • More than double the background-size: 220% pushing the white area of the element's right.
  • Finally in the :hover state of the element, offset the background background-position: %100;
• How and why to use transform-orgin,
• Because the navigation z-index value is greater than all elements on the page, not only does it need to be set to opacity: 0 so it's not visible, we set it's width: 0 so that it's not sitting ontop of other page elements even if not visible.

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

• How to build a nice popup with only CSS;
• How to use the :target pseudo-class;
• How to create boxes with equal height using display: table-cell;
• How to create CSS text columns;
• How to automatically hyphenate words using hypens