Breakpoint visualizer

[soniktrooth]

I recently did this on a project to help when developing which breakpoint I'm looking at. It's super handy and I think we could roll it in.

This was also suggested for adding to Kalastatic so we need to watch we don't step on each others toes for when Kalatheme and Kalastatic both exist in a project but I think this could be implemented with a handy little theme setting toggle.

body {
  position: relative;

  &:before {
    @media(min-width: $screen-xs) {
      content: 'xs';
      width: 25px;
      height: 20px;
      padding: 3px;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
      background-color: #000;
      color: #fff;
      text-align: center;
      font-size: 12px;
      border-top-right-radius: 5px;
    }

    @media(min-width: $screen-sm) {
      content: 'sm';
    }

    @media(min-width: $screen-md) {
      content: 'md';
    }

    @media(min-width: $screen-lg) {
      content: 'lg';
    }
  }
}

[andrewmallis]

well, we are not using sass at all, so would need refactoring.
Kalatheme breakpoints mantra is more like kalacustomize -> mobile, tablet, screen
I've seen other themes with grid toggles and this can be useful.
In our current process, though, it does seem that kalastatic is the place to get crafty like this, unless there was popular demand for this feature.

[soniktrooth]

Refactoring is easy.

I kinda think this is something we'd get used to relying on in Kalastatic and then miss it when working on a Kalatheme site that didn't have Kalastatic in the mix.

There's no demand from the general populace but a positive vox pop on #dev-collab was enough for me to post this issue here.

[andrewmallis]

Noting that we are seeing the visualizer appear on iFrames, particularly WYSIWYG areas.

It is also appearing for anonymous users, so an approach that is reserved for authenticated users sounds most reasonable. We can use the logged-in native Drupal class.

Further, a theme setting that turns the behavior on/off would be needed. We might need to inject a new class to control this via a variable.