Customizing Flexslider and Vertically Aligning Content
Hey friends!
This week I'm releasing another batch of 20 videos in the "Front End Development" collection. In these, we walk through multiple approaches to vertically aligning content - something that ends up being ridiculously tricky to do consistently - and also customizing the look of Flexslider, one of the most commonly used components for creating responsive slideshows.
Enjoy!
How the CSS 'flex' display, or 'Flexbox', works New!
(This one's FREE!)
In an ideal world, CSS would give us a sure-fire way to align our content vertically without having to bash our heads against a wall. In this video we explain the 'Flexbox' spec, which - among other things - gives us the ability to do just that, and how you can learn more about it.
How to use Flexbox to vertically align a block element New!
Here we apply the Flexbox model to our slideshow content and sit back, pleased at the easy with which we were able to accomplish this task.
Why using Flexbox doesn't make sense for every project New!
In this video we explain that while Flexbox is pretty much ideal in terms of the freedom and flexibility it gives us, it's not ideal when it comes to browser support, and there's no JavaScript polyfill out there that will help us get what we need. So for this project, we have to abandon this simple solution and dig around a bit more for something that works.
Why we can't vertically align compound elements with the 'vertical-align' property New!
Having let go of the idea of the promise of Flexbox, we look into some other options for vertical alignment, starting with the deceptively named 'vertical-align' property. Ultimately, this won't work for what we need, but we get some insight into why.
Why vertically aligning with 'line-height' doesn't work for multi-line elements New!
In previous vertically aligned elements, we've used the 'line-height' property. In this case, however, that's not going to work. Onward!
How HTML tables work and why they were once used for layout New!
We've sure made it a long way in this series without discussing tables. In this video we talk through the basic HTML table syntax, and explain why table cells have historically been a go-to solution for challenging layout issues.
How to make any element work like a table cell with CSS New!
With modern CSS, we can make any element behave like any other element. Here we look at using the 'table-cell' display value to attempt yet another go at getting vertical alignment to work.
Using the absolute positioning and negative margin solution for vertically aligning an element New!
In this video we continue exploring various solutions to issue of vertically aligning an element. This one uses position and margin, and works well for a single group of elements, but not as great for multiple slides in a sider.
How to use a CSS transform to vertically align an element New!
(This one's FREE!)
After working through number vertical alignment solutions, we've finally come to the one that's most ideal for our situation. In this video we use a CSS 'transform' to position the element halfway down its container. Nice.
Reviewing browser support for CSS transforms New!
As with most of the newer CSS properties, it's good to check out browser support before we standardize on a solution that uses them. In this video we hop over to caniuse.com to see how we're doing for support of the 'transform' property. Spoiler: Prospects look good.
