@uxf/styles

common modifier classname constants (eg. IS_HOVERABLE_CLASSNAME for is-hoverable classname)

Usage no npm install needed!

<script type="module">
  import uxfStyles from 'https://cdn.skypack.dev/@uxf/styles';
</script>

README

@uxf/styles

Components

`AccessibleSvg`

Constants

`Classes`

common modifier classname constants (eg. IS_HOVERABLE_CLASSNAME for is-hoverable classname)

Mixins

`appearanceReset`

`aspectRatio`

`injectCss`

`inputAutofill`

`inputReset`

`multilineTruncate`

`noWrap`

`reboot`

`responsiveHidden`

`responsiveHideVisually`

`responsiveMultilineTruncate`

`responsiveNoWrap`

`responsiveTruncate`

`selectReset`

`textAreaReset`

`truncate`

Properties

`background`

$backgroundColor
$background

`borders`

$border
$borderBottom
$borderLeft
$borderRight
$borderTop
$borderX
$borderY
$borderRadius
$outline

`breaks`

$breakAfter
$breakBefore
$breakInside

`character`

$fontFamily
$fontSize
$fontStretch
$fontStyle
$fontWeight
$letterSpacing
$lineHeight
$textTransform

`child`

$alignSelf
$flexBasis
$flexGrow
$flexShrink
$gridArea
$justifySelf
$order

`colors`

$backgroundColor
$color

`column`

$columnCount
$columnFill
$columnGap
$columnRule
$columnSpan
$columnWidth

`display`

$display

`flexChild`

$alignSelf
$flexBasis
$flexGrow
$flexShrink
$order

`flexParent`

$alignContent
$alignItems
$display
$flexDirection
$flexWrap
$justifyContent

`floating`

$clear
$float

`gridChild`

$alignSelf
$gridArea
$justifySelf

`gridParent`

$alignContent
$alignItems
$display
$gridAutoColumns
$gridAutoFlow
$gridAutoRows
$gridColumnCount
$gridGap
$gridColumnGap
$gridRowGap
$gridRowCount
$gridTemplateAreas
$gridTemplateColumns
$gridTemplateRows
$justifyContent
$justifyItems

`interactions`

$cursor
$pointerEvents
$resize
$userSelect

`margins`

$mb
$ml
$mr
$mt
$my
$mx

`maxLines`

$maxLines

`objectFitting`

$objectFit
$objectPosition

`overflow`

$overflow
$overflowX
$overflowY

`paddings`

$pb
$pl
$pr
$pt
$py
$px

`paragraph`

$hyphens
$maxLines
$noWrap
$textAlign
$textIndent
$truncate

`perspective`

$perspective
$perspectiveOrigin

`position`

$bottom
$left
$right
$top
$position
$verticalAlign
$zIndex

`shadows`

$boxShadow
$textShadow

`sizing`

$height
$maxHeight
$maxWidth
$minHeight
$minWidth
$width

`spacings`

margins
paddings

`textDecoration`

$textDecoration

`transform`

$transform
$transformOrigin
$transformStyle

`transitions`

$transition

`typography`

character
colors
paragraph
textDecoration

`visibility`

$backfaceVisibility
$hidden
$opacity
$hideVisually

Types

CssUnits
shared types for utils and mixins
several custom css property definitions (for these which are not suitable from csstype package)
ResponsiveProperty namespace with typing for each property available in Properties

Utils

`columnsToPercent`

`encodedSvg`

`formatResponsiveAspectRatio`

`formatResponsiveGridColumns`

`formatValue`

`formatResponsiveValue`

`formatResponsiveValueFromProperty`

`getNumericValueFromArray`

`hexToRgb`

`percent`

`matchBetween`

`matchMin`

`matchBetween`

`matchMax`

`mediaBetween`

`mediaMin`

`mediaMax`

`mediaHiDpi`

`facepaintMin`

`facepaintOnly`

`resolveResponsiveProperties`

`responsiveMixin`

`spacing`

`transition`

`withUnit`