@ztimson/css-utils

Install

setup

NPM

npm install @ztimson/css-utils

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

// Utilities
@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/utils.scss");

CDN

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

// Utilities
<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.min.css">
<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.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