Responsive Design

CSS: Relatively Centering Absolutely Positioned Elements

Yup... you you can do it so long as you're willing to do a little light math--and you can even do it in a somewhat responsive way. Here's a quick overview of the various ways to center an element with absolute positioning.

Background: CSS Centering

Centering and CSS have always been a challenge; I don't think this all that contentious a claim. If you think about it for more than a second, though, you can imagine why this might be the case: center is a relative term--it can only be defined within the context of another element. In order to center something, then, you have to establish a relationship.

Flexbox: Styling Top Row Items in Scalable Columns

Touching again on the complexity of making flex-box columns scalable; this time I focus on one of the design challenges with this layout. When child items are burdened with the limits of CSS, sometimes the solution is to think outside of the box, literally, and work with the parent instead.

Background: the Design

I love Flexbox--it's a fundamental in responsive design. As empowering a device as it is, though, it's not without it's limits. It just so happens that I work with a designer who has a real knack for exposing these limits. The minute I think I've got flexbox under control, she'll throw me a design that challenges my every conception of what flexbox is or how it should work. Let's look at a specific point and case--a design I was recently asked to build out: