bbioonThemes
  • Home
  • Blog

Category: Front-end

Development, Front-end

Markdown in WordPress needs an escaping pass

WordPress has no Markdown parser in core, so the rendering is always yours to wire up. The tempting shortcut is to echo the parsed HTML straight out. On a WordPress site that string usually comes from user input, so it needs wp_kses before it reaches the page.

Read Article
Development, Front-end

Styling checkboxes with the CSS checkmark pseudo-element

::checkmark styles the tick of native checkboxes, radios and selects without touching markup, which matters when WooCommerce owns the template. Here’s how I’d ship it, with a plain fallback first, @supports as the gate, and a plan for testing in Safari.

Read Article
Accessibility, Design, Front-end

CSS letter-spacing animation on a real WordPress site

The letter-spacing reveal trick going around is a nice piece of CSS, but the demos hide two costs: it relayouts text on every frame, and transparent text still gets read aloud by screen readers. This is the version I’d ship.

Read Article
Development, Front-end

Modern CSS centering: you probably don’t need those layout hacks

Most centering doesn’t need a flex or grid hack anymore. This post covers align-content on plain block elements, text-box trimming for text that actually looks centered, the safe keyword, and anchor-center for tooltips.

Read Article
Development, Front-end

CSS sibling-index() replaces your nth-child stagger hacks

Staggered animations used to mean a pile of nth-child rules or an SCSS loop. CSS sibling-index() and sibling-count() handle it in the stylesheet, however many items the grid has, with no JavaScript.

Read Article
Bug Fixing, Development, Front-end

Cross-document view transitions: the gotchas that break your UX

Cross-document view transitions give multi-page sites a native-app feel, but they fail silently. Here’s how to replace the deprecated meta tag, handle the 4-second timeout, and stop images from stretching mid-transition.

Read Article
Development, Front-end

Modern CSS updates: the power of nth-child(n of selector)

A look at recent Modern CSS updates for WordPress: the nth-child(n of selector) syntax, flying focus via the View Transition API, prefers-reduced-motion, and browser support in Chrome 148 and Safari 26.5.

Read Article
Development, E-commerce Development, Front-end

CSS discounted price calculation without bloated JavaScript

You don’t need a JavaScript bundle to calculate a discount. With the upgraded attr(), mod(), and round() CSS functions, you can do the math in the style engine, cut latency, and ship a lighter shop.

Read Article
Design, Development, Front-end

rotateY() and 3D CSS transforms, done right

Most rotateY() flip cards don’t actually flip, they just shrink and grow. Here’s how perspective, transform-style, and a proper 3D stage give you flip cards and carousels with real depth instead of a squashed 2D look.

Read Article
Development, Front-end

Using rotateX() for 3D CSS transforms that hold up

The rotateX() CSS function adds real 3D depth, but only when the parent has a perspective value. This covers the syntax, the perspective gotcha that flattens your rotation, and examples like 3D flip cards and unfolding accordions.

Read Article

Posts navigation

1 2 … 10 Next

bbioonThemes

Senior WordPress Engineer
Toptal & Codeable Expert

Connect

  • GitHub
  • Twitter
  • LinkedIn
  • Codeable

Explore

  • Expertise
  • Work
  • Insights
  • Blog

Resources

  • bbioonThemes
  • Contact
  • Privacy Policy
© 2026 bbioonThemes. All rights reserved.
Privacy