@ztimson/css-utils

Install

setup

NPM

npm install @ztimson/css-utils

Import (pick one)

@import url("@ztimson/css-utils/dist/css-utils.min.css");
@import url("@ztimson/css-utils/dist/css-utils.css");
@import url("@ztimson/css-utils/src/main.scss");

CDN

<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css">
<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.min.css">

Theming

setup

All theming through CSS variables — swap them at runtime without recompiling. Try it below: the controls write straight to :root and affect every utility & component on this page.

Live Theme Editor

Edit a variable and watch the whole page update in real time.

Theme Variables — current :root values

Fixes

utility

Opt-in opinionated resets. Apply .fix to enable all, or use granular classes. This very page is themed with .fix — its background, font and scrollbars all come from these classes rather than bespoke CSS.

.fix .fix-anchor .fix-button .fix-dom .fix-focus .fix-font .fix-scrollbar .reset

Anchor fix example

This link uses .fix-anchor — styled with theme color, underlines on hover with cursor

Use .reset to remove fixes & styling

Banner

components

.banner .info .success .warn .danger .primary .accent .black .white

Button

components

.button .info .success .warn .danger .primary .accent .white .black

Card

components

.card

A .card is just a themed surface: background, border and a soft shadow.

Checkbox

components

.checkbox

Checked Unchecked Disabled

Radio

components

.radio

Option A Option B Disabled

Toggle

components

.toggle

Enabled Disabled state Locked

This is the same component powering the light/dark switch in the header.

Chip

components

.chip

Default Another chip 42

Expander

components

Click to expand

Built on native <details>/<summary> — no JS required.

Indicator

components

.indicator .success .warn .danger .primary .accent .white .black

i ✓ ! ✕ P A W B

Input

components

.input

Color — input[type="color"].input

Same surface & radius treatment as text inputs

Input Group

components

.input-group

$

Select

components

.select

Range

components

.range

Table

components

.table .striped .select

Name	Role	Status
Jane Doe	Admin	Active
John Smith	Editor	Pending
Alex Kim	Viewer	Invited

Striped rows — .table.striped darkens every other row

Name	Role	Status
Jane Doe	Admin	Active
John Smith	Editor	Pending
Alex Kim	Viewer	Invited

Selectable rows — .table.select shows a pointer cursor per-row

Name	Role	Status
Jane Doe	Admin	Active
John Smith	Editor	Pending
Alex Kim	Viewer	Invited

Misc

utility

Center — .center

.center

Clamp — .clamp

.clamp — restricted to --theme-content-width

Anchor — .anchor-c .anchor-e .anchor-s

.anchor-s

.anchor-c

.anchor-e

Animate

utility

.animate-[color|none|opacity|pos|trans]

Controlled by --theme-animation. Each variant limits which CSS properties transition.

.animate

.animate-color

.animate-opacity

.animate-pos

.animate-trans

.animate-none

Borders

utility

Width — .b[b|e|s|t]-[bp]-[0–5]

.b-0

.b-1

.b-2

.b-3

.b-4

.b-5

.bt-3

.bb-3

.bs-3

.be-3

Radius — .br-[0–5|circle|pill] + corners .brt- .brb- .brs- .bre-

.br-0

.br-1

.br-2

.br-3

.br-4

.br-5

.br-pill

.br-circle

.brt-3

.brb-3

.brs-3

.bre-3

.brtl-3

.brtr-3

.brbl-3

.brbr-3

Style — .b-[dash|dot|double|none|solid]

.b-dash

.b-dot

.b-double

.b-solid

.b-none

Border — .b-[color]

.b-primary

.b-primary-contrast

.b-accent

.b-accent-contrast

.b-info

.b-success

.b-warn

.b-danger

.b-muted

.b-surface

.b-background

.b-background-contrast

.b-border

.b-text

.b-black

.b-white

Colors

utility

Background — .bg-[color]

primary

.bg-primary-darker

.bg-primary

.bg-primary-lighter

.bg-primary-contrast

accent

.bg-accent-darker

.bg-accent

.bg-accent-lighter

.bg-accent-contrast

info

.bg-info-darker

.bg-info

.bg-info-lighter

success

.bg-success-darker

.bg-success

.bg-success-lighter

warn

.bg-warn-darker

.bg-warn

.bg-warn-lighter

danger

.bg-danger-darker

.bg-danger

.bg-danger-lighter

muted

.bg-muted-darker

.bg-muted

.bg-muted-lighter

surface

.bg-surface-darker

.bg-surface

.bg-surface-lighter

background

.bg-background-darker

.bg-background

.bg-background-lighter

.bg-background-contrast

border

.bg-border-darker

.bg-border

.bg-border-lighter

text

.bg-text-darker

.bg-text

.bg-text-lighter

black

.bg-black-darker

.bg-black

.bg-black-lighter

white

.bg-white-darker

.bg-white

.bg-white-lighter

Transparency

.bg-shade

.bg-shade-alt

.bg-lighter

.bg-darker

.bg-transparent

Foreground — .fg-[color]

primary .fg-primary-darker .fg-primary .fg-primary-lighter .fg-primary-contrast

accent .fg-accent-darker .fg-accent .fg-accent-lighter .fg-accent-contrast

info .fg-info-darker .fg-info .fg-info-lighter

success .fg-success-darker .fg-success .fg-success-lighter

warn .fg-warn-darker .fg-warn .fg-warn-lighter

danger .fg-danger-darker .fg-danger .fg-danger-lighter

muted .fg-muted-darker .fg-muted .fg-muted-lighter

surface .fg-surface-darker .fg-surface .fg-surface-lighter

background .fg-background-darker .fg-background .fg-background-lighter .fg-background-contrast

border .fg-border-darker .fg-border .fg-border-lighter

text .fg-text-darker .fg-text .fg-text-lighter

black .fg-black-darker .fg-black .fg-black-lighter

white .fg-white-darker .fg-white .fg-white-lighter

Transparency .fg-lighter .fg-darker

Alignment — .align-x[-start|-end] .align-y[-start|-end]

.align-x-start

.align-x (center)

.align-x-end

.align-y-start

.align-y

.align-y-end

Glow

utility

.bg-glow-[primary|accent][-sm|-lg]

A soft radial gradient anchored to the top-left corner — it's a plain background-image, so it layers behind any content. This page's own hero header uses .bg-glow-primary.

.bg-glow-primary-sm

.bg-glow-primary

.bg-glow-primary-lg

.bg-glow-accent-sm

.bg-glow-accent

.bg-glow-accent-lg

.bg-glow-info-sm

.bg-glow-info

.bg-glow-info-lg

.bg-glow-success-sm

.bg-glow-success

.bg-glow-success-lg

.bg-glow-warn-sm

.bg-glow-warn

.bg-glow-warn-lg

.bg-glow-danger-sm

.bg-glow-danger

.bg-glow-danger-lg

Cursors

utility

.curs-alias

.curs-auto

.curs-cell

.curs-col-resize

.curs-copy

.curs-crosshair

.curs-default

.curs-grab

.curs-grabbing

.curs-help

.curs-move

.curs-not-allowed

.curs-pointer

.curs-progress

.curs-row-resize

.curs-text

.curs-none

.curs-wait

.curs-vertical-text

.curs-zoom-in

.curs-zoom-out

Display

utility

.d-block .d-inline .d-inline-block .d-flex .d-inline-flex .d-grid .d-inline-grid .d-table .d-table-row .d-table-cell .d-none .d-md-none .d-lg-flex

.d-inline-block

.d-inline

← .d-none is not rendered

Flex

utility

Direction — .flex-[bp]-[c|cr|r|rr] .flex-inline-[bp]-[c|cr|r|rr]

.flex-c

1

2

3

1

2

3

.flex-cr

.flex-r

1

2

3

.flex-rr

1

2

3

.justify-start

A

B

C

.justify-end

A

B

C

.justify-center

A

B

C

.justify-evenly

A

B

C

.justify-around

A

B

C

.justify-between

A

B

C

Align Content — .align-content-[bp]-[start|end|center|baseline|stretch]

A

B

.align-content-start

A

B

.align-content-center

A

B

.align-content-end

A

B

.align-content-stretch

Align Items — .align-items-[bp]-[start|end|center|baseline|stretch]

.align-items-start

.align-items-center

.align-items-end

.align-items-stretch

Align Self — .align-self-[bp]-[start|end|center|baseline|stretch]

.align-self-[bp]-start

.align-self-[bp]-center

.align-self-[bp]-end

.align-self-[bp]-stretch

Grow / Shrink / Fill

.flex-[bp]-grow-1

.flex-[bp]-grow-2

.flex-[bp]-grow-3

.flex-[bp]-fill

.flex-[bp]-fill-even

.flex-[bp]-shrink-0

.flex-[bp]-shrink-1

Wrap

.flex-[bp]-nowrap

Item 1

Item 2

Item 3

.flex-[bp]-wrap

Item 1

Item 2

Item 3

Order — .order-[bp]-[0–5]

#1 / .order-5

#2 / .order-1

#3 / .order-3

#4 / .order-2

Gap — .gap-[bp]-[0–5]

.gap-0

A

B

C

.gap-1

A

B

C

.gap-2

A

B

C

.gap-3

A

B

C

.gap-4

A

B

C

.gap-5

A

B

C

Float

utility

.float-[bp]-[start|end|none]

.float-end

.float-start

.float-none — stays in flow

Font Style

utility

Size — .fs-[1–7]

.fs-1 — 1rem .fs-2 — 1.25rem .fs-3 — 1.5rem .fs-4 — 1.75rem .fs-5 — 2rem .fs-6 — 2.25rem .fs-7 — 2.5rem

Weight

.fs-lighter .fs-normal .fs-bold .fs-bolder

Style & Decoration

.fs-italic .fs-norm (normal) .fs-underline .fs-strike .fs-strike.fs-underline .fs-none

Transform

.fs-lowercase EXAMPLE .fs-uppercase example .fs-capitalize example text

Wrapping

.fs-truncate

Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

.fs-nowrap

Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor.

.fs-wrap

Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

.fs-break

Superlongwordthatwouldnormallyoverflowbutbreakswithfsbreakclassapplied.

Hover

utility

.hover .curs-hover

.hover — hover me (brightness)

.curs-hover — pointer + brightness

Object Fit

utility

.fit-[bp]-[contain|cover|fill|scale|none]

.fit-contain

.fit-cover

.fit-fill

.fit-scale

.fit-none

Opacity

utility

.o-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]

0

10

20

25

30

33

34

40

50

60

66

70

75

80

90

100

Overflow

utility

.overflow-[x|y]-[auto|hidden|scroll|visible]

.overflow-auto

.overflow-hidden

.overflow-scroll

.overflow-x-auto — scrolls horizontally

.overflow-x-auto

.overflow-y-auto
scrolls
vertically
here

.overflow-y-auto

Position

utility

Type — .pos-[abs|fix|rel|static|stick]

.pos-abs (absolute) .pos-fix (fixed) .pos-rel (relative) .pos-static .pos-stick (sticky)

Coordinates — .[top|bottom|start|end]-[0–100]

.top-0 .start-0

.top-0 .end-0

.center

.bottom-0 .start-0

.bottom-0 .end-0

Anchor — .anchor-[c|e|s]

.anchor-s

.anchor-c

.anchor-e

Shadows

utility

Elevation — .shadow .shadow-[1–5] .shadow-none

.shadow-1 inputs

.shadow-2 cards

.shadow / .shadow-3 dropdowns

.shadow-4 modals

.shadow-5 drawers

.shadow-none

Directional — .shadow-[top|bottom|start|end]

.shadow-top

.shadow-bottom

.shadow-start

.shadow-end

.shadow-primary

.shadow-accent

.shadow-info

.shadow-success

.shadow-warn

.shadow-danger

Inset — .shadow-inset-[1|2]

.shadow-inset-1

.shadow-inset-2

Drop (filter-based, respects SVG/PNG shape) — .shadow-drop-sm .shadow-drop .shadow-drop-lg

Unlike box-shadow, filter drop-shadow respects transparency

.shadow-drop-sm

.shadow-drop

.shadow-drop-lg

User Select

utility

.select-[all|auto|none|text]

.select-all — click to select all

.select-auto — default behavior

.select-none — cannot select this

.select-text — text only selection

Size

utility

.w-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100|auto]

.h-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100|auto]

.w-25

.w-50

.w-75

.w-100

.h-25

.h-50

.h-75

.h-100

Spacing

utility

Margin: .m[b|e|s|t|x|y]-[bp]-[0–5|auto]

Padding: .p[b|e|s|t|x|y]-[bp]-[0–5]

.mx-auto

.my-3 .py-3

.mt-3 .pt-3

.mb-3 .pb-3

.ms-3 .ps-3

.me-3 .pe-3

.mx-3 .px-3

.m-0 .p-0

.m-1 .p-1

.m-2 .p-2

.m-3 .p-3

.m-4 .p-4

.m-5 .p-5

Visibility

utility

.[hidden|visible]-[bp]

.hidden preserves layout space. Use .d-none to remove from flow entirely.

.visible

Z-Index

utility

.z-[0–5]

z-5

z-4

z-3

z-2

z-1

z-0

@ztimson/css-utils

Install

Theming

Fixes

Components

Banner

Button

Card

Checkbox

Radio

Toggle

Chip

Expander

Indicator

Input

Input Group

Select

Range

Table

Utilities

Misc

Animate

Borders

Colors

Glow

Cursors

Display

Flex

Float

Font Style

Hover

Object Fit

Opacity

Overflow

Position

Shadows

User Select

Size

Spacing

Visibility

Z-Index