Christian Oliff

Where they publish

• Site christianoliff.com His site: articles on front-end development and his /uses page.

  Open christianoliff.com

  Recent

  • Bootstrap Icons as CSS variables 26 Mar 2026 Using icon fonts in HTML markup is still very popular, despite their many drawbacks. Using them means even if you only use a single icon, you still need to load the font file and the CSS for that entire icon set which c…
  • Web Developer Tools+ iOS App 3 Mar 2026 As an iPad Pro owning front-end developer, I’ve often been a bit frustrated at the lack of developer tools for testing and debugging websites on the go. So I created Web DevTools+, a free Safari extension for iOS…
  • Bootstrap 5 CSS Breakpoint Indicator 17 Dec 2025 When working on Bootstrap projects I often find myself wanting to quickly see the current CSS breakpoint. I created a simple CSS snippet that shows the current Bootstrap CSS breakpoint in the browser’s viewport. I…

  Show 17 more

  • Building a Bootstrap Modal with the dialog HTML element 14 Dec 2025 Continuing my series of posts on building Bootstrap components using just CSS and native HTML elements, this post demonstrates how to create a Bootstrap modal dialog using the <dialog> HTML element. The <dialog> element…
  • Image Size Info Browser Extension 11 Dec 2025 I used to regularly use a simple browser extension that showed image size information, you just right-clicked on any image and it would display a simple dialog with the image dimensions, file size, and full URL. It was…
  • Building a Bootstrap Accordion with the details/summary HTML tags in 2025 21 Aug 2025 A few years ago I wrote a short post about building a Bootstrap accordion using the <details> and <summary> HTML tags. The idea was to create a collapsible accordion without needing any JavaScript, relying solely on CSS…
  • Using the Speculation Rules API to Improve Performance 18 Jul 2025 If you have a multi-page site and want to improve performance when navigating between pages, I recommend using speculation rules to prefetch and render pages on hovering over a link. This can substantially reduce load t…
  • Safari Wishlist (2025) 11 Jul 2025 The Safari browser has come a long way in recent years, but there are still a few CSS/HTML features that I&rsquo;d like to see added that would make it even better for web developers and users alike. I&rsquo;ve previous…
  • Bootstrap JavaScript Snippets 26 May 2025 When working on building websites with Bootstrap I often find myself copying and re-using a bunch of useful little JavaScript snippets to enhance functionality and I thought I&rsquo;d make a quick blog post to share a f…
  • Bootstrap switches with on-off labels 21 Feb 2025 Apple&rsquo;s iOS, iPadOS and macOS all feature an accessibility option to add labels to switches. This can be helpful for users who may not be able to distinguish between the on and off states of a switch via color alo…
  • Using Safari's native switch input with Bootstrap 12 Feb 2025 Safari introduced a native HTML switch element in version 17.4 which is easy to use just by adding the switch attribute to a checkbox input. This is a great feature that allows developers to create a switch without the…
  • Bootstrap Forced Colors CSS for Windows High Contrast Themes 5 Jul 2024 Windows has supported High Contrast Themes in Windows since Windows 10. These customizable themes can be useful for users with visual impairments or for users who prefer high contrast colors. When a Contrast theme is ac…
  • Building a Bootstrap Dropdown with the details HTML disclosure element 10 Apr 2024 Following on from building a Bootstrap accordion using the details HTML tag, I thought I&rsquo;d try to build a Bootstrap dropdown using the same details HTML tag. Open dropdown Action Another action Something else here…
  • Bootstrap 5 Migrate Tool 25 Mar 2024 Migrating a website project from Bootstrap 4 to Bootstrap 5 involves renaming a lot of classes which can be a tedious task. To help with this, I created a command-line tool that will do all the renaming for you across a…
  • Markdown Render Hooks in Hugo 21 Sept 2023 Hugos&rsquo;s Markdown Render Hooks allow custom templates to override Markdown rendering functionality. Render hooks are easy to setup and use and can make your site more useful and allow your Markdown content files to…
  • HTMLHint VS Code Extension 6 Sept 2023 Last year I published the official HTMLHint extension for VS Code after Microsoft deprecated their version. Thanks to the fine folks over at Microsoft in assisting with the migration to the HTMLHint org on GitHub! I&rsq…
  • Popover CSS Inspector for Bootstrap 5 25 Aug 2023 I recently spent a while looking for a CSS inspector JavaScript library that would function in a way similar to DevTools elements inspector that would show the CSS rules applied to a component. I couldn&rsquo;t find one…
  • Building a Bootstrap Accordion with the details/summary HTML tags 28 Jun 2023 I recently had to build an accordion for a small single-page project. As I was using Bootstrap 5 for the CSS I wanted to see if I could apply the accordion styling to the <details> HTML5 tag without needing to use Boots…
  • Using PurgeCSS with Hugo 5 Jul 2022 PurgeCSS is a great tool which can dramatically reduce the amount of compiled CSS deployed to your site by removing any classes that are not being used in your HTML markup - leaving only the CSS which is used. This will…
  • Safari for iOS 16 Wishlist 26 May 2022 With WWDC 2022 now just a couple of weeks away here is my Web Developers wish list for Safari on iOS 16. Native iframe Lazy Loading Native lazy loading of iframes with loading='lazy' has shipped in Chrome and Edge alrea…

  Link verified 5 Sept 2026. Recent items update automatically from the channel.

• GitHub coliff His open-source work, including Bootstrap and HTML starter templates.

  Open github.com

  Recent

  • coliff 19 Oct 2026
  • html5-email-regex — Pure HTML5 Email validator which checks valid TLDs with no JavaScript 18 Oct 2026
  • eslint-plugin-bootstrap-6-migration — eslint-plugin-bootstrap-6-migration 18 Oct 2026

  Show 14 more

  • awesome-website-testing-tools — Resource of web-based testing and validation tools 14 Oct 2026
  • bootstrap-print-css — Print Stylesheet for Bootstrap 5 12 Oct 2026
  • bootstrap-icons-css — Bootstrap Icons as CSS Variables 12 Oct 2026
  • bootstrap-show-password-toggle — A show password as text toggle for Bootstrap forms 12 Oct 2026
  • popover-css-inspector — A CSS Inspector for Bootstrap Popovers 12 Oct 2026
  • bootstrap-ui-sounds — UI Sounds for Bootstrap. 12 Oct 2026
  • image-optimizer-app — An Image Optimizer App for Windows 12 Oct 2026
  • bootstrap-5-migrate-tool — A command-line tool designed to help you upgrade your Bootstrap 4 projects to Bootstrap 5 12 Oct 2026
  • phosphor-icons-css-vars — A 100% pure CSS icon implementation using CSS custom properties and SVG masks for Phosphor Icons 10 Oct 2026
  • inputmodes.com — Testing inputmode 1 Oct 2026
  • dark-mode-switch — Add a dark-mode theme toggle with a Bootstrap Custom Switch 1 Oct 2026
  • .github — .github meta 1 Oct 2026
  • freshdesk-messaging-facade — A faster Freshdesk Messaging (formerly Freshchat) Facade 27 Sept 2026
  • sender-brand-icon-avatars-for-email — The .CSV used to generate the CSS for Sender Avatar Icons Browser Extension 27 Sept 2026

  Link verified 5 Sept 2026. Recent items update automatically from the channel.