Abrusco Docs

Hackable & Functional CSS toolbox.



Debugging

Box Model

.-d      { outline: 1px dashed var(--purple); }
.-d *    { outline: 1px dashed var(--lime);   }
.-d *.-d { outline: 1px dashed var(--purple); }

Example

<div class="-d">

  <ul>
    <li>first</li>
    <li>second</li>
    <li class="-d">third</li>
  </ul>

</div>

Responsive View

.-view {
  position: fixed;
  left: 0;
  top: 0;
  background-color: var(--yellow);
  color: #000;
  line-height: 1;
  font-size: 12px;
  padding: 4px;
  z-index: 9999;
  &::before {
    content: "-";
  }
}

@media (--view-xs) { .-view::before { content: "XS"; } }
@media (--view-sd) { .-view::before { content: "SD"; } }
@media (--view-md) { .-view::before { content: "MD"; } }
@media (--view-ld) { .-view::before { content: "LD"; } }
@media (--view-xl) { .-view::before { content: "XL"; } }

Example

<!doctype html>
<html>
<body>

  <div class="-view"></div>

  <h1>Hello World!</h1>

</body>
</html>