unocss-preset-alloc
v0.62.0
Published
A fork of @unocss/preset-mini
Downloads
8
Readme
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
forcolor: var(--red, #ff0000)
property
- i.e.
Rules
- Background images
bg-image-[…]
forbackground-image
propertybg-repeat-x
forbackground-repeat: repeat-x
propertybg-bottom
forbackground-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
, orsnap-none
for directionsnap-mandatory
orsnap-proximity
for strictnesssnap-start
,snap-end
,snap-center
, orsnap-align-none
for alignmentsnap-normal
orsnap-always
for “snap stops”scroll-m-…
andscroll-p-…
for margin/padding
- Overscroll behavior
no-overscroll
foroverscroll-behavior: contain
property
- Scrollbar appearance
no-scrollbars
forscrollbar-width: none
and-ms-overflow-style: none
properties
- Tabular numbers
tabnum
forfont-feature-settings: tnum
property
- Line clamping
- i.e.
line-clamp-2
to use-webkit-line-clamp
to limit number of wraps to 2 lines
- i.e.
- Touch actions
touch-pan-*
fortouch-action: pan-*
propertytouch-pinch-zoom
fortouch-action: pinch-zoom
propertytouch-auto
fortouch-action: auto
propertytouch-manipulation
fortouch-action: manipulation
propertytouch-none
fortouch-action: none
property
Variants
- Targeting
<span>
and<a>
descendants- i.e.
span:color-red
forcolor: 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.
- i.e.
- Element-level zooming
zoom-5
appliesfont-size: 5em
to all direct children of the elementzoom-0.5
appliesfont-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
forcolor: red
property if the element has adata-selected
attribute - or
[data-selected="true"]:color-red
forcolor: red
property if the element has adata-selected
attribute with a value oftrue
- i.e.
And probably some other stuff I forgot to list!