##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:0px
on 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.