Overview of the Additional pseudo-classes

Other Classes that respond to Pseudo States

The additional Classes that respond to pseudo states are

• Font Size
• Font Family
• Font Weight
• Text Decoration
• Border and Outline Classes

Not all of these can be transitioned, although maybe some can be faked - for example you can fake smooth font weight transtitions by getting creative with text shadow - (but that's kind of weird for a framework I think, but maybe a good opportunity to write some custom SCSS if you want it). But some of these can, I'll try to include transitions for the transitionable properties in the examples.

Of course everything on this page can be customized for your own theme in the _variables.scss and see the (Customize)[/customize/] section of the docs for more details!

Let's start with Font Size!

Font Size

Font size is supported by pseudo classes, although it's a bit of a special use case. I thought it was useful enough to include, although be careful going too wild because they might conflict with any responsive font size styles. Going wild with font size and pseudo classes would likely be best handeled by writing some custom SCSS for most cases I can imagine, although utility classes probably still come in handy if you just need some styles that aren't gonna be too eclectic:

Pseudo Class Examples:

<p
  class="
    text-lg 
    hover:text-xl
    cursor-pointer"
>
  Hover Me
</p>

<p
  class="
    text-lg  
    active:text-xl
    cursor-pointer"
>
  Press me
</p>

<input
  class="
    text-lg 
    active:text-xl
    border-sm
    w-1/2"
  value="Focus Me"
/>

Font Family

Font family can also respond to Pseudo States. The framework comes with 3 default font families, probably one of the first things one would want to do when starting a project is change the fonts to their theme, which can be done in the _variables.scss file (see Customize section). I purposefully choose a basic font that one would probably want to edit to drive this point home haha (although I it works good for this site!)

Examples:

<p
  class="
    hover:font-large
    cursor-pointer"
>
  Hover Me
</p>

<p
  class="
    active:font-header
    cursor-pointer"
>
  Press me
</p>

<input
  class=" 
    focus:font-large
    border-sm
    w-6/10"
  value="Focus Me!"
/>

Font Weight

Font weight can't be transitioned, although it can be faked with a text shadow. However, this framework provides these three classes by default. Not all fonts support weights, some support more than 3 weights, but again that all can be editied in the _variables.scss file.

And here are some Examples:

<p
  class="
    hover:font-light
    cursor-pointer"
>
  Hover Me
</p>

<p
  class="
    active:font-bold
    cursor-pointer"
>
  Press me
</p>

<input
  class=" 
    focus:font-bold
    border-sm
    w-6/10"
  value="Focus Me!"
/>

Text Decoration and Style

Here are the classes for text decoration and text decoration style. Text decoration can also have a width and color, but notice that for each element state the thickness needs to be specified or it'll revert to the default thickness for that particular state. Also, not every style will work with every type of decoration. Hey, that's CSS, what can I say! But these are all kind of rarely used edge cases, just demonstrated here.

First, the Classes.

Text Decoration:

Text Decoration Style:

Decoration Examples:

<p
  class="
    text-underover 
    hover:text-line-through 
    decoration-xl
    hover:decoration-xl"
>
  Hover Me!!
</p>

<p
  class="
    text-overline 
    decoration-xl
    active:text-underline
    active:decoration-xl"
>
  Press me
</p>

Decoration Style Examples:

<p
  class="
    text-underline  
    decoration-double
    decoration-xl
    hover:decoration-dashed
    hover:decoration-xl"
>
  Hover Me
</p>

<textarea
  class="
    w-6
    outline-sm
    outline-solid
    decoration-xl
    text-underline 
    decoration-magenta-dk
    focus:decoration-green"
  value="Focus Me!"
/>

Border Width and Style

Border width classes cover every direction, while border style does not. While it is possible to want borders with different styles in different directions, and because responsive styles can conflect with element states, these are specific cases I felt are probably best handled with custom SCSS. Otherwise, I feel like these classes will cover the vast majority of use cases.

For more info on responsivity and customization, see the Responsive and Customize sections. The default values are as follows:

Border Width:

Border Style:

Border Width Pseudo Class Examples:

<p
  class="
    cursor-pointer
    p-sm
    border-lg
    by-xl
    hover:border-sm
    hover:bx-xl"
>
  Hover Me
</p>

<p
  class="
    p-sm
    cursor-pointer
    border-md
    border-magenta
    border-inset
    bx-xl
    by-xl
    active:border-xl
    active:bx-0
    active:by-0 
    active:border-green"
>
  Press Me
</p>

Border Style Pseudo Class Examples:

<p
  class="
    p-sm
    border-groove
    hover:border-dashed"
>
  Hover Me
</p>

<input
  class="
    p-sm
    w-4
    border-lg
    border-inset
    focus:border-dotted
    focus:border-red"
  value="Focus Me"
/>

Outline Width and Style

Like border, outlines have widths and styles. Unlike border, outline classes can't be applied per direction, making them a bit less time consuming to generate and document haha. Also notice that in the examples, the style has to be included or it won't show up. I did include pseudo classes with outline, so they can respond to hover, focus, etc.

Outline WIdth

Outline Style

(I addded the blue-ltr color and made the width outline-xl to make it a bit easier to see)

Outline Width Pseudo Class Examples:

<p 
  class="
    outline-sm
    outline-solid
    hover:outline-xl"  
>
  Outline
</p>

<p
  class="
    outline-sm
    outline-dashed
    outline-blue-ltr
    hover:outline-xl"
>
  Press Me
</p>

Outline Style Pseudo Class Examples:

<p
  class="
    outline-xl
    outline-groove
    outline-blue-ltr
    hover:outline-inset"
>
  Hover Me
</p>

<input
  class="
    w-4
    outline-xl
    outline-solid
    outline-blue-ltr
    focus:outline-dotted"
  value="Focus Me"
/>