.a-pull: A CSS algorithm for pulling one box outside another

Here’s a quick write up about a CSS algorithm we just created at PMC! It seems like it will be useful in future projects, and we now have a programmatic term to use to refer to this kind of UI design pattern.

,
Screenshot of UI using the pull CSS algorithm

The second big “move the design system forward” project at PMC contains two sites in one, and that is a task ripe for some new CSS algorithms. Today, Yahil Madakiya and I came up with a “pull” algorithm, for a specific UI design characteristic.

The two designs of a module that inspired the “pull” algorithm:

A screenshot of two differently themed designs of a module containing a title "Related articles" with a images bleeding over containing boxes. Below the images are text reading "The Best Shows to See in Dusseldorf" and "Critic's Guide To New Delhi: As India Art Fair Returns, the Best Shows in Town"
The two themes of the “Related Links” module in the current redesign project going on at PMC. a-pull is used to achieve the effect of the image being “pulled” beyond its containing box.

Here is a CodePen with the algorithm to “pull” one element outside another using a negative margin:

See the Pen CSS Algorithm: Pull by Lara Schenck (@laras126) on CodePen.

The use of the custom property here opens the algorithm for extension, in line with the Open/Closed Principle that is part of the SOLID principles for object oriented programming. Here is an example of the open/closed principle in Java, and the concept is equally relevant to CSS!

In the algorithm above, we extend a-pull by creating additional a-pull-5 or a-pull-1 classes to apply different values to the pull. We can also create a-pull-down or a-pull-left variations as needed.

With this language, the PMC designer can now annotate future designs containing this pattern with an indication to use a-pull, and developers will know exactly what to do. Also, in discussion, pair programming, and code reviews, developers will have a specific, programmatic term to use when discussing the implementation of the design.

What do you call this UI characteristic? Is there a different name for it than “pull”? How have you integrated this algorithm into a CSS code-base?

One important note is that in our system at PMC, Larva, we use very small, “atomic” or “functional” CSS classes along with a system for re-using templates of HTML so that we can re-use strings of classes. If your CSS naming is more oriented around BEM and naming according to the UI, this algorithm’s implementation might look more like a Sass mixin that is applied to different selectors.