wmyers/fewd-week2-refresher.md

## fewd-week2-refresher.md

      
    Raw
  

              fewd-week2-refresher.md
            
          
    ##The Box Model

every element on a web page is a box of content wrapped in three outer layers
margin: outermost layer, this is transparent and used for spacing
border: middle layer, this is a visible, styleable rectangular border
padding: inner layer, this is transparent but colored by the background-color of an element; it is used to create spacing between the border of an element and its inner content
You can individually style each rectangular side of margin, border or padding
You can change how an element's width/height is calculated in relation to its box model using the box-sizing property
You can view a representation of the box model of any element in Chrome Dev Tools
You round the corners of your rectangular border with the border-radius property
You can round the corners of an <img> tag with border-radius without setting any border property
You can turn a square into a circle with border-radius: 50%

##Position

The position property can be used for setting an element's position exactly, relative to its parent container or the browser window
You can position elements with exact pixel values using the top, left, bottom, right properties.
position has the following values:
static: default positioning in the document flow
absolute: positioned relative to its first non-static ancestor element
fixed: positioned relative to the browser window
relative: positioned relative to it's normal default position
Remember an absolute positioned element must be in a non-static-position parent element. Normally you style the parent element as position:relative.

.my-image-container {
 position:relative;
}
.my-image {
 position:absolute;
 left: 10px;
 bottom: 0px; //this will position on the bottom edge of the parent container
}

Have a look at this codepen;
##Nested selectors

provides a way of selecting one class/id/element inside another. The parent and child selectors are separated by a space in the CSS declaration, e.g. all the <a> links inside a <nav>:

nav a {
 text-decoration:none;
}

.my-nav-class a {
 text-decoration:none;
}


shows that the HTML DOM is hierachical (elements inside elements), so CSS is also hierarchical
the main nested selector is the descendant selector

Have a look at this link for more examples of selectors.
##Resetting and Normalizing CSS

reset.css removes all styles that a browser applies by default (like <h1> large font-size, or the default disc bullets on a <li>. It is then up to you to put back only the styles that you need, exactly as you want them.
normalize.css tries to make default browser styles the same across different browsers, including mobile browsers. This means you don't have to re-declare all your styles.
You should read the code for reset.css and normalize.css to see what is going on - it won't take long!

##Modernizr

runs a bit of JavaScript when your page loads to see what HTML5 features are available in the browser
it then dynamically adds class attribute values to the root <html> tag. E.g. audio or no-audio.
you can then style according to whether functionality exists in the browser using nested selectors. This is known as progressive enhancement

.audio .my-audio-button {
 display: inline
}

.no-audio .my-audio-button {
 display: none;
}

Also have a look at this link for an explanation of Modernizr:
https://css-tricks.com/why-use-classes-or-ids-on-the-html-element
##Display and page-flow
I will go over the display property and page flow in the next session, but here are a few concepts to get you started.

The display property will define how an element is rendered on the page, or whether it is even rendered at all - display:none will remove an element from the document tree
The page flow of the document refers to whether an element is being rendered horizontally across the page (possibly wrapping like text), or whether it is rendered vertically down the page (moved onto the next line regardless of any horizontal space on the previous line).
A element with a float property of left or right is taken out of the page flow (see more info below). This affects the display of both the floated element(s) and non-floated elements in the same block formatting context
Here are the main display values:

display:none: the element is removed from the document tree (as opposed to visibility:hidden)
display:block: means the element flows down the page to a 'new line'. A <p> tag is a block-level element
display:inline: means the element flows across the page on the 'same line'. A <span> is an inline element
display:inline-block: means the element is inline and the inside of this element is formatted as block
display:table: means the element behaves like a table
display:table-row: means the element behaves like a table row
display:table-cell: means the element behaves like a table cell
display:flex: this is the newer, better way to do layouts


Have a look at this codepen
You can read more about block-level elements here:
https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements
You can read more about inline elements here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente
##Floats (a bit complicated)

originally intended for wrapping inline content like text around a floated image, or for arranging element(s) horizontally across the page from the left or the right side
floats are currently also used for page layouts (e.g. creating a sidebar). It is recommended to try and use Flexbox for page layouts. So we will learn and practise some float layouts and then move on to Flexbox layouts.
when you apply a float to an item it is taken out of the flow of the page and shoved to the left or right edge of the page or the left or right edge of the previous element (in the same block formatting context) that has the same float property.
non-floated elements that come after a floated element will do one of the following:
if the non-floated element is display:block it will ignore the floated item(s) and will appear in the page-flow at the same point as where the floated item(s) started.
if the non-floated element is display:inline it will wrap around the floated item(s)
to make a non-floated block-level item come after floated item(s) in the page-flow, you need to clear it with a clear property. This can be one of the following values:
clear:left: clears a non-floated item that follows float:left items
clear:right: clears a non-floated item that follows float:right items
clear:both: clears left or right floated items
floated items grouped inside a non-floated container element will cause the container to collapse because the floats are taken out of the page flow, and so the container will think it is empty. You can resolve this in one of the following ways:
apply a float property to the container style too (then it can join its float-children in float-land)
apply a clear property to the container
apply an overflow property to the container (e.g. overflow:auto)
apply a clearfix style-hack to the container. This is more robust.
see examples
a block-level (display:block), non-floated, non-cleared item that follows floated item(s) will ignore the floated items before it and position itself at the same place in the page flow (as the floated items). But if the non-floated item contains text (which is displayed inline) then this inner text will wrap around the floated item(s). This is the process whereby you get text to wrap around an image floated beside it.

We'll discuss floats again in the next lesson and I will demonstrate them again. In the meantime have a look at this codepen.
##Flexbox
As mentioned above Flexbox is a newer, better and easier way of doing HTML layouts. We will discuss it properly next time, but for now please can those of you who have not already done so, try out this Flexbox educational game - Flexbox Froggy
##Overflow
I mentioned the overflow property as a way to fix a collapsing container of floated children. To explain overflow in a more straightforward way - what happens when we put some content into a container and the content is bigger than the container? This can happen particularly when you want to put some text inside a container of a fixed size, but the text requires more space than the container has available.
For this we use the overflow property in the container. It has the following values:

overflow:visible: (the default value) the overflowing content will break out and be visible
overflow:hidden: any overflowing content will be hidden
overflow:scroll: the overflowing content is clipped and scroll bars will always be available to see the overflow
overflow:auto: the overflowing content is clipped and scroll bars will be available as required to see the overflow
overflow:initial: default value
overflow:inherit: inherits from parent container

Have a look at this codepen for an overflowing text example
##Percentage heights
Another thing that was briefly touched on in the class when we were looking at the sticky footer layout is the way that you can apply a height property of an element as a percentage of the height of its parent container. So if you set the height of a your <header> to height:20% then the header will be 20% of whatever the height of the parent container is. If you give your parent container a fixed height of height:800px then your inner header would be 160px.
Sometimes you will want to apply percentage heights across the whole DOM tree, so that when you re-size the window all the different percentage heights will scale accordingly (in the old, pre-responsive days this was called a liquid layout). An important thing to remember when applying percentage heights across the board - you have to apply percentage heights to all container elements right up to the root tag. Specifically you need to apply full percentage heights to the <html> tag and the <body> tag, so that any child tags will have a relative value height. So to apply percentage heights across your whole DOM tree, your CSS would look something like:
html, body {
  height: 100%;
}

header {
  height: 20%;
}

nav {
  height: 10%;
}

.first-section {
  height: 30%;
}

.second-section {
  height: 30%;
}

footer {
  height: 10%;
}