TCorner is a serialized blog post from our newest Labs member, Taylor Cornelius.  TCorn comes from a design background and these are his adventures on the development side of the fence.

In a recent codepen I experimented with flexbox, a fairly recent addition to css which solves the troubles of floating elements. The html was structured as five div panels inside a containing panels div. Each panel given a class of panel and a unique panel class.

To style I added a background image to each panel in the CSS. On the panels div I set display: flex. What this does is stacks all items in container horizontally from left to right in a container.

Each panel also receives a display: flex property. This caused the content inside to stack next to each other. Next was added a flex-grow: 1; property. This specifies an equal width of an item relative to the rest of the flexible items in the same container. Each panel becomes the same width. Then came another flexbox css property, justify-content: center. This helps distribute extra space on each side of the text content in each panel. I added a flex-direction: column property stacked each paragraph inside the panel. It defined a y-axis of content within each panel. Finally, I added a justify-content: center property which is something that works with flexbox to align items in a flex container to the horizontal middle of their container.

After this I wanted to give vertical space to the paragraphs inside each panel. I added another display: flex; a flex-grow: 1; a justify-content: center; and align-items: center; to all p tags within a panel.

Finally, I added styles to the first and last paragraphs to come in from off screen when an open-active class is applied to each panel. I did this with transform: translateY(); I also added some transitions to the panel class of font size, flex and background. The font size and flex transitions have a cubic-bezier animation that gives them a slight bounce effect. Each panel is set up to receive an open class which applies a flex-grow: 5; and a font change. The flex-grow will make each panel with a class of open 5 times the width of it’s neighbor.

To finalize all of the animations I had to add a custom script. I used document.querySelectorAll(‘.panel’) to select all divs with the class of panel. Next I created two functions. The first function was to toggle the class of open to whichever panel the function was called upon. The second function was to take in an event parameter and if, when an event fired, the property name contained ‘flex’ there would toggle the open-active class on a panel. Finally I created two forEach statements that take in a panel as a parameter and return event listeners on that panel. One click event listener and one transitioned event listener. When a panel is clicked on it grows and the text size changes, then the transition event fires which slides in the text into view. The final codepen is referenced below.