Transcription
CSS3 LayoutFebruary 18, 2013In Control Orlandoby Zoe Mickley Gillenwater@zomigizomigi.com
What I doBooksWebStunning CSS3:A Project-based Guide tothe Latest in CSSAccessibilityspecialist at AT&Twww.stunningcss3.comVisual designerCSS developerand consultantFlexible Web Design:Creating Liquid and ElasticLayouts with CSSwww.flexiblewebbook.com2
the pasttable layout3
Problems with table layout Complicated/bulky markupAccessibility problemsSlower browser renderingRigid designsSpacer gifs4
the presentfloat layout5
Problems with float layout Difficulty with containmentWrapping/float dropDifficulty with equal-height columnsNo float:centerVisual location somewhat tied to HTMLorder6
the futurea whole mess o’ CSS37
Floats of the futurehttp://dev.w3.org/csswg/css3-box/ New values for float property New ways to contain floats New float-displace property8
New values for float propertyThese include values like start andend to help with languages with RTLdirection, but check out how thetext wraps around this graphicwhen using the new contourvalue.unicorn {float: right contour;}Pretty sweet, right? Almost as sweet as this radunicorn pegasus.9
New ways to contain floatsCurrent behavior:One potentialway to get thisnew behavior:New behavior:p {min-height: contain-floats;}10
New ways to contain floatsCurrent behavior:Another way(if element hasbottom borderor padding):New behavior:p {clear-after: right;}11
New ways to contain floatsCurrent behavior:Or maybe just:New behavior:p {clear: both after;}12
Current float wrap behaviorp {float-displace: line;} Floats lay over blocks Lines get shortened13
Here’s when that sucks14
Fix with float-displaceul {float-displace: indent;}15
Another option for float wrapp {float-displace: block;} Floats do not lay overblocks Block’s width reduced16
CSS3 “content-flow” modules Multi-column Layout: flow a box’scontent into multiple columns in that box Regions: flow content into multiple,separate boxes Exclusions and Shapes: make contentflow around and within areas in moreintricate ways than floating17
Multi-column Layoutwww.w3.org/TR/css3-multicol/ **11.1* 10*with browser-specific prefixes18
Regionswww.w3.org/TR/css3-regions/article {flow-into: orlando;}#one, #two, #three {flow-from: orlando;}12319
Exclusions and quotes are gonna beeverywhere. I can feel it.center {wrap-flow: both;}20
Shapes Use SVG-likesyntax or imageURL to definecontours Inside shapesapply to all blocks Outside shapesapply to floats andexclusionsImage from csslayout-features-to-look-forward-to/21
but where’s myjetpack22
CSS3 grid-related modules Grid Alignment?Template Layout?Grid Template Layout?Grid Layout—the winner!23
Grid X10**partially, with -ms- prefix24
Create a grid, method 1Column widths.wrap {display: grid;grid-definition-columns: 200px 1fr 200px;grid-definition-rows: auto auto;}Row heightsIE 10 also lets you use:-ms-grid-columns: 200px 1fr 200px;-ms-grid-rows: auto auto;25
Empty invisible grid1fr200pxautoauto200px26
Place elements in that grid-column:grid-column:1 2;}}}}navnewsmainaside27
Create a grid, method 2.wrap {display: grid;grid-template: "a a a a""b c c d"}abcd28
Create a grid, method 2.wrap {display: grid;grid-template: "head head head head""side1 main main side2"}headside1mainside229
Place elements in that -area:grid-area:"head" }"main" }"side2" }"side1" }head navside1 #newsmain #mainside2 aside30
Rearrange the grid@media screen and (max-width:500px) {.wrap { grid-template: "main side2""side1 side1""head head"}}mainside2side1head31
demo time32
Flexible Box Layoutwww.w3.org/TR/css3-flexbox/ X**†12.1XX†with -webkit- prefixcan be switched on in version 18 33
Which is lay:flex See also 34
How flexbox works Make boxes automatically grow to fillspace or shrink to avoid overflow Give boxes proportional measurements Lay out boxes in any direction Align boxes on any side Place boxes out of order from HTML35
Let’s tryflexboxout onthis page36
Original CSS.feature {float: left;width: 30%;margin: 0 4.5% 0 0;padding: 130px 0 0 0;}37
Create a flex container div class "feature-wrap" div class "feature" id "feature-candy" . /div div class "feature" id "feature-pastry" . /div div class "feature" id "feature-dessert" . /div /div .feature-wrap {display: flex;}Make sure to also addthe prefixed values andproperties for now.38
How the CSS might really look.feature-wrap {display: -ms-flexbox;display: -moz-flex;display: -webkit-flex;display: flex;}Optional for IE 10Optional for testing inFF 18 and 19Needed for Chrome and(someday) Safari39
Specify direction of flex items.feature-wrap {display: flex;flex-direction: row;}Default valueSwitch to vertical stacking:@media screen and (max-width:500px) {.feature-wrap {display: flex;flex-direction: column;}}40
Setting a point of referenceMain axisCross axisfor flex-direction: row41
Make flex items flexible.feature {flex: 1 1 0px;margin-right: 40px;padding: 130px 0 0 0; }flex grow factor42
Make flex items flexible.feature {flex: 1 1 0px;margin-right: 40px;padding: 130px 0 0 0; }flex shrink factor43
Make flex items flexible.feature {flex: 1 1 0px;margin-right: 40px;padding: 130px 0 0 0; }flex basis44
Make flex items flexible.feature {flex: 1 1 0px;margin-right: 40px;padding: 130px 0 0 0; }Same as:.feature {flex: 1;margin-right: 40px;padding: 130px 0 0 0; }45
Add a fourth feature box div class "feature-wrap" div class "feature" id "feature-candy" . /div div class "feature" id "feature-pastry" . /div div class "feature" id "feature-dessert" . /div div class "feature" id "feature-bread" . /div /div 46
All boxes adjust in width47
Don’t need to do this anymore.2up .feature { width: 45% }.3up .feature { width: 30% }.4up .feature { width: 22% }48
Highlight a sale category.sale {padding: 130px 20px 20px 20px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);}What percentage width would I set tomake this twice as wide as other boxes,if I weren’t using flex?49
Make sale box twice as wide.sale {flex: 2;padding: 130px 20px 20px 20px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);}50
Default equal-height columns!.feature-wrap {display: flex;align-items: stretch;}This is the default value, so we don’t needto actually set this property, but this showsyou what it looks like.51
Vertical centering with ease!.feature-wrap {display: flex;align-items: center;}52
align-items(2011: t)(end)foocenter(center)foofoobaseline(baseline)53
Visual order HTML order54
Move sale box to front of line.sale {order: -1;flex: 2;padding: 130px 20px 20px 20px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);}Default order value is 0 for all flex items,so -1 moves this one before others55
New visual order, same HTML56
Accessibility implicationsProConKeep content in logicalorder in HTML instead ofstructuring HTML toachieve visual layoutFocus/tab order won’talways match expectedorder, may jump aroundseemingly randomly57
Tab order HTML order213458
Expected tab order12485367959
Frustrating mystery tab order18374965260
use the order property forgoodnot evil 61
Columns are too narrow62
Create multi-line flex container.feature-wrapper {display: flex;flex-wrap: wrap;}.sale {order: -1;flex: 1 1 100%;margin: 0 0 20px 0;padding: 130px 20px 20px 20px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);}63
Flex items can now wrap64
Change icon position.sale {order: -1;flex: 1 1 100%;margin: 0 0 20px 0;padding: 20px 20px 1px 170px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);background-position: 20px 0;}65
Final layout66
use flexbox now forprogressive enhancement 67
How can I make this form: Display on a single line with image Vertically centered with image Span full-width of container68
Let’s try inline-block#order img, #order form {display: inline-block;vertical-align: middle; } div id "order" img src "cake.png". form label for "message" . /label input type "text" id "message". input type "submit" value "add to cart" /form /div 69
Inline-block achieves: Display on a single line with image Vertically centered with imageX Span full-width of container70
Different units make life hardPixelsEmsSome mystery percentage71
Make the text input flex#order, #order form {display: flex;align-items: center; }#order form {flex: 1; }#order #message {flex: 1;min-width: 7em;margin: 0 5px; }Make outer div and forminto flex containersVertically center kiddosMake form take up allspace next to imageMake text input take upall space in form leftafter label and buttonBut don’t let it getcrazy-small72
Use inline-block with flexbox73
Use inline-block with flexbox#order img, #order form {display: inline-block;vertical-align: middle; }#order, #order form {display: flex;align-items: center; }#order form {flex: 1; }#order #message {flex: 1;min-width: 7em;margin: 0 5px; }74
Full-width nav barnav ul {nav li {display: table;display: table-cell;width: 100%;text-align: center; }margin: 0;padding: 0;list-style: none; }75
Not so hot with no backgroundsUneven spacingDon’t like these gaps76
Even spacing with flexboxnav ul {display: flex;justify-content: space-between;margin: 0;padding: 0;list-style: none; }77
justify-content(2011: 78
Use inline-block with flexbox79
Use inline-block with flexboxnav ul {display: flex;justify-content: space-between;margin: 0;padding: 0;list-style: none;text-align: center;}nav li {display: inline-block;}80
Or use Modernizr scripthttp://modernizr.comnav ul {display: table;width: 100%;margin: 0;padding: 0;list-style: none;}.flexbox nav ul {display: flex;}nav li {display: table-cell;}.flexbox nav li {display: list-item;}81
prepare for thefuture82
Learn moreDownload slides and get links athttp://zomigi.com/blog/css3-layoutZoe Mickley Gillenwater@zomigidesign@zomigi.comzomigi.com stunningcss3.com flexiblewebbook.comTitle photo by Gilderic Photography )Rocket icon by Jason Peters, fire icon by James Bond Icons, both from The Noun Project83
CSS developer and consultant. 3 the past table layout. 4 Problems with table layout Complicated/bulky markup Accessibility problems Slower browser rendering Rigid designs Spacer gifs. 5 the present float layout. 6 Problems with float layout Difficulty with containment
