USE YOUR PHOTOS IN

NATOURS
Three pillars to write good html and css:

1. Responsive web Design

2. Maintainable and scalable code
3. Web performance

Responsive Web design: that means we build one website that works beautifully
across all screen sizes on all devices.

Fundamentals of responsive web design:

- Fluid layouts
- Media queries
- Responsive Images
- Correct units for font sizes or element dimensions
- 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

- Faster and smaller in size

- Less HTTP requests
- Less code
- Compress code
- Use a CSS preprocessor
- Less images [biggest impact]
- Compress images

What happen to CSS when we load up a Webpage?

Browser starts to load the initial HTML file. It then takes the loaded html code and
parses it, which means that it decodes the code line by line.

From this process, the browser builds the so-called Document Object Model, or
DOM, which basically describes the entire web document, basically like a family
tree, with parents, children, and sibling elements. So, this Document Object
Model is where the entire decoded html code is stored.

Now, as the browser parses the html, it also finds the style sheets included in the
html head, and it starts loading them as well.

And just like html, CSS is also parsed. But parsing of CSS is little more complex

During the CSS parsing phase, there are two main steps:

- Conflicting CSS declarations are resolved through a process known as the

cascade.
 - Process final CSS values, like for instance, converting a margin defined in
percentage units to pixels. Let’s say left-margin= 50%, but that 50% is
completely different on a smart phone than a large screen. [these relative
units are defined only during the parsing phase.]

After all of this is done, the final CSS is also stored in a tree-like structure called
CSS Object Model (CSSOM)

Now both HTML and CSS are parsed and stored, these together form the so-
called Render Tree.

And with that we finally have everything we need to render the page.

Now to actually render the page, the browser uses something called the Visual
Formatting Model.

This Algorithm calculates and uses a bunch of stuff that you already know about
like the box model, floats, and the positioning.

After the Visual formatting model has done it’s work, the website is finally
rendered or painted to the screen and the process is finished.
HOW CSS IS PARSED. Part 1: The Cascade and Specificity

A CSS rule consists of a Selector and the Declaration block.

We use the selector to select one or more HTML elements that we want to style.

Declaration block is where the actual styles in order to style elements on our
page.

To do so, we can write one or more CSS declarations in each declaration block.

Each declaration consists of a CSS property and its corresponding value, which is
the value that we assign to a property. This value is the declared value.

The CASCADE: The first step of the CSS parsing phase (The ‘C’ in CSS)

In the parsing phase, the first step is to resolve conflicting CSS declarations and
the second step is to process the final CSS values.
CASCADE: Process of combining different style-sheets and resolving conflicts
between different CSS rules and declarations, when more than one rule applies
to a certain element.

Ex. A declaration for a certain style property like font size can appear in several
style-sheets and also several times inside one single style-sheet.

CSS can also come from different sources.

1. The most common one is the CSS that we the developers write. These
declarations that we put in our style-sheets are called the author
declarations.
2. Other source would be user declarations which is CSS coming from the
user. Ex. When the user changes the default font size in the browser then
that is user CSS, and last but not least,
3. There are the default browser declarations (User Agent). Ex. If we put an
anchor tag in our HTML for a link and then don’t style it at all it will usually
be rendered with blue text and underlined. That’s called user agent CSS

CASCADE combines the CSS declarations coming from all of these different
sources.

But how does the CASCADE actually resolve conflicts when more than one rule
applies? What it does is to look at importance, at the selector specificity, and to
source order of conflicting declarations.

IMPORTANCE (WEIGHT) > SPECIFICITY > SOURCE ORDER of conflicting

declarations

In order to determine which one takes precedence,

First off the cascade starts by giving the conflicting declarations different
importance’s based on where they are declared, based on their source.

IMPORTANCE (WEIGHT)
 1. User !Important declarations
2. Author !Important declarations
3. Author declarations
4. User declarations
5. Default browser declarations (user agent)

Conflicting rules in author stylesheets without any important keyword.} Most

common scenario

And in this case all the declarations have the exact same importance.

What CASCADE does if this is the case is to calculate and compare the specificities
of the declaration selectors,

SPECIFICITY (if importance[weight] same)

1. Inline styles
2. Ids
3. Classes, pseudo-classes, attribute selectors
4. Elements, pseudo-elements selector
And what if specificity same

The last declaration in the code will override all other declarations and will be
applied.

Cascade and specificity: what you need to know

 CSS declarations marked with !Important have the highest priority;
 But, only use !Important as a last resource. It’s better to use correct
specificities – more maintainable code!
 Inline styles 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 contains 1 class is more specific than one with 1000
elements.
 The universal selector * has no specificity value (0,0,0,0); (all other
selectors have a precedence over it)
 Rely more on specificity than on the order of selectors.
 But, rely on order when using 3rd-party stylesheets – always put your
author stylesheet last.
How the css engine converts relative units to pixels in order to calculate
computed and used value (step 4 and step 5)
Length in percentages like height, a padding, a margin or something else, the
reference is always the parents element’s width

CSS value processing

 Each property has an initial value, used if nothing is declared (and if there is
no inheritance).
 Browsers specify a root font-size for each page (usually 16px).
 Percentages and relative values are always converted to pixels.
 Percentages are measured 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, if used to specify font-
size. *( parent font-size)
 Em are measured relative to the current font-size, if used to specify
lengths. *( current font-size)
 Rem are always measured relative to the document’s root font-size.
o *( document’s root font-size)
  Vh and vw are simply percentage measurements of the viewport’s height
and width.

INHERITANCE

A way of propagating property values from parent elements to their children.

It’s not that a declared value is passed, but instead the computed value.

 Inheritance passes the values for some specific properties from parents to
children – more maintainable code.
 Properties related to text are inherited: font-family, font-size, color, etc.
Margins and 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 property.
 The initial keyword resets a property to its initial value.

Website Rendering: The Visual Formatting Model

The CSS 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.

In order to do this, the algorithm takes into account factors like dimensions of the
boxes, which are calculated by the box model

1. Dimensions of boxes: the box model

2. Box type: inline, block and inline-block
3. Positioning scheme: floats and positioning
4. Stacking contexts
5. Other elements in the render tree
6. Viewport size, dimensions of images, etc.

By putting all of these factors together, the browser figures out how the final
website will look for the user.

1. The Box Model:

Fundamental part of CSS to master in order to lay out a webpage.

One of the factors the define how elements are displayed on a webpage and how
they are sized.

According to the box model, each and every element on a webpage can be seen
as a rectangle box. And each box can have a width, a height, a padding , margins
and a border. But they’re all optional, so there can be boxes with no margins or
no paddings at all.

Box-sizing: border-box

This applies mainly to block-level boxes, which is one of the different types of
boxes in CSS.

2. Box types: Inline, Block-Level and Inline-Block

Type of the box is always defined by the display property:

Inline boxes: The height and width property do not apply; we can only specify
horizontal paddings and margins on inline elements. (only on the left and right
side).

Inline block boxes: Inline block boxes are also inline boxes but simply work as a
block-level box on the inside.

BLOCK-LEVEL

In case of block-level element/block-level box(both can be used), the display

property is usually set to block.

Display: flex; display: list-item; display: table also produce block-level boxes.

Now, all html elements have a default display property.

And elements such as paragraphs and divs which are usually formatted visually as
blocks, have their display property set to block by default. We can always change
this property manually.

Being a block-level box, this box will occupy as much space as possible, which is
usually 100% of its parent width. And create line breaks after and before it,
meaning that blocks are formatted vertically one after another.

INLINE BOXES

Display: inline

Content is distributed in lines, meaning that an inline box only occupies the space
that its content actually needs.
Therefore, they also don’t cause line breaks after and before them.
They just sit inside their block level parent element.

Height and Width property do not apply.

We can only specify horizontal paddings and margins on inline elements; only left
and right side.

INLINE-BLOCK BOXES

Display: inline-block

Inline block boxes are technically also inline boxes but which simply work as a
block-level box on the inside.

Since, they are technically inline elements; they also use up only their content
space and cause no line breaks.

But since they work as a block-level box on the inside, the box modal applies to
them just like in the regular block-level boxes.
 3. Positioning Schemes: Normal Flow, Absolute Positioning and Floats.

Normal flow

Is what happens to an element if you don’t do anything to it at all. If you don’t

float it and if you don’t use position absolute on it.

If you use position relative, then the element is still in a normal flow.

And what the normal flow means, is that the elements are simply laid out on the
page in a natural order in the code.

Floats

The float property causes an element to be completely taken out of the normal
flow and shifted to the left or right as far as possible, until it touches the edge of
its containing box, or another floated element.

When this happens, text and inline elements will wrap around the floated
element.

Also, when an element is floated, its container will not adjust its height to the
element, which can be problematic. The usual solution to this is to use clear fixes

Absolute Positioning

Just like with floats, when you set the position property to absolute or also to
fixed, the element is taken out of the normal flow.

Difference is that with absolute positioning, the element has no impact on

surrounding content or elements at all. In fact, it can even overlap them.

So if we want to position an absolutely positioned element on the page, we use

the CSS properties top, bottom, left and right to offset it to its relatively
positioned container.

An absolutely positioned element can overlap other elements occupying the same
space. Solution? CSS solves it for us actually, using something called stacking
context.
 4. Stacking Contexts

Stacking contexts are what determine in which order elements are rendered on
the page.

A new stacking context can be created by different CSS properties, where the
most widely known is Z index. But there are other properties that also create new
stacking contexts.

Stacking contexts are like layers that form a stack.

Layers on the bottom of the stack appear at first, and the elements higher up in
the stack appear on top, overlapping the elements below them,
An opacity value different from one

A transform

A filter or other properties,

(apart from z index) will also create new stacking contexts.

CSS Architecture components and BEM

Think

Think about the layout of your webpage or web app before writing code.

Build

Build your layout in HTML and CSS with a consistent structure for naming classes.

Architect

Create a logical architecture for your CSS with files and folders.

Think

Component-driven Design

- Modular building blocks that make interfaces

- Held together by the layout of the page.
- Re-usable across a project, and between different projects.(so you can
build a library of your components and then reuse them across projects,
which will speed up your development.)
 - Independent, allowing us to use them anywhere on the page (should not
depend on their parent elements).

Build

BEM – Block Element Modifier

.block{}

.block__element{}

.block__element—modifier{}

Low specificity BEM selectors – Always use classes and they are never nested.

Clean system for marking up our layouts.

In BEM, a

Block is a standalone component that is meaningful on its own and can be used
anywhere in the project.
Element is a part of a block and has no meaning on its own.

Modifier is a flag that we can put on a block or an element in order to make it

different from the regular blocks or elements (to make a different version ex. For
making a button round).

Architecture

To create a logical folder and file structure for our CSS to live in.

Some methods

ITCSS or S max method

We will use 7-1 pattern

7 different folders for partial Sass files, and 1 main Sass file to import all other
files into a compiled CSS stylesheet.

Sass meaning any other CSS pre-processor

7 folders

- Base/ - basic product definitions [resets and styles for the HTML and body
element selectors. This file should be a partial so we can later import it into
the main SASS file. The partial files, they always start with an underscore.]
- Components/ - contains one file for each component
- Layout/ - define the overall layout of the project[for each piece of the
global layout of the entire project.][global footer, global header, etc.]
- Pages/- have styles for specific pages of the project,
- Themes/ - if you want to implement different visual themes,
- Abstracts/ - where we put code that doesn’t output any CSS, such as
variables or mix-ins
- Vendors/ - where all third party CSS goes.
SASS and NPM

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 later.
- Extends: to make different selectors inherit declarations that are common
to all of them.
- Control directives: for writing complex code using conditionals and loops.

Two Sass syntaxes:

1. Sass syntax: indentation sensitive and doesn’t use any curly braces and
semicolons
2. SCSS syntax (Sassy CSS): original CSS syntax
Responsive Design Principles

1. Fluid Grids and Layouts

To allow content to easily adapt to the current viewport width used to
browse the website. Uses % rather than px for all layout-related lengths.
2. Flexible/Responsive Images
Images behave differently than text content, and so we need to ensure that
they also adapt nicely to the current viewport. [Images do not scale
automatically as we change the view port. Usually, we make images flexible
by defining their dimensions in percentages rather than fixed units like
pixels. + images usually make up the biggest part of our website’s size, in
terms of megabytes, and so we should optimize the images for different
width]
 3. Media Queries
To change styles on certain viewport widths (breakpoints), allowing us to
create different version of our website for different widths.

Layout Types:

There are currently three major ways of laying out a webpage or app:

1. Float Layouts: we simply put a bunch of boxes side by side, using floats.
2. Flexbox: laying out elements in one dimensional row
3. CSS Grid: perfect for creating the overall layout of a page in a fully-fledged
2D grid.

Flexbox and CSS Grid are not fully supported by modern browsers yet.(2017)

Grid: A design system which allows us to build consistent interfaces.

RESPONSIVE DESIGN
Responsive Images

(feature queries to implement different features for browsers with different

capabilities.)

Two fundamental important aspects of modern responsive design are

- Deciding about doing mobile-first or desktop-first

- Selecting breakpoints for our project, when writing media queries.

In the desktop first approach,

We optimize our interfaces for the large screens.

- Start writing CSS for the desktop: large screen;

- Then, media queries shrink design to smaller screens. (these media queries
test for max width.)

In mobile first approach,

- Start writing CSS for mobile devices: small screen.

- Then, media queries expand design to a large desktop screen. (media
queries test for min-width.)
- Forces us to reduce websites and apps to the absolute essentials.

Difference b/w the type of media queries we need to write for each approach:

- Max-width for desktop first

- Min-width for mobile first
In media queries, we override some specific parts of the global CSS code. Only the
parts that we want to change, because all the rest of the global code will still
apply.

Max-width: Maximum width at which media query still applies

Media queries – tools to override specific parts of our CSS for specific viewport
width.

Let’s say: at 500px, both max-width: 600px; max-width: 900px; media queries will
be applied.

If we have conflicting CSS code in these, then the one that appears last in the
code is the one that takes precedence. (because media queries don’t add any
specificity or importance to our selectors.)

Media queries don’t add any importance or specificity to selectors, so code order
matters – media queries at the end.

Min-width: Minimum width at which media query starts to apply

Breakpoints – these are the viewport width at which we want our design to
change.
Where we want to put our media queries.

Data from statcounter

Responsive Images
The goal of responsive images is to serve the right image to the right screen size
and device, in order to avoid downloading unnecessary large images on smaller
screens.
When to use responsive images:

- Resolution switching – serving up the same image for a smaller screen but
with a smaller resolution.
- Density switching – screen doesn’t matter but a screen pixel density does
instead.
- Art Direction – different image for different screen size. (you may want to
keep the important details in an image but remove parts of the image
around these important details.)

Images in html – all img text

In CSS it’s when we use background-image.

Browser support: caniuse.com

Graceful degradation:

Providing top notch experience/properties in the latest browsers and a reduced

version/ simple version in older browsers.

A Simple Build Process

Build process – basically, a sequence of tasks that we perform automatically after

we finish developing a product or a certain feature of a product.

The result of build process is one or more final files which are then ready for
production - which basically means ready to be deployed to a web server.

Autoprefixer

Postcss –cli

Concat

Npm-run-all