Simple Scss Utilities

Outline

How to use

Outline Width gets pretty much the same values as border, but there's no direction, making this section shorter to document. Hey, less work for me! But outline also has a property called offset, so let's handle that here as well

Classes

Class	CSS rule
.outline-0	outline-width: 0px;
.outline-sm	outline-width: 1px;
.outline-md	outline-width: 3px;
.outline-lg	outline-width: 5px;
.outline-xl	outline-width: 7px;
.outline-2xl	outline-width: 11px;

However, note that to be displayed, outlines have to ALSO have a style class:

Class	CSS rule
.outline-none	outline-style: none;
.outline-dotted	outline-style: dotted;
.outline-solid	outline-style: solid;
.outline-groove	outline-style: groove;
.outline-inset	outline-style: inset;

Outline Offset Classes

And here's the values for outline offset:

Class	CSS rule
.outline-offset-0	outline-offset: 0px;
.outline-offset-sm	outline-offset: 1px;
.outline-offset-md	outline-offset: 3px;
.outline-offset-lg	outline-offset: 5px;
.outline-offset-xl	outline-offset: 7px;
.outline-offset-2xl	outline-offset: 11px;

Let's get into some examples.

Examples

Here I'm mostly covering outline and offset size, but they can also be given Color classes and Styles Styles, these are covered in the linked sections in more depth, but I included some of these here. Note that the outlines arn't really inlcluded in the browser calculations on element sizes, something which I had forgot (you can see the outlines kind of encroaching on the margines in these examples:)

.outline-solid

.outline-0

.outline-solid

.outline-sm

.outline-solid

.outline-med

.outline-solid

.outline-lg

.outline-solid

.outline-xl

.outline-solid

.outline-2xl

.outline-solid

.outline-offset-md

.outline-sm

.outline-solid

.outline-offset-lg

.outline-lg

.radius-full

.outline-solid

.outline-lg

.outline-magenta

.outline-offset-lg

.outline-dotted

.outline-lg

.outline-blue

.radius-full

.outline-offset-lg

.outline-groove

.outline-lg

.outline-red

.radius-md

.outline-offset-lg

.outline-inset

.outline-lg

.outline-green

.radius-md

.outline-offset-lg

In case you're wondering what the full html looks like, here's the markup for the last example:

HTML

<div className="display-flex flex-col justify-center ">
  <div className="display-flex center">
    <div
      className="w-3 h-3 bg-blue outline-inset outline-green outline-2xl outline-offset-lg radius-md"
    ></div>
  </div>
  <div className="display-flex flex-col mt-sm">
    <p>.outline-inset</p>
    <p>.outline-lg</p>
    <p>.outline-green</p>
    <p>.radius-md</p>
    <p>.outline-offset-lg</p>
  </div>
</div>

Responsive Examples

Let's move onto some responsive examples. I made only things that have to do with size really get the responsive treatment, if you need responsive outline colors or colors, that's a good opportuity for some custom scss. Both outline offset and size can respond to screen widths, if you're on a browser go ahead and change the screen widths to see them respond (for small widths you'll have to close the sidebar):

.outline-md .outline-offset-md

.tab:outline-lg .tab:outline-offset-lg

.scr:outline-xl .scr:outline-offset-xl

.lg:outline-2xl .lg:outline-offset-2xl

Here's the HTML:

HTML

<div
  class="w-5 h-5 bg-blue radius-md mb-xl
    outline-solid outline-offset-md outline-md 
    tab:outline-lg tab:outline-offset-lg 
    scr:outline-xl scr:outline-offset-xl 
    lg:outline-2xl lg:outline-offset-2xl"
/>

And as one more example, here's a border with a .max-scr class, so the outline is lg up to 1024px (the break point between scr and lg) and 2xl above that:

.max-scr:outline-lg

.outline-2xl

HTML

<div
  class="w-5 h-5 bg-blue radius-md outline-solid outline-2xl max-scr:outline-lg mb-lg"
/>

Happy Coding!