CSS3 Layout

16 592 vues

Publié le

Get links to related resources at http://zomigi.com/blog/css3-layout/

Publié dans : Design
0 commentaire
31 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
16 592
Sur SlideShare
0
Issues des intégrations
0
Intégrations
216
Actions
Partages
0
Téléchargements
134
Commentaires
0
J’aime
31
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

CSS3 Layout

  1. CSS3 LayoutFebruary 18, 2013 by Zoe Mickley GillenwaterIn Control Orlando @zomigi zomigi.com
  2. What I do Books Web Stunning CSS3: Accessibility A Project-based Guide to specialist at AT&T the Latest in CSS Visual designer www.stunningcss3.com CSS developer and consultant Flexible Web Design: Creating Liquid and Elastic Layouts with CSS www.flexiblewebbook.com 2
  3. the pasttable layout 3
  4. Problems with table layout• Complicated/bulky markup• Accessibility problems• Slower browser rendering• Rigid designs• Spacer gifs 4
  5. the present float layout 5
  6. Problems with float layout• Difficulty with containment• Wrapping/float drop• Difficulty with equal-height columns• No float:center• Visual location somewhat tied to HTML order 6
  7. the futurea whole mess o’ CSS3 7
  8. Floats of the futurehttp://dev.w3.org/csswg/css3-box/• New values for float property• New ways to contain floats• New float-displace property 8
  9. New values for float property These include values like start and end to help with languages with RTL direction, but check out how the text wraps around this graphic when using the new contour value. .unicorn { float: right contour; } Pretty sweet, right? Almost as sweet as this rad unicorn pegasus. 9
  10. New ways to contain floatsCurrent behavior: New behavior:One potential p {way to get this min-height: contain-floats;new behavior: } 10
  11. New ways to contain floatsCurrent behavior: New behavior:Another way p {(if element has clear-after: right;bottom borderor padding): } 11
  12. New ways to contain floatsCurrent behavior: New behavior:Or maybe just: p { clear: both after; } 12
  13. Current float wrap behaviorp { float-displace: line;}• Floats lay over blocks• Lines get shortened 13
  14. Here’s when that sucks 14
  15. Fix with float-displace ul { float-displace: indent; } 15
  16. Another option for float wrapp { float-displace: block;}• Floats do not lay over blocks• Block’s width reduced 16
  17. CSS3 “content-flow” modules• Multi-column Layout: flow a box’s content into multiple columns in that box• Regions: flow content into multiple, separate boxes• Exclusions and Shapes: make content flow around and within areas in more intricate ways than floating 17
  18. Multi-column Layoutwww.w3.org/TR/css3-multicol/   11.1  10 * * ** with browser-specific prefixes 18
  19. Regionswww.w3.org/TR/css3-regions/article { 1 flow-into: orlando;} 2#one, #two, #three { flow-from: orlando;} 3 19
  20. Exclusions and Shapeshttp://dev.w3.org/csswg/css3-exclusions/ Pullquotes are gonna be everywhere. I can feel it. .center { wrap-flow: both; } 20
  21. Shapes• Use SVG-like syntax or image URL to define contours• Inside shapes apply to all blocks• Outside shapes apply to floats and exclusionsImage from http://coding.smashingmagazine.com/2011/12/15/six-css-layout-features-to-look-forward-to/ 21
  22. but where’s my jetpack 22
  23. CSS3 grid-related modules• Grid Alignment?• Template Layout?• Grid Template Layout?• Grid Layout—the winner! 23
  24. Grid Layouthttp://dev.w3.org/csswg/css3-grid-layout/ X X X X 10 ** partially, with -ms- prefix 24
  25. Create a grid, method 1.wrap { Column widths 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
  26. Empty invisible grid 200px 1fr 200px auto auto 26
  27. Place elements in that gridnav { grid-column: 1 3; grid-row: 1; }#main { grid-column: 2; grid-row: 2; }aside { grid-column: 3; grid-row: 2; }#news { grid-column: 1; grid-row: 2; } nav news main aside 27
  28. Create a grid, method 2.wrap { display: grid; grid-template: "a a a a" "b c c d"} a b c d 28
  29. Create a grid, method 2.wrap { display: grid; grid-template: "head head head head" "side1 main main side2"} head side1 main side2 29
  30. Place elements in that gridnav { grid-area: "head" }#main { grid-area: "main" }aside { grid-area: "side2" }#news { grid-area: "side1" } head=nav side1= side2= main=#main #news aside 30
  31. Rearrange the grid@media screen and (max-width:500px) { .wrap { grid-template: "main side2" "side1 side1" "head head" }} main side2 side1 head 31
  32. demo time 32
  33. Flexible Box Layoutwww.w3.org/TR/css3-flexbox/  X 12.1 X X † **† with -webkit- prefix can be switched on in version 18+ 33
  34. Which is which?2009 display:box X2011 display:flexbox ehNow display:flex See also http://css-tricks.com/old-flexbox-and-new-flexbox/ 34
  35. How flexbox works• Make boxes automatically grow to fill space 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 HTML 35
  36. Let’s tryflexboxout onthis page 36
  37. Original CSS.feature { float: left; width: 30%; margin: 0 4.5% 0 0; padding: 130px 0 0 0;} 37
  38. 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 { Make sure to also add display: flex; the prefixed values and} properties for now. 38
  39. How the CSS might really look.feature-wrap { Optional for IE 10 display: -ms-flexbox; display: -moz-flex; Optional for testing in FF 18 and 19 display: -webkit-flex; display: flex; Needed for Chrome and (someday) Safari} 39
  40. Specify direction of flex items.feature-wrap { display: flex; flex-direction: row; Default value}Switch to vertical stacking:@media screen and (max-width:500px) { .feature-wrap { display: flex; flex-direction: column; }} 40
  41. Setting a point of reference Main axisCross axis for flex­direction: row 41
  42. Make flex items flexible.feature { flex: 1 1 0px; flex grow factor margin-right: 40px; padding: 130px 0 0 0; } 42
  43. Make flex items flexible.feature { flex: 1 1 0px; flex shrink factor margin-right: 40px; padding: 130px 0 0 0; } 43
  44. Make flex items flexible.feature { flex: 1 1 0px; flex basis margin-right: 40px; padding: 130px 0 0 0; } 44
  45. 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
  46. 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
  47. All boxes adjust in width 47
  48. Don’t need to do this anymore.2up .feature { width: 45% }.3up .feature { width: 30% }.4up .feature { width: 22% } 48
  49. 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
  50. 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
  51. 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
  52. Vertical centering with ease!.feature-wrap { display: flex; align-items: center;} 52
  53. align-items(2011: flex­align) stretch (stretch) flex-start flex-end (start) (end) foo foo foo center baseline (center) (baseline) 53
  54. Visual order = HTML order 54
  55. 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 others 55
  56. New visual order, same HTML 56
  57. Accessibility implicationsPro ConKeep content in logical Focus/tab order won’torder in HTML instead of always match expectedstructuring HTML to order, may jump aroundachieve visual layout seemingly randomly 57
  58. Tab order = HTML order 2 1 3 4 58
  59. Expected tab order12 4 8 53 6 7 9 59
  60. Frustrating mystery tab order18 3 7 49 6 5 2 60
  61. use the order property for good not evil  61
  62. Columns are too narrow 62
  63. 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
  64. Flex items can now wrap 64
  65. 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
  66. Final layout 66
  67. use flexbox now forprogressive enhancement  67
  68. How can I make this form:• Display on a single line with image• Vertically centered with image• Span full-width of container 68
  69. 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
  70. Inline-block achieves: Display on a single line with image Vertically centered with imageX Span full-width of container 70
  71. Different units make life hard Pixels Ems Some mystery percentage 71
  72. Make the text input flex#order, #order form { Make outer div and form display: flex; into flex containers align-items: center; } Vertically center kiddos#order form { Make form take up all flex: 1; } space next to image#order #message { Make text input take up flex: 1; all space in form left min-width: 7em; after label and button margin: 0 5px; } But don’t let it get crazy-small 72
  73. Use inline-block with flexbox 73
  74. 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
  75. 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
  76. Not so hot with no backgrounds Uneven spacing Don’t like these gaps 76
  77. Even spacing with flexboxnav ul { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; } 77
  78. justify-content(2011: flex­pack) flex-start (start) center flex-end (center) (end) space-between space-around (justify) (distribute) 78
  79. Use inline-block with flexbox 79
  80. 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
  81. Or use Modernizr scripthttp://modernizr.comnav ul { nav li { display: table; display: table-cell; width: 100%; } margin: 0; .flexbox nav li { padding: 0; display: list-item; list-style: none; }}.flexbox nav ul { display: flex;} 81
  82. prepare for the future 82
  83. 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 (http://www.flickr.com/photos/gilderic/6885830288/)Rocket icon by Jason Peters, fire icon by James Bond Icons, both from The Noun Project 83

×