Flexbox vs. Grid

At first glance, 'flexbox' and 'grid' in CSS appear to solve similar problems in different ways. They are both suited to very different layouts however.

Flexbox vs. Grid.

Access CSS Variables From a Database via db-connect

In CSS, db-connect is a misunderstood but immensely useful technique for connecting to databases directly from vanilla CSS in order to access stored properties.

Access CSS Variables From a Database via db-connect.

Detecting and Dealing with Website Theft

Web development by its nature is difficult to protect from copyright theft. There are a few things you can do to protect yourself and your ownership though..

Detecting and Dealing with Website Theft.

Rendering Contentful Rich Code Snippets in Gatsby

Gatsby + Contentful is a powerful and formidable combination. However, the inability to render code blocks is a real issue with a not-straightforward solution..

Rendering Contentful Rich Code Snippets in Gatsby.

CSS Focus Styles for Keyboard Users Only

Overriding :focus outline without providing a viable alternative should never be an option. Here I discuss implementing alternatives that keep UI and UX happy.

CSS Focus Styles for Keyboard Users Only.

Parent Selectors in CSS and Sass

The omission of a parent selector within CSS has been a long-standing weakness within the spec. Sass does provide a sort-of answer though.

Parent Selectors in CSS and Sass.

Using CSS to Deal with Widows

In typography, a 'widow' is the last line of a paragraph, which falls alone on the following page or column. On the web, this can be easily tackled with CSS.

Using CSS to Deal with Widows.

Reducing Image Brightness with CSS

The brightness filter is a very straightforward and easy way to edit the appearance of an image (or other HTML elements) directly via CSS.

Reducing Image Brightness with CSS.

Interpolation: Sass Variables Inside Calc()

One of the most common pitfalls for developers new to Sass is string interpolation: why isn't their var behaving as they expect when inside a calc() function?

Interpolation: Sass Variables Inside Calc().

Break Out of CSS Nesting with Sass

On the occasion that you need to break a single (or several) CSS rules out of the nested structure of your CSS, the Sass @at-root rule is exactly what you need.

Break Out of CSS Nesting with Sass.

Advanced SASS: Loops

SASS is an incredibly powerful tool for enhancing and automating your CSS development. Today, I discuss using loops to programmatically generate styles.

Advanced SASS: Loops.

Hiding Empty Elements with CSS

A very brief tip about using the CSS :empty pseudo-class to hide elements when they contain no content.

Hiding Empty Elements with CSS.

Disabling Text Selection Highlighting with CSS

User-select makes stopping visitors from selecting items on-page easy, and can be combined with ::selection to capture the browsers where user-select is absent.

Disabling Text Selection Highlighting with CSS.