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