Bradley Taunt
Bradley Taunt
The man behind the site… I’m Brad, a designer/developer hybrid. I help software companies improve their user experience and ship more performant products. I’m passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal brain dumps. I also actively maintain several open source projects. Core tools are HTML, CSS, Ruby, JavaScript & PHP. Currently improving my skills with Rails & MongoDB. I also enjoy tinkering with basic shell scripts and Unix systems.
August 2026
September 2026
Top Words
- openbsd
- linux
- jekyll
- setup
- simple
- setting
- pure
- html
- text
- installing
- macos
- website
All posts (206)
Proper UI Hierarchy 2019-02-05 I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it’s core seems so simple - yet is overlooked in almost every current modern...
Tabbed Content Without JavaScript 2019-01-28 Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it is possible to create tabbed content with only using CSS. Live CodePen Example Sidenote: While this method is semantic and...
Easy Custom Radio Inputs 2019-01-21 Default radio inputs are notoriously horrible looking and are something designers tend to over-think when trying to customize them. Let’s walk through how to create custom radio buttons with pure CSS, while still preserving performance and accessibility. The Final Product This is...
Basic Gulp Build for Sass 2019-01-15 Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like gulp and grunt can seem daunting at first. So, I’ve decided to showcase my go-to setup for gulp and explain what the heck it does step-by-step. Here is...
Better Box Shadows 2019-01-08 .message { position: relative; z-index: 1; } .box-container, .box-container-depth { background: white; box-shadow: 0 4px 8px rgba(0,0,0,0.3); border: 1px solid #eee; border-radius: 10px; margin: 2rem auto; padding: 10px; position: relative; height: 200px; width: 250px; }...
Over-Nesting 2019-01-06 I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I’ve recently worked on a few projects that show a slight disregard for proper class/selector nesting....
Using Parent Selectors in CSS 2018-12-19 I recently saw a Twitter thread posted by Tommy Hodgins on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the parent selector instantly peaked my interest. Being able to target an element’s...
Width or Flex-Basis? 2018-11-28 Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let’s breakdown how to solve this issue using both inline-block paired with width and flex-basis. Width Setting the width of the inner children to a divisible value...
Adaptable Flexbox Grid 2018-11-22 You can use flexbox for many tricky layout “hacks” and implementing a grid layout is no different. Check out the CodePen below to see how you can implement a flexbox grid system that adapts automatically based on how many items you insert per row (maximum 6 children in this...
What Happened to Self-Hosted Blogs? 2018-10-18 I remember a time on the internet1 when everyone and their grandmother was running a personal blog. And I mean personal - not hosted on some side platform or a tacked-on addition to the rest of their website. Nowadays companies and individuals alike use platforms like...
Using Multiple CSS Background Images 2018-09-28 It isn’t something developers have a need to do very often, but you can set multiple background images on a single element. Example: .element { background: url('image_path') center repeat, linear-gradient(transparent 0%, #000 100%) no-repeat; } What can you do with...
Pure CSS Simple Dropdown Plugin 2018-09-20 I find myself blowing away default browser select styling and implementing my own custom dropdowns far more often than I’d like. So, I recently created a very simple and clean component using just pure CSS. Check out the CodePen below and feel free to morph it as you see...
Page 16 of 18