bbioonThemes
  • Home
  • Blog

Category: Front-end

Design, Development, Front-end

Why your loading spinner should be an SVG, not a GIF

A 2MB GIF spinner is a network request competing with the content it is covering. Inline SVG loaders skip the request entirely, scale without blurring, and inherit theme colors through currentColor.

Read Article
Design, Development, Front-end

Responsive pyramidal grid with modern CSS layout logic

A pyramidal hexagon grid used to need JavaScript and negative margins. Modern CSS does it with grid auto-placement, sibling-index() and some triangular-number math, plus a fallback for narrow screens.

Read Article
Development, Front-end

CSS @scope: scoped styles without BEM or a build step

The CSS @scope at-rule is Baseline supported, so you can scope styles to a DOM subtree without long BEM class names or a JS build step. Includes donut scoping with the lower boundary and the proximity rule that decides which scope wins.

Read Article
Bug Fixing, Development, Front-end

Scroll animations with CSS sibling-index(), not JavaScript

A text vortex where every character animates on its own, built with CSS sibling-index(), sibling-count() and scroll-timeline. The only JavaScript left is the bit that splits the string into characters.

Read Article
Accessibility, Front-end

A semantic CSS pie chart a screen reader can read out

Conic gradients make a pie shape but leave screen readers with an empty box. This build keeps the data in the markup, places labels with cos() and sin(), and uses a few lines of JS for the slice offsets.

Read Article
Accessibility, Development, Front-end

A CSS contrast color approximation that ships today

The contrast-color() function only works in Safari and Firefox so far, so dynamic text colors still need a workaround. Here is the OKLCH lightness trick I use in block themes and WooCommerce stores: one declaration, no JavaScript.

Read Article
Design, Development, Front-end

February 2026 wallpapers and how to serve them properly

Smashing Magazine’s February 2026 wallpapers collection, with the designs worth grabbing and a developer’s notes on shipping high-resolution images: srcset, lazy loading, and the mistakes that turn a wallpaper gallery into a slow page.

Read Article
Development, Front-end

What a ReliCSS audit finds in an old stylesheet

A ReliCSS run sorts a stylesheet’s hacks into dead-browser fossils, fragile IE8 workarounds and leftover vendor prefixes. Here is how I read that output on WordPress sites, plus the case where :has() replaces the old checkbox hack.

Read Article
Development, Front-end

Modern CSS layouts: view transitions and grid-lanes masonry

Browser vendors are quiet but the community is not. Video state that survives navigation with view transitions, Kevin Powell’s cascade-layer trick for naming media queries, and native masonry landing as grid-lanes.

Read Article
Development, Front-end

CSS stacking context: why your z-index does nothing

z-index is not a global ranking. It only orders elements inside whatever stacking context they sit in. The folder analogy, the CSS properties that quietly create a new context, and how isolation: isolate frees a trapped modal.

Read Article

Posts navigation

Previous 1 … 6 7 8 9 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