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

Posted October 8, 2018 in Web Development


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).

Comments

What do you think? Do you have any questions, thoughts, or related links to share? Did I make a mistake in my post?

Submit a Comment