Skip to main content

Geoff Graham

Read, write, coffee, web, repeat.

Snippet Hamburger Bun Menu

Apple made some noise when they released an updated site, including an all-new responsive navigation. While the redesign was focused on other things, one thing that stuck out was the use of a hamburger menu icon in a newly designed responsive navigation. And, not just any hamburger, a meatless one—just the buns. It could be a statement on simplicity or whatever, but here’s how we can recreate it with the same animated effect that transforms the icon from a … Read article “ Hamburger Bun Menu”


Bootstrap 4 Alpha


First Impression of GitHub Desktop

GitHub Desktop was released late last week.

Wait, doesn’t GitHub already have two desktop apps? If the same question crossed your mind when you first read that, then you are not alone. Yes, GitHub did have two desktop apps—one for Mac OS and one for Windows—but decided to unify them into a single app. Instead of GitHub for Mac and GitHub for Windows, we are now left with just GitHub Desktop.

I was planning to write up a … Read article “First Impression of GitHub Desktop”



The ::marker pseudo-element is for applying list-style attributes on a given element. It effectively targets the bullet-point or number generated by a list-item, whether that is a (<li>) in an ordered (<ol>) or unordered (<ul>) list, or an element that declares its display property as a list-item.

Please note that that no browser supports the use of ::marker at the time of this writing.

li::marker {
  content: "#" counter(counter) ":";

The most handy … Read article “::marker”



The isolation property in CSS is used to prevent elements from blending with their backdrops.

.module {
  isolation: isolate;

It is most commonly used when mix-blend-mode has been declared on another element. Applying isolation to the element guards that element so that it does not inherit the mix-blend-mode applied to the other elements that might be behind it.

In other words, if mix-blend-mode is telling overlapping elements to blend with one another, then isolation creates an exemption on the … Read article “isolation”


What a CSS Code Review Might Look Like

Many programming languages go through a code review before deployment. Whether it’s a quick once-over, in-depth peer review, or complete unit testing, code reviews help us release code into the wild with confidence.

I started to imagine what a CSS code review might look like. CSS can be written in a number of ways, and the best way is often subjective to the project. I’m definitely not trying to get dogmatic with a post like this, but instead lay the … Read article “What a CSS Code Review Might Look Like”