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

Posted October 1, 2019 in Web Development


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.

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