With the release of our CSS Framework, Platform UI, it might be fun to actually build something with it! At RitterIM, we have an interna...CSS Frameworks Static Sites
It’s been a few years, several great people, an awesome company, and a cool thing we made 😀 Once upon a time, we had a mixed bag of fram...CSS Frameworks RIMdev
I dedicate this blog post to all the QA testers that expose all the flaws in my code. For a few years now I thought I had it all figured...CSS SCSS Mobile UX UI/UX frontend
One of the perks being with Ritter, and on the dev team, is you can choose the hardware that makes you happy and productive! Team members...macOS RIMdev
As a technical writer, I create software documentation. But many times, I find myself looking at in-product copy and wondering about cont...Documentation Technical writing UX writing Content design
Docs and contextual help We recently started a push towards integrating Docs content into our software platform. The goal is to pull in...Documentation Hugo XML RSS
Have you ever wanted to change the value of a Sass variable based on screen size, a state, or for any other reason that might require cha...css Sass
Ever been confused about naming a branch with Git? Looking for a good naming convention? Well, I might have an answer for you. I’m not sa...GitHub
We often use GitHub to create a compare view, and list pull requests (PRs) for releases. However, GitHub limits the number of commits you...Documentation GitHub Git
Using our Hugo-based documentation site, we typically publish release notes once per week. My usual process includes the following: M...Documentation Hugo Archetypes
This is an updated post of the original here. Whether you’re new to the frontend at RIMdev or looking for more about our Frontend team...Team RIMdev Frontend
If you’ve ever worked in Azure Data Studio, you may find tab colors very useful. They allow you to visually separate different connectio...Documentation Azure Data Studio
If you’re not familiar with Platform UI, it’s a utility rich CSS framework we created. As we look to migrate all of our apps and static ...UI UX CSS Sass
Get ready to celebrate because, as of Friday, September 18, 2020, Evan You, creator of Vue.js, announced Vue 3 is officially released. He...vue3 frontend development
Typically with ASP.NET Core 3.1 when no specific authorization requirements are set all endpoints are publicly accessible. When you’re wo...asp.net core
If you have been working with an icon set and noticed that your icons are not vertically centered, then you are not alone. I was working on a separate issue when I just happened to notice that the icons inside our circular pills were just barely off center, raised about 1px from where they should be.
You might be saying to yourself, “I have never seen this, what is this guy talking about?” This is only an issue with WebKit browsers such as Chrome and Safari. This is also not an issue if you are running macOS. So if you are running Firefox on a Windows OS, or running an Apple machine, you wouldn’t notice anything.
My first instinct was that the CSS to center the icon within the circle must not be setup correctly. I checked and sure enough the appropriate Flexbox properties were being applied that would center an
<i> within a
<div>. The next step was to do some research and see if anyone else was having this problem, and I was able to find an open Github issue with FontAwesome. This is where I discovered the reason we don’t see this in every browser. It is because line-height is calculated differently between the different browsers for their layout algorithms.
Now that we understand that this is an issue with how browsers calculate the default line-height, we just need to set a default line-height on the affected icons. This will stop the browser from setting a line-height on its own. I chose to set the
line-height: 1.5. This gave me the desired look of the icon being centered.
As you can see the icon is now perfectly centered within the circle. Even though this was a small and almost unnoticeable bug, it can make the world of difference when someone is viewing a website. A clean and functioning UI is about all the little things coming together seamlessly to create a great user experience.