Chapter 16 RWD Frameworks Review....

Lightweight CSS Grid Systems (page 497)

• Skeleton simple light weight used in examples
• Simple Grid lightweight
• Pure.css - Yahoo CSS Framework

Heavyweight CSS/JavaScript frameworks, include JavaScript code replacing jQueryUI.

• Foundation geared for Web Applications
• twitter Bootstrap most popular mobile first RWD framework

These frameworks are all based a a 12 unit wide "fluid" grid system. This layout has two problems...

• first you cannot extend the same content between three equally spaced columns.
• second all content must have the same height. CSS3 provides two properties for fixing this...
  1. column-[count | gap | width | span | rule | rule-style | rule-width | rule-color ] properties allow you to flow same content between multiple columns. The column properties names are intuitive.
     • column-count:n; //is the number of columns
     • column-gap:width; //gutter distance between columns
     • column-width : width of columns
     • h2 { column-span: 2; } // merge cells, h2 will span across 2 columns, before going to next line
     • column-[rule | rule-style | rule-width | rule-color ]; //similar to border property, style between or around columns default is betwen
  2. display:flexbox;

Introducing Flexbox

• display: flex; Width is determined by content
• Need recent browsers IE11, Chrome, Opera and Firefox
• Safaria need vendor prefix display: -webkit-flex

Flexbox Basics

1. Flex container can be any HTML element
2. Flex items are inside the flex container
3. AutoPrefix automatically adds vendor prefixes to CSS3 code. added display: -ms-flexbox; likely IE10

flexbox basics example. - flexbox cimw115 site Jill Reiche

Flex-Flow

• By default display:flex; will always keep items side by side regardless of screen width
• Property flex-flow control direction and word wrap
• flex-flow: [ row | row-reverse | column | colum-reverse ] [nowrap wrap wrap-reverse]; default row dispaly on a row; row-reverse display last item first; column display as columns
• flex-flow shortcut property for flex-direction, flex-wrap;;

flexflow basics example

flex shortcut flex: grow shrink basis;

• flex: flex-grow flex-shrink flex-basis
• flex-grow: n; number of flex items it can grow into 1 (only itself); 2 items (span cells)
• flex-shrink n; number of items it can shrink to
• flex-basis; width %, pixels, auto
• default is flex: 1 1 auto;

flexflow4.html figure 17-4

Property justify-content - not used often - flexflow5.html Fiture 17-5

• specifies how a browser should place flex items within a row
• flex items must have fixed width flex-basis: 200px
• justify-content: flex-start | flex-end center space-between space-around stretch
  • flex-start flex items are at left of row
  • flex-end flex items are at right side
  • center centers in middle of container
  • space-between evenly distributes horizontal spacing
  • space-around add space to leftmost and rightmost item

flex box must have fixed width flex-basis: 200px; word wrap and multiple rows for each item - not used often

align-items: flex-start flex-end center space-between space-around stretch - flexbox6.html

• How items of different heights are vertically placed in container
• must have fixed width, goal of flex is to change width relative item content.
• flex-start flex items are at top of container
• flex-end flex items are at end of container
• center vertical center of all rows
• space-between evenly distributes extra vertical space between the rows
• space-around evenly distributes space on top and bottom of all rows
• stretch default each row is stretched to match height of the items

align-content flexbox7.html not used that often

flex Item Properties: order property

• Search Engines Screen Readers analyze page top down, you may want content first for them, in the middle for Web surfer
• flexbox8.html - figure 17-8 page 542

each flex item can have an order: number; it determines the order of the item.

align-self page figure 17-8 page 544

flex-summary