BrutCSS Reference Documentation

Junk Drawer Classes

Junk drawer of useful classes that don’t fit anywhere else.

Screen Reader

Screen-reader help.

.sr-only

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Indicate something is for screen-readers only. This is different from markup that is hidden or for decoration. This is markup that is needed for screen-reader-based visitors to understand something on the page, but that visitors using a more conventional browser don’t need to see or can figure out from visual context.

.undo-sr-only

.undo-sr-only {
  position: static;
  padding: 0;
  margin: 0;
  clip: auto;
  white-space: normal;
  width: auto;
  height: auto;
  overflow: visible;
}

Undo something that may have been removed by .sr-only.

Debug

Debug utilities. These can be useful to show outlines of various elements without having to navigate the browser’s devtools. You can combine .debug-red, .debug-green, and .debug-blue to create outlines at different levels.

.debug

.debug * {
  outline: 1px solid gold;
}

Draw outlines around everything inside.

Example 
<div class="debug">
  <p>
    ere is the wrong way to do a big huge drop cap.
    <span class="f-l f-4">H</span>
    And some good-ole <span class="h-5">inline bugs</span>,
    to boot!
  </p>
</div>

ere is the wrong way to do a big huge drop cap. H And some good-ole inline bugs, to boot!

.debug-red

.debug-red * {
  outline: 1px solid red;
}

Draw outlines in red around everything inside.

Example 
<div class="debug-red">
  <p>
    ere is the wrong way to do a big huge drop cap.
    <span class="f-l f-4">H</span>
    And some good-ole <span class="h-5">inline bugs</span>,
    to boot!
  </p>
</div>

ere is the wrong way to do a big huge drop cap. H And some good-ole inline bugs, to boot!

.debug-green

.debug-green * {
  outline: 1px solid green;
}

Draw outlines in green around everything inside.

Example 
<div class="debug-green">
  <p>
    ere is the wrong way to do a big huge drop cap.
    <span class="f-l f-4">H</span>
    And some good-ole <span class="h-5">inline bugs</span>,
    to boot!
  </p>
</div>

ere is the wrong way to do a big huge drop cap. H And some good-ole inline bugs, to boot!

.debug-blue

.debug-blue * {
  outline: 1px solid blue;
}

Draw outlines in blue around everything inside.

Example 
<div class="debug-blue">
  <p>
    ere is the wrong way to do a big huge drop cap.
    <span class="f-l f-4">H</span>
    And some good-ole <span class="h-5">inline bugs</span>,
    to boot!
  </p>
</div>

ere is the wrong way to do a big huge drop cap. H And some good-ole inline bugs, to boot!

On this Page