Chunk for indicating current breakpoint

1

When building a website, it’s sometimes helpful to know which breakpoint you’re currently viewing.

This chunk adds a small colored box to your page that indicates the breakpoint.

It’s based on Bootstrap 5, but you can easily change the breakpoints, size and color.

Just make a chunk named breakpoints and add it to your page like this: [[$breakpoints]]

If you look at the code you’ll see it’s mostly stylesheet. (Stylesheets are supposed to be in the head of the webpage, but they work here anyway. Development only!)

If you use Sass, there’s a stylesheet for that below.

In action:

image
image766×114 893 Bytes

image
image1074×90 951 Bytes

image
image932×102 978 Bytes

image
image1092×94 890 Bytes

image
image1112×84 701 Bytes

image
image1126×102 999 Bytes

breakpoints chunk:

<style>
  .breakpoints {
    height: 30px;
    text-align: center;
    padding-top: 4px;
    background-color: honeydew;
  }
  .breakpoints:before {
    content: "xs";
  }
  @media (min-width: 576px) {
    .breakpoints {
      background-color: azure;
    }
    .breakpoints:before {
      content: "sm";
    }
  }
  @media (min-width: 768px) {
    .breakpoints {
      background-color: lightsteelblue;
    }
    .breakpoints:before {
      content: "md";
    }
  }
  @media (min-width: 992px) {
    .breakpoints {
      background-color: lightyellow;
    }
    .breakpoints:before {
      content: "lg";
    }
  }
  @media (min-width: 1200px) {
    .breakpoints {
      background-color: lavenderblush;
    }
    .breakpoints:before {
      content: "xl";
    }
  }
  @media (min-width: 1400px) {
    .breakpoints {
      background-color: fuchsia;
    }
    .breakpoints:before {
      content: "xxl";
    }
  }
</style>
<div class="breakpoints"></div>

SCSS stylesheet

.breakpoints {
  height: 30px;
  text-align: center;
  padding-top: 4px;
  background-color: honeydew;
  &:before { content: 'xs'; }
  @include media-breakpoint-up(sm) {
    background-color: azure;
    &:before { content: 'sm'; }
  }
  @include media-breakpoint-up(md) {
    background-color: lightsteelblue;
    &:before { content: 'md'; }
  }
  @include media-breakpoint-up(lg) {
    background-color: lightyellow;
    &:before { content: 'lg'; }
  }
  @include media-breakpoint-up(xl) {
    background-color: lavenderblush;
    &:before { content: 'xl'; }
  }
  @include media-breakpoint-up(xxl) {
    background-color: fuchsia;
    &:before { content: 'xxl'; }
  }
}
3 Likes
2

What a nice idea to share this solution!

I use something similar in my dev styles; don’t remember where I got this from:

body:after {
    position: fixed;
    top: 0;
    z-index: 9999;
}
@media (min-width: 0) and (max-width: 575.98px) {
    body:after {
        content: "XS - bare";
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    body:after {
        content: "SM - 576px";
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body:after {
       content: "MD - 768px";
    }
}
... etc ...

I like using fixed position so it doesn’t move around any other page elements and it’s always in view. This puts the content string in the upper left corner of the viewport. Adding the pixel breakpoint in the content is very helpful for us memory-challenged types. And using the body tag means you don’t need any extra markup.

3

Thanks @lucy. Great idea!

My new .breakpoints selector:

  .breakpoints {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    
    height: 30px;
    text-align: center;
    padding-top: 4px;
    background-color: honeydew;
  }
1 Like