Skip to content

alloc/unocss-preset-alloc

Repository files navigation

unocss-preset-alloc

A fork of @unocss/preset-mini

Features

  • Use em units by default
  • Fallback values for CSS variables
    • i.e. color-$red|#ff0000 for color: var(--red, #ff0000) property

Rules

  • Background images
    • bg-image-[…] for background-image property
    • bg-repeat-x for background-repeat: repeat-x property
    • bg-bottom for background-position: bottom property
  • Containment
    • contain-layout
    • contain-paint
    • contain-content
  • Content visibility
    • content-visibility-auto
  • Object fit
    • object-cover
    • object-contain
    • object-fill
    • object-scale-down
    • object-none
  • Object position
    • object-top, object-top-left, etc
  • Scroll snap
    • snap-x, snap-y, snap-both, or snap-none for direction
    • snap-mandatory or snap-proximity for strictness
    • snap-start, snap-end, snap-center, or snap-align-none for alignment
    • snap-normal or snap-always for “snap stops”
    • scroll-m-… and scroll-p-… for margin/padding
  • Overscroll behavior
    • no-overscroll for overscroll-behavior: contain property
  • Scrollbar appearance
    • no-scrollbars for scrollbar-width: none and -ms-overflow-style: none properties
  • Tabular numbers
    • tabnum for font-feature-settings: tnum property
  • Line clamping
    • i.e. line-clamp-2 to use -webkit-line-clamp to limit number of wraps to 2 lines
  • Touch actions
    • touch-pan-* for touch-action: pan-* property
    • touch-pinch-zoom for touch-action: pinch-zoom property
    • touch-auto for touch-action: auto property
    • touch-manipulation for touch-action: manipulation property
    • touch-none for touch-action: none property

Variants

  • Targeting <span> and <a> descendants
    • i.e. span:color-red for color: red property on all span and anchor tags within the element
    • When using em as the default, this is most useful when you want to set a default font size for text within an element.
  • Element-level zooming
    • zoom-5 applies font-size: 5em to all direct children of the element
    • zoom-0.5 applies font-size: 0.5em to all direct children of the element
    • This is great for scaling elements on-the-fly without having to update every em value of every descendant.
  • Targeting attribute values
    • i.e. [data-selected]:color-red for color: red property if the element has a data-selected attribute
    • or [data-selected="true"]:color-red for color: red property if the element has a data-selected attribute with a value of true

And probably some other stuff I forgot to list!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published