frontend meetup 2013 08-06
DESCRIPTION
How to use inline-block and vertical align for a carousel.TRANSCRIPT
![Page 1: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/1.jpg)
How I Learned to Stop Worrying and Love the
inline-block
by Robert Szaloki
![Page 2: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/2.jpg)
Create a carousel
![Page 3: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/3.jpg)
The carousel<section></section>
![Page 4: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/4.jpg)
List of items<section><ol></ol></section>
![Page 5: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/5.jpg)
Navigation<section><ol></ol>
<button>⟨</button><button>⟩</button>
</section>
![Page 6: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/6.jpg)
The code<!DOCTYPE html><html lang="en-us"><head>...</head><body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</button> <ol> <li></li> <li></li> <li></li> … </ol> </section> <hr>…
![Page 7: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/7.jpg)
The code<!DOCTYPE html><html lang="en-us"><head>...</head><body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</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;
![Page 8: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/8.jpg)
Dimensions
expand
40px 40pxexpand
40pxauto
auto
bottom:0;
top:0;
![Page 9: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/9.jpg)
Carousel item<li>
<strong>....</strong><img><button>...</button><p>...</p>
</li>
![Page 10: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/10.jpg)
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;
![Page 11: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/11.jpg)
Almost...<!DOCTYPE html><html lang="en-us"><head>...</head><body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</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;
![Page 12: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/12.jpg)
How will it move?
<ol> width
text-indent:-[<ol> width]px
![Page 13: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/13.jpg)
DEMO!
https://c9.io/rszaloki_1/carousel/workspace/index.html
![Page 14: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/14.jpg)
Debug mode
![Page 15: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/15.jpg)
But why?
● the <li> elements are now inline elements, so they create a line box
![Page 16: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/16.jpg)
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>
![Page 17: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/17.jpg)
Height of a line box
inline-block<img>
Text
the tallest in the line or the line-height value
vertical-align:top;
![Page 18: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/18.jpg)
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
![Page 19: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/19.jpg)
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”
![Page 20: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/20.jpg)
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
![Page 21: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/21.jpg)
Uhm, wait!
MIND THE GAP
![Page 22: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/22.jpg)
<ol>\n \t <li>...</li>\n \t <li>...</li>\n \t <li>...</li>\n</ol>
I see white spaces!
MIND THE GAP white spaces
![Page 23: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/23.jpg)
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
![Page 24: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/24.jpg)
“Uglify”
<ol><li>...</li><li>...</li><li>...</li>
</ol>
<ol><li>...</li><li>...</li><li>...</li>
</ol>
![Page 25: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/25.jpg)
Add interaction - Javascript
Let’s see the code!
![Page 26: Frontend meetup 2013 08-06](https://reader030.vdocument.in/reader030/viewer/2022020307/559b85131a28ab23458b4729/html5/thumbnails/26.jpg)
Add interaction - Javascript
● use event delegation● use Event.currentTarget and Event.target● use jQuery, but you don’t need jQuery
plugins● define behaviours