Feo CSS v3.0.0
  • Introduction
  • What is Feo CSS?
  • Getting started
  • Design tokens
  • Themes
  • Credits
  • Layout
  • Center
  • Cluster
  • Dialog
  • Holy grail
  • Masonry
  • Pancake
  • Sidebar
  • Stack
  • Switcher
  • Tiles
  • Utilities
  • Token-based
  • Flexbox, grid and gap
  • Others
  • Position
  • Typography
  • Made with ♥️ by Crinkles

Utilities > Others

click-area

The .click-area class makes a parent completely clickable based on the presence of a single, direct <a> child.

visually-hidden

The .visually-hidden class allows you to hide an element for the users eye, but still be readable for screen readers.

Transition

Classes that enable you to set CSS transitions on all transitional attributes of an element, as shown below.

css.transition-100/200/300/400/500 {
    transition: all 100ms/200ms/300ms/400ms/500ms ease;
}

Aspect ratio

  • .ratio-vid: sets the aspect ratio to 9/16.
  • .ratio-auto: sets the aspect ratio to auto.
  • .ratio-square: sets the aspect ratio to 1/1.

nth-child

Feo CSS enables you to use the --nth-child custom property to determine the nth-of-type value. This is a numeric value going between 1 to 10, and can be used for various things. You will thank me later when you need it.

Outline: click-areavisually-hiddenTransitionAspect ratio<code>nth-child</code>
Category:
Utilities
Source:
https://github.com
Last modified:
8/2/2022, 11:38:56 AM