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

Posted October 8, 2018 in Tutorials+Tips


Quick note!

In this post, I’m using some unusual words along with CSS – namely things like algorithm, API, consume, etc. Rather than offering a definition up front for a CSS Algorithm-API-Pattern-Thing, I must refrain from doing so because I’m still figuring that out for myself!

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.

Introducing: .u-glue

.u-glue is a utility class/algorithm/pattern/whatever-you-want-to-call-it 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.

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 (could I say invoked?), along with an attribute data-glue-corner that contains a string 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 is top left.

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.

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.

This API/algorithm/pattern/whatever-you-want-to-call-it 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 .u-glue algorithm/API/thing (lol these words! what!!) – drop this in any of your projects to use it! And make sure it is included before the styles on any elements that use .u-glue:

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

.u-glue {
	position: absolute;

	// We don't actually need rulesets for "top" nor "left" 
	// because they are the defaults! But it makes the code
	// more readable to include them in the attribute value.
	
	&[data-glue-corner*="bottom"] {
		bottom: 0;
	}

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

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

}

In the future – and and 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!

Blog post coming soon (but probably not that soon): Testing CSS APIs/Algorithm/Things.

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