##Week 3 Refresher Notes
###Units of measurement
####Pixels
Pixels are fixed units of measurement. This causes problems when devices have different resolutions (different numbers of pixels) or when a window is resized. So elements with pixel measurements will appear bigger or smaller on different devices and different browser windows.
####Percentages and Ems
Percentages % and ems em are relative units of measurement. Percentages are relative to the size of their parent container (which could also be a relative size to its parent etc). Ems are relative to the current element's inherited font-size property. 1em will equal 100% of an element's inherited property.
So the main reason to use relative units rather than fixed units is because they can scale up and down for different device resolutions. You only need to set (or detect) a fixed value in the root <html> or <body> style declaration and all other nested relative-value elements can re-size automatically.
It is better practice to use % for layouts and em for font-sizes. But you can use them inter-changeably.
em values can compound (multiply by each other) with unexpected results. If a container element has a font-size property value of 1.5em and a child inside the container also has declared a font-size:1.5em (rather than just inheriting from the parent), then the font-size of the child will actually be 2.25em (1.5 * 1.5).
A Good Trick With Ems. Most browsers have a default font-size of 16px. So by default 1em = 16px. If you set font-size:0.625em or font-size:62.5% in the style for the <html> or <body> tag, you are resetting the default font-size value to 10px (16 * 0.625 = 10). So now 1em = 10px which means you can set relative em values in a decimal way 1em = 10px or 2.2em = 22px.
####Rems
rem measurements can also workaround the potential issue of compound values with em. A rem is a relative value like an em but it will only be relative to a value set in the root <html> style declaration. It won't calculate its value relative to its parent.
####Keywords
font-size can also be measured with keywords. There are seven absolute values: xx-small, x-small, small, medium, large, x-large, xx-large. There are two relative values smaller and larger - you set these relative keyword values in the child of a container that has another relative or absolute keyword value. The browser default absolute keyword value is medium and equals 16px.
###Layouts
####Floated Layouts
Floated layouts use the float property to create column layouts. For more on floats see the FEWD_Week2 slides and refresher notes. Floats should really be used for floating text around images etc, rather than for layouts.
####Inline-block Layouts
Inline-block layouts use the display:inline-block declaration on the style of the column child elements in a container. This makes the child elements flow across the container width (inline), rather than down the container height. However the block part of inline-block will make the child elements of the columns flow down the column height.
Inline displayed elements are usually things like text, images, <a> links, so they will display white-space by default. white-space is the space between words, or an indent on a line of text, or a carriage return. If you style your columns to be exactly 100% width of your container (e.g. left-column is 70% and right-column is 30%) and there is still some white-space then the inline flow will break onto another line.
So in order to get an exact fit with your columns, you need to make sure there is no white-space visible in the container element of columns. You can do this by setting font-size:0pxon the container style - remember white-space is like text and we don't want to display any text or white-space in the column container. But you do want text to be visible inside your column elements. So you need to reset font-size:16px (the default value, or you can make it some other value) in your column style declarations.
Finally, because your columns will be different heights according to their content, you need to set vertical-align:top in the column style declaration. This will vertically align all the columns to the top of the parent container.
You can see a clearer example of display:inline-block columns in the updated week3_working_files/layout_challenge/1.two-column/inline-columns on github, just 'Sync' your ga-fewd-files repo to pull in the updates.
/*this styles the column container*/
main {
width: 100%;
height: 300px;
/*set the font-size to 0 to hide all possible white-space text*/
font-size: 0;
}
/*this styles the columns (the direct descendants of the container)*/
main > * {
display: inline-block;
/*required if one column is taller than another*/
vertical-align: top;
/*reset the font-size to display text inside the columns*/
font-size: 16px;
}
####Layouts and media queries
Layouts are either static or liquid or adaptive or responsive. Read this link for further info: http://blog.teamtreehouse.com/which-page-layout
- static layouts use fixed pixel values
- liquid layouts use relative percentage (or
em) values - adaptive layouts use fixed values and media queries
- responsive layouts use relative values and media queries
Adaptive and responsive layouts use media-queries to detect the changing width of a web-page across different devices (or when a window is re-sized).
A media query is an expression of logic inside a CSS style declaration. It sets a breakpoint when the css style should change:
.container{
width: 960px;
}
@media all and (max-width: 500px) {
.container{
width: 400px;
}
}
"If the browser is 500px wide (or less), set container to be 400px wide. Otherwise container will be 960px wide."
###Flexbox
Flexbox makes it easier to build responsive layouts. Flexbox is not one property but a group of properties and functionalities that you apply to both parent containers (the flex container) and child elements (the flex items).
You make a container use Flexbox by setting display:flex to the container style declaration.
You don't need to apply display:flex to the style of the child flex items, unless you are doing a nested Flexbox layout inside a flex item.
####Main layout properties and short-forms
You can lay out elements in a row or column using the flex-direction and flex-wrap properties. These are applied to the flex container. You can also use the short-form flex-flow property:
flex-flow: <flex-direction> <flex-wrap>
NB: By default the values for flex-flow are row no-wrap.
You can mix fixed and relative sized elements in a row or column with the flex-grow, flex-shrink and flex-basis properties. These are applied to the flex items inside a flex container. You can also use the short-form flex property:
flex: <flex-grow> <flex-shrink> <flex-basis>
NB: By default the values for flex are 0 1 auto.
NB: flex-shrink and flex-basis are optional values.
####Links
When starting out with Flexbox you should play the Flexbox Froggy game: http://flexboxfroggy.com.
Also read the Flexbox article on the css-tricks website: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Also see this Flexbox cheatsheet: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
####Modernizr
You should use Modernizr to detect whether a browser supports both flexbox and flexwrap - these will get set by Modernizr as class names on the root <html> tag if the browser does fully support Flexbox.
You need to detect separately for flexwrap because some browsers are missing support for wrapping, but do support other Flexbox features.
See week3_working_files/layout_challenge/2.three-column/flexbox-or-inline-columns for a working example using Modernizr that checks for flexbox and flexwrap class names (applied by Modernizr to the root <html> element). If these are not detected then the css will fallback to a display:inline-block layout.