Core Concepts

Pseudo-Class Variants

Using utilities to style and add effects to elements when on hover, group-hover, group-focus, focus, active, disabled, visited, checked or theme.

Hover

Add the (hover) prefix to an utility to enable on-hover.

<!-- Example -->
<y class="text-charcoal-100 (hover)text-white bg-white (hover)bg-charcoal-100">
  ...
</y>

Group-Hover

Add (group) class to the parent element and add the (group-hover) prefix to an utility on the child element to enable group-hover.

<!-- Example -->
<y class="(group) bg-charcoal-100 (hover)bg-orange-400">
  <y class="(group-hover)text-white">
    ...
  </y>
</y>

Focus

Add the (focus) prefix to an utility to enable on-focus.

<!-- Example -->
<input class="bg-gray-100 (focus)bg-charcoal-100 border-transparent (focus)border-gray-200"
       placeholder="Focus me!">

Focus-Within

Add the (focus-within) prefix to an utility to enable on-focused for child element.

<!-- Example -->
<y class="(focus-within)text-red-600 (focus-within)bg-red-300">
  Title:
  <input placeholder="Focus me!">
</y>

Group-Focus

Add (group) class to the parent element and add the (group-focus) prefix to an utility on the child element to enable group-focus.

<!-- Example -->
<y class="(group) bg-charcoal-100 (focus)bg-orange-400">
  <y class="(group-focus)text-white">
    ...
  </y>
</y>

Active

Add the (active) prefix to an utility to enable on-active.

<!-- Example -->
<button class="bg-charcoal-100 (active)bg-red-400 text-white">
  ...
</button>

Visited

Add the (visited) prefix to an utility to enable on-visited.

<!-- Example -->
<a class="text-gray-500 (visited)text-purple-500 (visited)underline"
   href="...">
  ...
</a>

Checked

Add the (checked) prefix to an utility to enable on-checked.

<!-- Example -->
<button class="(checked)text-white (checked)bg-red-400 (checked)underline">
  ...
</button>

Disabled

Add the (disabled) prefix to an utility to enable on-disabled.

<!-- Example -->
<button class="(disabled)text-gray-600 (disabled)bg-gray-400">
  ...
</button>

Dark Theme v1.1.0

Add the (dark) prefix to an utility when dark theme settings enabled.

<!-- Example -->
<y class="text-charcoal-100 (dark)text-gray-100">
  ...
</y>

Create Custom Variants

Same like responsive, the different is the file location. To create custom variants to a utility, look into directory src/variants/{ non-responsive or responsive }/, and then add a new @include() directive with defined utility name (e.g. fontSize), last the arguments into the variant file (e.g. _hover.scss).

// @file `variants/non-responsive/pseudo/_hover.scss`
// @file `variants/responsive/pseudo/_hover.scss`
@include fontSize($prefix-hover, $pseudo-hover, $class-false);

// @file `variants/non-responsive/pseudo/_focus.scss`
// @file `variants/responsive/pseudo/_focus.scss`
@include fontSize($prefix-focus, $pseudo-focus, $class-false);

// @file `variants/non-responsive/pseudo/_active.scss`
// @file `variants/responsive/pseudo/_active.scss`
@include fontSize($prefix-active, $pseudo-active, $class-false);

// @file `variants/non-responsive/pseudo/_visited.scss`
// @file `variants/responsive/pseudo/_visited.scss`
@include fontSize($prefix-visited, $pseudo-visited, $class-false);

// @file `variants/non-responsive/pseudo/_checked.scss`
// @file `variants/responsive/pseudo/_checked.scss`
@include fontSize($prefix-checked, $pseudo-checked, $class-false);

// @file `variants/non-responsive/pseudo/_disabled.scss`
// @file `variants/responsive/pseudo/_disabled.scss`
@include fontSize($prefix-disabled, $pseudo-disabled, $class-false);

Some utility has negative value and require to add negative[true|false] argument into @include() directive.