Expert Tricks: DIY Breakpoint Visualizer

E

The Question.

576. 768. 992. 1200. What do these numbers have in common?

At first glance, they are clearly all even numbers. Are they calorie counts for a Chipotle burrito bowl? Maybe. Round trip flight prices to Hawaii? Possibly. A little longer look revealed that they are all evenly divisible by 16—so maybe some sort of grid system? If you guessed responsive breakpoints for Bootstrap 4 you would be correct!

If you’re anything like me—memorizing the pixel values of Bootstrap breakpoints is low on your priority list. Thankfully there are systems in place so we don’t have to! For instance, Bootstrap ships with helpful SCSS mixins that make your stylesheets much easier to write and parse through.

Media Query/Breakpoint Mixin Examples:

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

For me, I find it much easier to see that styles are applied to the “medium breakpoint up” instead of “min-width: 768px”. The use of breakpoint mixins become even more important when customizing the variable defaults in Bootstrap.


The Problem.

While SCSS mixins are helpful, they are only one aspect of the equation.

A lot of the time when I am writing styles for a project I find myself bumping into the issue of not being able to quickly tell what breakpoint my viewport is currently displaying. The problem consistently would arise somewhere between the medium and extra large breakpoints. I would frequently be under the impression that I was looking at the large breakpoint, but was actually viewing medium. Other instances would occur where I needed to fine-tune some styles between large and extra large breakpoints.

Thankfully, I was just a few lines of CSS away from having a DIY solution that was unbelievably robust and incredibly simple.


The Goal.

One of the fun tricks i’ve learned in my time writing CSS has been clever use of Pseudo-elements. While this task is pretty straightforward, it was still best practice to define some requirements.

Requirements

  • Indicator remains in place while scrolling (position: fixed;)
  • Visible above all other elements on the page (high z-index)
  • Change text AND color for greater distinction between breakpoints

As it turns out—leveraging the ::before pseudo-element would be a fantastic option to build out a breakpoint indicator.


The Solution.

Step 1:

Set the content property to an empty string, declare position: fixed; and set an incredibly high z-index;

body {
    &::before {
        content: '';
        position: fixed;
        z-index: 1000;
    }
}

Step 2:

Next, declare some global positioning and styles. For this use case, I opted to anchor the the indicator at the bottom left of the viewport and have a height and width of 30 pixels.

body {
    &::before {
        bottom: 1rem;
        left: 1rem;
        height: 30px;
        width: 30px;
    }
}

Step 3:

Declare general typographic styles. These styles are mostly personal preference. Because my intention is to set different background colors on the various breakpoints, I decided to set the text color to white.

body {
    &::before {
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        text-transform: uppercase;
        color: #fff;
    }
}

Step 4:

Lastly, for each of the breakpoints, set the content property to a preferred name and assign a unique background color. For this example, I opted to keep the breakpoint names consistent with Bootstrap conventions: sm, md, lg, xl.

body {
    &::before {        
        @media (min-width: 576px) {
            content: 'sm';
            background-color: purple;
        }

        @media (min-width: 768px) {
            content: 'md';
            background-color: blue;
        }

        @media (min-width: 992px) {
            content: 'lg';
            background-color: orange;
        }

        @media (min-width: 1200px) {
            content: 'xl';
            background-color: green;
        }
    }
}

The Results.

View the Breakpoint Helper Example on CodePen.

Breakpoint Indicator Concept

The Bonus.

  • While this example is built around Bootstrap, it can easily be adapted to work for other frameworks or custom breakpoints.
  • Try loading a simple solution like into a stylesheet that only website administrators and contributors see. This empowers non-technical users with a means to communicate helpful variables when they encounter various display bug on a specific breakpoint.

The Takeaway.

If you are bumping into the same issue over and over it—slow down and strategize. It likely is worth taking the time to explore building a tool that helps keep your productive and ultimately successful.

About the author

Evan Dunham

Add comment

By Evan Dunham

Recent Posts

Recent Comments