CSS Utilities

Utilities allow you to quickly apply single CSS properties to an element directly within your HTML markup without having to write any code in a separate CSS file. Contrary to other CSS frameworks which use the class attribute, Startr Style is unique in that it applies utilities through CSS variables and the style attribute. This has a number of distinct improvements over class based utilities.

  • Use of all values - With class based utlities you can only assign a set number of values pre defined by the framework. Startr Style does not have this restraint. Any valid value for the CSS property can be applied.
  • Filesize - One of the biggest drawbacks to date with utility complete CSS frameworks is their large filesize. The developent version of Tailwind for example, minified is a rather large 2413.4kB. Startr Style with the same feature set comes in at less than 50kb.

What about responsive

Startr Style utilities are perfect for developing fully responsive interfaces. Each utility can be applied conditionally to a screensize allowing you total responsive control.

To apply a utility to a certain screensize simply append the utility shorthand with a ‘-’ followed by the screen size. Utilities use a mobile-first approach so if you append with for example -md, that utility will be applied to the medium screensize and up.

In the following example background is red by default and blue on large screen devices. 

<div style="--bg:red; --bg-lg:blue"><div>

Tiers

A tier is a suffix. It applies from its width up.

  • -xs applies from 440px up.
  • -sm applies from 640px up.
  • -md applies from 768px up.
  • -lg applies from 1024px up.
  • -xl applies from 1280px up.
  • -pt applies in print only.

States

A state is a suffix too, as in --bg-hover. A prop takes only the states its row lists.

  • -hover: the element is hovered or keyboard-focused. Props: --b-hover --bc-hover --bg-hover --bgc-hover --boxs-hover --c-hover --levitate-hover --oe-hover --op-hover --rotate-hover --scale-hover --shadow-hover --skew-hover --t-hover --translate-hover --translatex-hover --translatey-hover
  • -focus: the element has keyboard focus (:focus-visible). Props: --b-focus --bc-focus --bg-focus --bgc-focus --boxs-focus --c-focus --oe-focus --op-focus --t-focus
  • -active: the element is pressed. Props: --b-active --bc-active --bg-active --bgc-active --boxs-active --c-active --oe-active --op-active --t-active
  • -on: the element is on: aria-current except false or empty, aria-selected/pressed/expanded true, open, :checked, data-on except "false". Props: --b-on --bc-on --bg-on --bgc-on --boxs-on --c-on --oe-on --op-on --t-on
  • -in-on: a direct child of an element that is on. Props: --b-in-on --bc-in-on --bg-in-on --bgc-in-on --boxs-in-on --c-in-on --oe-in-on --op-in-on --t-in-on
  • -in-hover: a direct child of an element that is hovered or keyboard-focused. Props: --b-in-hover --bc-in-hover --bg-in-hover --bgc-in-hover --boxs-in-hover --c-in-hover --oe-in-hover --op-in-hover --t-in-hover

Later rules win: base, tier, in-hover, hover, in-on, on, focus, active. A state beats a tier. A current item ignores hover. Focus always shows.

Helpers

The newer helpers cover colour by number, motion and effects. Each line says what the helper sets, what else it reads, and shows an example.

  • --mix: Three digits, each 0 to 5, pick one cell of the colour cube. 314 is red 3, green 1, blue 4. Sets --mixed. Example: --mix:314; --bg:var(--mixed, #7c61c1)
  • --tone: A number from 0 to 100 mixes that share of --tone-of (--text-main by default) into --background, so greys and tints follow dark mode. Sets --toned. Reads --tone-of. Example: --tone:76; --b:1px solid var(--toned, #545454)
  • --anim: Sets the whole animation shorthand, so a stagger rides inside it. Keyframes: st-fade, st-rise, st-slide-in, st-pop. Sets animation. Example: --anim:st-rise var(--dur-3) var(--ease-out) calc(var(--i, 0) * 45ms) both
  • --text-grad: Fills the text with a gradient. It leaves the colour alone, so add --c:transparent. Sets background-clip, background-image. Example: --text-grad:linear-gradient(red, blue); --c:transparent
  • --glow: Four growing shadow layers with no lift. --glow-c sets the colour, --primary by default. Sets box-shadow. Reads --glow-c. Example: --glow:8; --glow-c:var(--primary)
  • --bdf: Filters what sits behind the element. Sets backdrop-filter. Example: --bdf:blur(8px)
  • Other helpers: --bg-pattern-squares --col --grad --grad-bottom --grad-top --grad-vars --grid-cols --levitate --line-clamp --rotate --sc --scale --shadow --shadow-hard --shadow-inset --shadow-soft --shadow-vert --skew --sr --text-3d --translate --translatex --translatey --wrapper

Deprecated

The old names keep working. New code should use the replacement.

  • --hvr-b is replaced by --b-hover.
  • --hvr-bc is replaced by --bc-hover.
  • --hvr-bg is replaced by --bg-hover.
  • --hvr-bgc is replaced by --bgc-hover.
  • --hvr-c is replaced by --c-hover.
  • --levitate-hvr is replaced by --levitate-hover.
  • --rotate-hvr is replaced by --rotate-hover.
  • --scale-hvr is replaced by --scale-hover.
  • --shadow-hvr is replaced by --shadow-hover.
  • --skew-hvr is replaced by --skew-hover.
  • --translate-hvr is replaced by --translate-hover.
  • --translatex-hvr is replaced by --translatex-hover.
  • --translatey-hvr is replaced by --translatey-hover.

Collisions

A few props set two CSS properties from separate rules. Use the safer prop where there is one.

  • --br sets border-radius and border-right. For border-radius, use --radius. For border-right, no safer prop yet.
  • --bs sets border-style and box-shadow. For border-style, no safer prop yet. For box-shadow, use --boxs.
  • --cr sets clear and column-rule. For clear, no safer prop yet. For column-rule, no safer prop yet.
  • --fs sets flex-shrink and font-style. For flex-shrink, no safer prop yet. For font-style, no safer prop yet.
  • --td sets text-decoration and transition-delay. For text-decoration, no safer prop yet. For transition-delay, no safer prop yet.

All props

Every prop in the stylesheet, sorted by name. Add a tier or a state to the end of the name.

ShorthandPropertyTiersStatesMDN
--ac align-content sm, md, lg, xl, pt no
--ai align-items sm, md, lg, xl, pt no
--all all no no
--anim animation sm, md, lg, xl, pt no
--as align-self sm, md, lg, xl, pt no
--b border sm, md, lg, xl, pt hover, focus, active, on, in-on, in-hover
--bb border-bottom sm, md, lg, xl, pt no
--bblr border-bottom-left-radius sm, md, lg, xl, pt no
--bbrr border-bottom-right-radius sm, md, lg, xl, pt no
--bc border-color sm, md, lg, xl, pt hover, focus, active, on, in-on, in-hover
--bdf backdrop-filter sm, md, lg, xl, pt no
--bg background sm, md, lg, xl, pt hover, focus, active, on, in-on, in-hover
--bg-pattern-squares background-image, background-position, background-size no no
--bga background-attachment sm, md, lg, xl, pt no
--bgc background-color sm, md, lg, xl, pt hover, focus, active, on, in-on, in-hover
--bgi background-image sm, md, lg, xl, pt no
--bgp background-position sm, md, lg, xl, pt no
--bgr background-repeat sm, md, lg, xl, pt no
--bgs background-size sm, md, lg, xl, pt no
--bi -moz-column-break-inside, break-inside, page-break-inside no no
--bl border-left sm, md, lg, xl, pt no
--bottom bottom sm, md, lg, xl, pt no
--boxs box-shadow sm, md, lg, xl, pt hover, focus, active, on, in-on, in-hover
--br collision border-radius, border-right sm, md, lg, xl, pt no
--bs collision border-style, box-shadow sm, md, lg, xl, pt no
--bt border-top sm, md, lg, xl, pt no
--btlr border-top-left-radius sm, md, lg, xl, pt no
--btrr border-top-right-radius sm, md, lg, xl, pt no
--bw border-width sm, md, lg, xl, pt no
--bxs box-sizing no no
--c color sm, md, lg, xl, pt hover, focus, active, on, in-on, in-hover
--cc column-count sm, md, lg, xl, pt no
--cg column-gap sm, md, lg, xl, pt no
--col suffix required grid-template-columns xs, sm, md, lg no
--cr collision clear, column-rule sm, md, lg, xl, pt no
--cs column-span sm, md, lg, xl, pt no
--ct content sm, md, lg, xl, pt no
--cur cursor no no
--d display sm, md, lg, xl, pt no
--dir direction sm, md, lg, xl, pt no
--fb flex-basis sm, md, lg, xl, pt no
--fd flex-direction sm, md, lg, xl, pt no
--ff font-family no no
--fg flex-grow sm, md, lg, xl, pt no
--fr filter no no
--fs collision flex-shrink, font-style sm, md, lg, xl, pt no
--ft float sm, md, lg, xl, pt no
--fw flex-wrap sm, md, lg, xl, pt no
--fx flex sm, md, lg, xl, pt no
--g gap sm, md, lg, xl, pt no
--gac grid-auto-columns sm, md, lg, xl, pt no
--gar grid-auto-rows sm, md, lg, xl, pt no
--gc grid-column sm, md, lg, xl, pt no
--gg grid-gap sm, md, lg, xl, pt no
--glow box-shadow no no
--gr grid-row sm, md, lg, xl, pt no
--grad background-image no no
--grad-bottom background-image no no
--grad-top background-image no no
--grad-vars background-image no no
--grid-cols grid-template-columns no no
--gtc grid-template-columns sm, md, lg, xl, pt no
--gtr grid-template-rows sm, md, lg, xl, pt no
--h height sm, md, lg, xl, pt no
--hvr-b deprecated, use --b-hover border no no
--hvr-bc deprecated, use --bc-hover border-color no no
--hvr-bg deprecated, use --bg-hover background no no
--hvr-bgc deprecated, use --bgc-hover background-color no no
--hvr-c deprecated, use --c-hover color no no
--inset bottom, left, right, top no no
--inset-bottom bottom, left, right no no
--inset-bottom-left bottom, left no no
--inset-bottom-right bottom, right no no
--inset-top left, right, top no no
--inset-top-left left, top no no
--inset-top-right right, top no no
--jc justify-content sm, md, lg, xl, pt no
--ji justify-items sm, md, lg, xl, pt no
--js justify-self sm, md, lg, xl, pt no
--left left sm, md, lg, xl, pt no
--levitate box-shadow, transform, transition no hover
--levitate-hvr deprecated, use --levitate-hover --levitate-hover, box-shadow, transform, transition no no
--lh line-height sm, md, lg, xl, pt no
--line-clamp -webkit-box-orient, -webkit-line-clamp, display, overflow no no
--lis list-style no no
--lisp list-style-position no no
--list list-style-type no no
--ls letter-spacing sm, md, lg, xl, pt no
--m margin sm, md, lg, xl, pt no
--maxh max-height sm, md, lg, xl, pt no
--maxw max-width sm, md, lg, xl, pt no
--mb margin-bottom sm, md, lg, xl, pt no
--minh min-height sm, md, lg, xl, pt no
--minw min-width sm, md, lg, xl, pt no
--mix --mixed no no
--ml margin-left sm, md, lg, xl, pt no
--mr margin-right sm, md, lg, xl, pt no
--mt margin-top sm, md, lg, xl, pt no
--mx margin-inline-end, margin-inline-start no no
--my margin-block-end, margin-block-start no no
--o order sm, md, lg, xl, pt no
--objf object-fit sm, md, lg, xl, pt no
--objp object-position sm, md, lg, xl, pt no
--oe outline no hover, focus, active, on, in-on, in-hover
--of overflow no no
--ofx overflow-x no no
--ofy overflow-y no no
--oo outline-offset sm, md, lg, xl, pt no
--op opacity sm, md, lg, xl, pt hover, focus, active, on, in-on, in-hover
--p padding sm, md, lg, xl, pt no
--pb padding-bottom sm, md, lg, xl, pt no
--pe pointer-events no no
--pl padding-left sm, md, lg, xl, pt no
--pos position sm, md, lg, xl, pt no
--pr padding-right sm, md, lg, xl, pt no
--ps place-self sm, md, lg, xl, pt no
--pt padding-top sm, md, lg, xl, pt no
--px padding-inline-end, padding-inline-start no no
--py padding-block-end, padding-block-start no no
--radius border-radius sm, md, lg, xl, pt no
--right right sm, md, lg, xl, pt no
--rotate transform, transition no hover
--rotate-hvr deprecated, use --rotate-hover --rotate-hover, transform, transition no no
--sb scroll-behavior no no
--sc suffix required grid-column xs, sm, md, lg no
--scale transform, transition no hover
--scale-hvr deprecated, use --scale-hover --scale-hover, transform, transition no no
--shadow box-shadow, transition no hover
--shadow-hard box-shadow no no
--shadow-hvr deprecated, use --shadow-hover --shadow-hover, box-shadow, transition no no
--shadow-inset box-shadow no no
--shadow-soft box-shadow no no
--shadow-vert box-shadow no no
--size font-size sm, md, lg, xl, pt no
--skew transform, transition no hover
--skew-hvr deprecated, use --skew-hover --skew-hover, transform, transition no no
--sr suffix required grid-row xs, sm, md, lg no
--t transform sm, md, lg, xl, pt hover, focus, active, on, in-on, in-hover
--ta text-align sm, md, lg, xl, pt no
--tc transform-style sm, md, lg, xl, pt no
--td collision text-decoration, transition-delay sm, md, lg, xl, pt no
--tdn transition-duration sm, md, lg, xl, pt no
--text-3d text-shadow no no
--text-grad background-clip, background-image no no
--tn transition sm, md, lg, xl, pt no
--to transform-origin sm, md, lg, xl, pt no
--tone --toned no no
--top top sm, md, lg, xl, pt no
--tp transition-property sm, md, lg, xl, pt no
--translate transform, transition no hover
--translate-hvr deprecated, use --translate-hover --translate-hover, transform, transition no no
--translatex transform, transition no hover
--translatex-hvr deprecated, use --translatex-hover --translatex-hover, transform, transition no no
--translatey transform, transition no hover
--translatey-hvr deprecated, use --translatey-hover --translatey-hover, transform, transition no no
--ts text-shadow no no
--tt text-transform no no
--ttf transition-timing-function sm, md, lg, xl, pt no
--us user-select no no
--v visibility sm, md, lg, xl, pt no
--va vertical-align no no
--w width sm, md, lg, xl, pt no
--wb word-break sm, md, lg, xl, pt no
--weight font-weight no no
--wm writing-mode sm, md, lg, xl, pt no
--wrapper --gutter, margin-left, margin-right, max-width, padding-left, padding-right no no
--ws white-space sm, md, lg, xl, pt no
--z z-index sm, md, lg, xl, pt no

Generated from startr.css, SHA-256 0d8693035254, 168 props.

Star Fork Download

Carefully crafted by the Startr Team with the help of our contributors.

Startr Style licensed MIT, docs CC BY 3.0.