CSS

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.

Tags

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:

Tags

SASS Compilers: When Your Drupal Theme Won't Update Even After Clearing Cache

Ever feel like you basically spend the entire day hitting your head against a wall? It happens to the best of us--particularly when it comes to elements of DevOps we don't deal with on a daily basis. I spent far longer than I care to admit today trying to assess why my Drupal site theme wasn't updating despite holding my code to a microscope, and despite any number of cache clears. The culprit: the output path on my SASS compiler was set to the wrong folder. Seems like a novice mistake... which is why I'm commemorating it with a blog post: sometimes brain farts are just part of the job.

Background: A New Computer

That's right... I got tired of lugging my laptop between home and the office, so I setup a new computer over at the coworking space. Okay, technically, it's not a new computer at all; it's a 2011 Mac Mini Server running Xubuntu 20.04--still a perfectly reasonable computer for web development in 2021. But, that means "provisioning" the computer for my workflow. Thanks to Git, this is a pretty easy task: install a LAMP stack, clone the repository, setup drush aliases, import a DB, and we're basically good to go...

Except, not really.

Tags

Tag Manager: Fire Tag Only if CSS Class is Absent

I finally stepped away from Google Analytics and implemented Plausible's cookie-free tracking on the blog. Ironically, to implement Plausible's code, I used Google's Tag Manager (this doesn't compromise Plausible's code in any way; I just think it's sad that Google is still a crutch for my dev-ops). Since Plausible doesn't gather Personally Identifiable Information (PII), though, excluding my own usage on the site becomes a slight challenge; Google Analytics let's you exclude data based on IP--but, that's not an option with Plausible. With the help of Tag Manager, however, I can prevent Plausible's code from loading based on whether a CSS class is present on a DOM Element. When logged into Drupal, there are any number of CSS classes that are unique in the DOM. This provides a simple solution to excluding my own usage from Plausible's analytic data. Here's how to do that.

Step 1: Finding Unique Classes in the DOM

This technique isn't limited to excluding analytics tags. By finding unique classes in the DOM, you can setup both exclusion and inclusion rules for Tag Manager to fire a tag of any type. This is actually a pretty powerful ability. In my case, though, I need to find a CSS class (or classes) in the DOM that only appears when I'm logged into the blog. Drupal adds these kinds of classes throughout the DOM, but the most logical candidate, for me, is a class in the <body> tag.

Tags

CSS & Javascript: Flexbox Columns that Grow with Content

I've had a long standing problem with flexbox--particularly with flexbox columns. The proverbial Elephant in the Room has always been this: a mechanism for automatically letting content grow in one column (i.e., adding consecutive child items) and then overflow into the next doesn't really exist. Today, I look at a fix for this problem--and, all it takes is a little JavaScript.

Outlining the Problem

Let's look at flexbox columns and see what's at stake.

Tags

CSS Checkboxes and (More) Accessible Drop-downs

Here's a pure CSS solution to the challenge of styling input check-boxes. The check-boxes also act as a trigger for displaying hidden content via the :checked psuedo-class. You might use this mechanism as a means for putting together drop-downs and accordion-menus, although the technique is most applicable to HTML forms. You'll find some 508/WCAG considerations here to make this UI as accessibility compliant as possible.

Accessibility Disclaimer

I'm not an accessibility auditor, so don't take it for granted that what you find here is fully 508/WCAG compliant. I leave these kinds of determinations to proper auditors. Nonetheless, standards compliance is an issue I take seriously, and I've made every attempt to keep this code as accessible as possible. Use at your own risk. If accessibility isn't a thing for you, be damned with the consequences and have at it!

Tags

Javascript: Change Parent Styling if Child Element Exists

SASS/CSS can accomplish magic. Sometimes, however, its logic doesn't go quite far enough, and you need a little help from Javascript.

In Sass/Css, the rules of specificity allow us to create styling at a high level and then override it with minimal effort when it comes to more specific cases. For example, I could go into my site theme and write out a general rule: color all links red. When an exception to that rule arises, I can target the parent element of that specific link (a div, for example) to create a new rule: color all links red, but color any link with the parent X blue.

Tags

Subscribe to CSS