Control CSS Container Layouts with place‑content
Use CSS place‑content to align grid and flex content, comparing align‑content, justify‑content, place‑items, syntax, examples, and layout limits.
Articles
Sass
Sass (Syntactically Awesome Stylesheets) is a preprocessor scripting language which is compiled into CSS (Cascading Style Sheets). Although the CSS standards are generally starting to catch up now, what Sass offers that conventional CSS lacks is the likes of variables, mixins, and functions, making CSS more maintainable and extendable.
Below you will find a subset of articles from my blog specifically about Sass. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are twenty‑five collected together for you below.
Control CSS Container Layouts with place‑content. Control CSS Container Layouts with
Simplify Your Layout CSS with place‑items. Simplify Your Layout CSS with
place‑itemsCSS `place‑items` is a shorthand property that aligns items inside grid and flex containers. Here, we discuss its syntax, use cases, and practical examples.
Understanding the CSS :where() Function. Understanding the CSS
:where()FunctionThe CSS `where()` function groups selectors without specificity, simplifying overrides. Here, I explain its use, benefits, and why it can reduce code clarity.
Improve Page Performance with content‑visibility. Improve Page Performance with
content‑visibilityUsing the CSS content‑visibility property we can control how an element interacts with the browser render, controlling when or how an element content renders.
Using Container Queries in CSS. Using Container Queries in CSS
Container queries are a powerful new feature in CSS that allow us to move away from view‑port based responsiveness to more explicit isolated areas of the page.
Using the CSS :has Pseudo‑Class. Using the CSS
:hasPseudo‑ClassThe :has CSS selector allows you to select a parent element based on whether it has a certain child or children. It's powerful but it has some limitations.
Use CSS to Change the Mouse Cursor. Use CSS to Change the Mouse Cursor
Change the mouse cursor with CSS using built‑in cursor values or custom assets, while keeping interaction cues useful and avoiding distracting effects.
Flexbox vs. grid. Flexbox vs.
gridAt first glance, 'flexbox' and 'grid' in CSS appear to solve similar problems in different ways. They are both suited to very different layouts however.
Access CSS Variables from a Database via db-connect. Access CSS Variables from a Database via
db‑connectIn CSS, db‑connect is a misunderstood but immensely useful technique for connecting to databases directly from vanilla CSS in order to access stored properties.
Detecting and Dealing with Website Theft. Detecting and Dealing with Website Theft
Website theft is frustrating, but there are practical ways to spot it and respond. This guide covers copied text, copied code, and escalation options.
Rendering Contentful Rich Code Snippets in Gatsby. Rendering Contentful Rich Code Snippets in Gatsby
Contentful rich text and Gatsby work well together until code snippets enter the picture. This guide shows how to render inline and block code cleanly.
CSS Focus Styles for Keyboard Users Only. CSS Focus Styles for Keyboard Users Only
Keep CSS focus styles accessible without showing outlines after every mouse click, using keyboard‑only patterns, :focus‑visible thinking, and UX trade‑offs.
Parent Selectors in CSS and Sass. Parent Selectors in CSS and Sass
Understand parent selectors in CSS and Sass, including how ampersand nesting works, :has() context, BEM trade‑offs, specificity, and readability.
Using CSS to Deal with Widows. 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.
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters, including brightness(), animation, dark‑mode eye strain, visual treatment, and where filter effects are useful.
Interpolation: Sass Variables Inside calc(). 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?
Break Out of CSS Nesting with Sass. 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.
Advanced Sass: Loops. Advanced Sass: Loops
Use Sass loops more deliberately, including while, for, and each patterns, generated selectors, readable output, and where loops beat repetition.
