Vertical Alignment of non-related elements — A responsive approach
Have you ever tried to align a few items in a flexible row? Or making your carousel items have the same height, without fixing a single height value that will break everything? Or tried to reach some vertical symmetry in your cards and keep their responsiveness? These are some common problems that may appear as you try to achieve vertical alignment with flexible elements!
This is a very tricky problem that sometimes can take some precious time of development. Attempting to solve this problem, we develop a family of classes: VA. The VA classes try to automate the process of creating vertical alignment with given elements in a row. But, for you to understand what VA classes are, and how it works, we will first go through this problem, to better understand its issues, and how VA can answer that.
The Responsive Web Design
Working with responsive web design is wonderful! The responsive approach using grid layouts and flex display elements makes the life of thousands of developers a lot easier. Libraries like Bootstrap had a huge impact on web development in the last years (And if you are a developer and don’t know what bootstrap is, take a break to read something about Bootstrap). The idea is straightforward: With a few classes that follow the same patterns of declaration, you can save hours of unnecessary effort, and you can do that with a simple HTML link in the head of your page!
Therefore, the use of Bootstrap in web development became almost essential, in the most. However, a simple package can’t contain everything, so the classes have their own scope, and the groups of classes can only attend to a limited range of properties and behaviors.
Bootstrap has a generalization of the basic CSS properties and their variations, and a generalization of common elements expected behaviors and their variations. For example, an element size has CSS properties that involve its height and width, and this same element can have an expected behavior with its alignment. To set a responsive size and an automatic horizontal alignment, you just set the “col” and “mx-auto” classes, letting the margin property to do the alignment.
So, as Bootstrap uses a grid layout, the responsive behavior of images, texts, and other elements are naturally, horizontally oriented. Therefore, horizontal alignment becomes a very simple behavior to apply, still, that’s not the case when we talk about vertical alignment.
Vertical Alignment and Height Variations
Let’s suppose that we have elements, with internal elements that have their height variable:
As we are dealing with responsive behavior, the height of the elements will vary in relation to its width, and the width will vary in relation to the window’s width. So, if the content inside of the elements has different dimensions, at some point, their height can be different, and then they will have different internal configurations, which causes them to be misaligned in a bigger context but not necessarily to the element context.
This alignment of the elements and their children’s elements is an alignment that goes across the relations of the DOM. This is a configuration of the elements, that is invisible to the DOM because this elements that we want to be aligned doesn’t have a direct relationship with each other. So, even if you work with vertical-align properties, using display flex and other relative dimensional properties, it will not create this consistency if you don’t set a fixed height. And if you just set a fixed height to the element, you will keep this consistency and the alignment, but you will lose the flexibility of the element, and as independent variations occur, flaws and gaps may appear, as elements may overlap each other.
To an element that has a flexible height, it’s height will be the sum of the heights and spacing that its internal elements have (let “m” be an abstraction of a margin and “e” an abstraction of an element, in relation to the x or y-axis):
So what we need, to create this multi-layer alignment relation, is that the elements should have the same heights in a row, internally and externally, at the same time that the height still varies in relation to the width. And that’s when the VA method comes in.
The VA Method
VA works with the generalization of this alignment. So it will find a consistent height value for a given list of elements in a row, even if they are totally disconnected, because VA has its own abstract relationship of elements, and you specify this with its classes. With this generalization, VA works in two main contexts: External and Internal.
The external involves the relationship between the row, that we will call a container, and it’s elements, that we will call items.
The internal refers to the relationship of these items with their own internal elements, elements that have their height variable in relation to the width, like images and texts. In the case of the internal context you can have multiple layers of elements, that will be aligned in parallel with the layers of the other items. But in the external context, you only have one layer, that contains all the items:
And, with an abstract notation:
With that structure, VA groups Items, Images, and Texts. So the height consistency will be calculated for each one of these groups of elements. So what is this value supposed to be? Well, this value should be variable as the width of the window is variable throughout the screen sizes of all devices. With bootstrap, we can get that height just by following the col-row rule, and with an img-fluid class to the images. As we want all of them to be equal, we can pick the greatest height among elements in a row, so there are no worries about their dimensions overlapping with other elements.
The way that VA organizes the elements it’s by grouping non-related elements in a row, using the abstract notation, we can group by the m-index. As the highest heights are found for every internal row, the height of an item would be the sum of these values, plus the spacing, as we have spaces between these internal elements. So we subtract all the elements heights to the item, getting the spacing height; therefore, the height of the items always will be independent of the previous values of their internal elements. However, this means that if you change the spacing in these elements, their final height will be affected, so keep in mind that you could create different heights by setting different spacing heights in your elements.
After that, VA will record the relationship between height and width for all elements, and as the window dimensions change, the VA method will be triggered to readjust all the elements.
And now, for those who must be wondering: “Okay, very cool, I get it. But what I need to do to use this VA method to align my stuff?” — It’s a lot easier than you think.
Using VA classes
Firstly you need to copy the utils.min.js file and save it into your project. Then, to add this behavior to elements, you must follow the structure of VA method, so this again:
And then, as simple as may seem, its just follow this pattern, adding the following classes to your elements. Examples of Using and Not Using VA Function:
You can find the code of VA method, the documentation and other CSS utilities in our repository:
This Library is just on the beginning, so its functionalities may contain some limitations, also we don’t have a lot of features at the moment, but if this could help you, feel comfortable to contribute, copy and share this code whenever it can be useful.
