Lara Schenck

Lover of programming, maker of monsters

.u-glue: A positioning pattern (algorithm? API?)

.u-glue is a CSS utility class (or what I would call an algorithm) that provides an API for positioning an element absolutely over another element. We are using it at PMC, and it’s proven a useful model!

Yellow boxes being positioned in the corners of a green box.

Quick note!

In this post, I’m using some unusual words along with CSS – namely things like algorithm, API, consume, etc. I’m still figuring out exactly how to use this terminology with CSS, but I might be onto something…or not! Time will tell. For more information, check out my talk, The Algorithms of CSS, and this post explaining how CSS is a programming language.

Naming is hard. Okay, on to .u-glue.

We are using .u-glue at PMC on a couple of projects, and it’s been both a helpful addition to our design-to-development language, and is a step in the right direction for reducing CSS redundancy across the products. I’m excited to see what other tools like this emerge! For now though, let me introduce a refined version of .u-glue.

(also, if you’re interested in more about my work at PMC, check out the Designgineering Chronicles!)

Introducing: .u-glue

.u-glue is a utility pattern that provides an API for positioning an element absolutely over another element. It makes use of the .u-* namespace to indicate it is a utility in nature, not semantic class.

(However, in our naming system at PMC, there should be a distinction between tiny, atomic utilities and one like .u-glue that is more involved – could algorithm be a term for a more involved layout utility? Perhaps denoting it with an uppercase character, .u-Glue? Again, time will tell.)

Here is an example of .u-glue in action:

See the Pen .u-glue: A CSS API/Algorithm/Thing by Lara Schenck (@laras126) on CodePen.

To use .u-glue, one must apply the class .u-glue-parent to the direct parent of the glued item. On the glued item itself, the class .u-glue should be applied, along with an attribute data-glue-corner that contains terms identifying the corner in which the item is to be glued. The supported string values are top, bottom, right, and left. The default value for data-glue-corner would be the usual default values applies to an absolutely positioned element.

This iteration of .u-glue also contains progressively enhanced support for a transform on the glued item by way of a custom property, --u-glue__transform, that can be set within a separate selector targeting the same element as .u-glue.

At PMC our version of .u-glue does not make use of a data attribute (or this custom property)…yet. Some of our sites use data attributes for JS hooks which is a pattern I quite like, and I don’t want to introduce them for CSS until we figure out a very clear way of distinguishing the naming. Instead, we use modifiers like .u-glue--top-right.

Example

In the markup below, the glued item will appear in the bottom right corner of its parent. The parent must either have a height applied to it directly, or should obtain a height from a non-glue child such as the image in this example.

<figure class="u-glue-parent">
    <figcaption class="u-glue c-tag" data-glue-corner="bottom right">Glued Item</figcaption>
    <img src="https://picsum.photos/350/200" alt="" />
</figure>

Then, if you would like to apply a transform to the element, in your project – i.e. that one consuming .u-glue, you can set a value for the custom property:

.c-tag {
    // Other .c-tag styles (or whatever you name this element)
    @supports( --color: blue ) {
        --u-glue__transform: translateX(50%);
    }
}

While this may seem like a straightforward task to those who understand positioning and transforms, the concepts involved can be a challenge for those new to CSS.

The .u-glue algorithm/pattern/API can be used as both a tool for learning positioning, as well as a tool enabling developers who do not write CSS regularly to use position one element on top of another element responsibly.

The Source of .u-glue

And here is .u-glue, ready for you to drop in any of your projects! Make sure it is included before the styles on any elements that use .u-glue so that the custom property is initialized appropriately: 

.u-glue-parent {
	position: relative;
}

.u-glue {
	position: absolute;
	
	// These don't need to be nested, but it seems nice for
	// readability...unless it's a problem for *specificity*.
	&[data-glue-corner*="top"] {
		top: 0;
	}
	
	&[data-glue-corner*="left"] {
		left: 0;
	}
	
	&[data-glue-corner*="bottom"] {
		bottom: 0;
	}

	&[data-glue-corner*="right"] {
		right: 0;
	}

	@supports( --color: blue ) {
		transform: var(--u-glue__transform, initial);
	}

}

What’s next for .u-glue?

In the future – and especially with what we are doing at PMC – I would love to see little algorithms/patterns/things like this available in something like npm. They can be included on an as-needed basis and managed in a central location, documented and tested.

Yes, tested!

This isn’t going to happen for a while, likely, but I’m very excited about the prospect of unit testing layout algorithms such as .u-glue. I’m definitely not the first person to think of unit testing CSS, and this tool, Quioxte, looks like a good start. Ooh, I’m very excited about this now!!

More soon (but probably not that soon).

Lara

, , , , , ,