Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2013 (Bloomington, MN) with: Mehul Saiya
Ben Nadel at cf.Objective() 2013 (Bloomington, MN) with: Mehul Saiya@mehulsaiya )

Styling A Movie Cast List Using A Definition List And CSS Flexbox

By Ben Nadel on
Tags: HTML / CSS

For me, Flexbox is a game-changer. It's probably the most exciting thing to happen to CSS since absolutely-positioned elements and rounded corners. Last night, while reflecting on the power of Flexbox, I had an idea for a fun little code-kata: trying to recreate the styling of a movie cast list - the one with a center-line of dots - using CSS Flexbox and an HTML Definition List.

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

My strategy here is to use a nested Flexbox layout. Each item in the definition list would be a flexbox layout that separates the "Movie Character" from the "Cast Member". Then, the "Movie Character" flex item would, itself, be a flexbox layout that contains the "Movie Character" and the string of dots. In order for the string of dots to fill up the empty space, it will need to "grow" inside of the "Movie Character" layout, which itself has to grow to take up the space:

Nested flexbox strategy for rendering a movie cast list.

Now, we could have avoided the nested flexbox layout if I had an explicit HTML element for the dots. This explicit element could have just grown to take up all the space in-between. However, in an attempt to keep the HTML as "semantic" as possible, I wanted to use a Definition List, which only allows two items: DT and DD. As such, I am implementing the dots using the :after pseudo-element inside of the flexbox item.

The dots are then implemented as a border-bottom styling on the :after pseudo-element. I did attempt to get fancy and use border-image based on this blog post by Lucas Lemonnier; however, the dots came out looking kind of janky. So, I reverted back to using border-bottom:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />

	<title>
		Styling A Movie Cast List Using A Definition List And Flexbox
	</title>

	<style type="text/css">

		a {
			color: red ;
		}
		
		dl.cast-list {
			font-family: monospace ;
			font-size: 20px ;
			width: 500px ;
		}

		dl.cast-list div {
			/* Setup the DT (character) and DD (cast) items as a flexible layout. */
			display: flex ;
			margin: 5px 0px 5px 0px ;
		}

		dl.cast-list dt {
			/*
				Setup the DT element as a NESTED flexible layout. This will control the
				IMPLICIT TEXT element (character) and the :after pseudo-element (dots)
				layouts.
			*/
			display: flex ;
			/* Setup the DT (character) element to grow and take-up space. */
			flex: 1 1 auto ;
			margin: 0px 0px 0px 0px ;
		}

		dl.cast-list dt:after {
			border-bottom: 2px dotted #787878 ;
			content: "" ;
			/*
				Setup the pseudo-element (dots) to grow and take-up space. This will fill
				the white-space with "dots" because it growing inside of another layout
				which is also growing.
			*/
			flex: 1 1 auto ;
			margin: 0px 12px 5px 12px ;
		}

		dl.cast-list dd {
			/* Setup the DD (cast) element to shrink, allow for dots to fill space. */
			flex: 0 1 auto ;
			margin: 0px 0px 0px 0px ;
		}

	</style>
</head>
<body>

	<h1>
		Styling A Movie Cast List Using A Definition List And Flexbox
	</h1>

	<h2>
		<a href="https://www.imdb.com/title/tt0168987/">
			Better Than Chocolate
		</a>
	</h2>

	<dl class="cast-list">
		<div>
			<dt>Lila</dt>
			<dd>Wendy Crewson</dd>
		</div>
		<div>
			<dt>Maggie</dt>
			<dd>Karyn Dwyer</dd>
		</div>
		<div>
			<dt>Kim</dt>
			<dd>Christina Cox</dd>
		</div>
		<div>
			<dt>Frances</dt>
			<dd>Ann-Marie MacDonald</dd>
		</div>
		<div>
			<dt>Carla</dt>
			<dd>Marya Delver</dd>
		</div>
	</dl>

</body>
</html>

Now, you will notice that each item in the DL is wrapped in a DIV. While this used to be considered invalid markup, the DL element now allows items to be wrapped in a DIV (thank you Mozilla Developer Network!). By wrapping each item in a DIV, it allows us to pull each DT and DD element pair into an isolated flexbox layout.

If we load this in the browser, we get the following output:

Movie cast list rendered with DL, DT, and DD tags, styled using Flexbox.

The dots in the border-bottom aren't the most beautiful dots; but, I think they are sufficiently well styled. What's nice about using border is that the browser does its best to no cut any dots in half. So, it might space them a bit oddly at parts; but, from what I've read, the browser will prioritize making the "corners" of the border look uniform.

Anyway, just a fun little Friday code-kata to close the week. I just love me some CSS Flexbox. I know that people are gaga for CSS Grid. But, Flexbox was my first love of the new CSS layouts.



Reader Comments

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
NEW: Some basic markdown formatting is now supported: bold, italic, blockquotes, lists, fenced code-blocks. Read more about markdown syntax »
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.