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.