Frontend meetup 2013 08-06

458 views

Published on

How to use inline-block and vertical align for a carousel.

  • Be the first to comment

Frontend meetup 2013 08-06

  1. 1. How I Learned to Stop Worrying and Love the inline-block by Robert Szaloki
  2. 2. Create a carousel
  3. 3. The carousel <section> </section>
  4. 4. List of items <section> <ol></ol> </section>
  5. 5. Navigation <section> <ol></ol> <button>&lang;</button> <button>&rang;</button> </section>
  6. 6. The code <!DOCTYPE html> <html lang="en-us"> <head>...</head> <body> <section data-component="carousel"> <button data-carousel-nav="prev">&lang;</button> <button data-carousel-nav="next">&rang;</button> <ol> <li></li> <li></li> <li></li> … </ol> </section> <hr> …
  7. 7. The code <!DOCTYPE html> <html lang="en-us"> <head>...</head> <body> <section data-component="carousel"> <button data-carousel-nav="prev">&lang;</button> <button data-carousel-nav="next">&rang;</button> <ol> <li></li> <li></li> <li></li> … </ol> </section> <hr> … position:relative position:absolute; top:0; bottom:0; height:40px; margin:auto 0; width:40px; … margin:0 40px;
  8. 8. Dimensions expand 40px 40pxexpand 40pxautoauto bottom:0; top:0;
  9. 9. Carousel item <li> <strong>....</strong> <img> <button>...</button> <p>...</p> </li>
  10. 10. Carousel item <li> <strong>....</strong> <img> <button>...</button> <p>...</p> </li> display:block display:inline; max-width:100% float:left; width:100% display:inline-block; vertical-align:baseline; text-align:center; white-space:normal; box-sizing:border-box; width:25%; padding:0 10px;
  11. 11. Almost... <!DOCTYPE html> <html lang="en-us"> <head>...</head> <body> <section data-component="carousel"> <button data-carousel-nav="prev">&lang;</button> <button data-carousel-nav="next">&rang;</button> <ol> <li></li> <li></li> <li></li> … </ol> </section> <hr> … margin:0 40px; white-space:nowrap; overflow:hidden; transition:all 0.3s ease-in-out;
  12. 12. How will it move? <ol> width text-indent:-[<ol> width]px
  13. 13. DEMO! https://c9.io/rszaloki_1/carousel/workspace/index.html
  14. 14. Debug mode
  15. 15. But why? ● the <li> elements are now inline elements, so they create a line box
  16. 16. Line box? Line of text! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac gravida sapien. Nullam tristique congue pharetra. Nullam fringilla pulvinar ipsum in adipiscing. Donec porttitor justo tortor. Sed risus ipsum, porta ac dui vitae, faucibus bibendum purus. Integer congue scelerisque tristique. Line boxes <div> Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit. Aenean ac</b> gravida sapien. Nullam tristique congue pharetra. <i>Nullam fringilla pulvinar ipsum in adipiscing.</i> Donec porttitor justo tortor. Sed risus ipsum, porta ac dui vitae, faucibus bibendum purus. Integer congue scelerisque tristique. </div>
  17. 17. Height of a line box inline-block <img> Text the tallest in the line or the line-height value vertical-align:top;
  18. 18. But why? ● the <li> elements are now inline elements, so they create a line box ● vertical-align:baseline means, the elements in a line box should align with the parents baseline
  19. 19. vertical-align ● baseline: align to the parents baseline ● top: top of the line ● middle: Aligns the middle of the element with the middle of lowercase letters in the parent. (???) ● <value> ● <percentage> “The baseline of an 'inline-block' is the baseline of its last line box in the normal flow”
  20. 20. But why? ● the <li> elements are now inline elements, so they create a line box ● vertical-align:baseline means, the elements in a line box should align with the parents baseline ● since the <p> is not in the rendering flow (because it’s floating) the current baseline is the baseline of the button’s text. ● only the inline blocks are in the parent, so they will align nicely
  21. 21. Uhm, wait! MIND THE GAP
  22. 22. <ol>n t <li>...</li>n t <li>...</li>n t <li>...</li>n </ol> I see white spaces! MIND THE GAP white spaces
  23. 23. HTML is data ● you are not programming in HTML ● it’s not a poem, it’s a structured, linked, semantic data ● don’t add white spaces, just for formatting ● the DOM is your target, not the View Source
  24. 24. “Uglify” <ol> <li>...</li> <li>...</li> <li>...</li> </ol> <ol> <li>... </li><li>... </li><li>... </li> </ol>
  25. 25. Add interaction - Javascript Let’s see the code!
  26. 26. Add interaction - Javascript ● use event delegation ● use Event.currentTarget and Event.target ● use jQuery, but you don’t need jQuery plugins ● define behaviours
  27. 27. THANK YOU! Questions? http://c9.io/rszaloki_1/carousel contact: robert.szaloki@euedge.com

×