@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.

:root {
	--theme-primary: #4979de;
	--theme-primary-contrast: black;
	--theme-accent: #2caec0;
	--theme-accent-contrast: black;

	--theme-info: #6157cc;
	--theme-success: #65c147;
	--theme-warn: #d88750;
	--theme-danger: #bf4f4f;
	--theme-black: black;
	--theme-white: white;

	--theme-animation: 0.2s linear;
	--theme-content-width: 1100px;
	--theme-font: 'Arial', sans-serif;
}

.theme-light {
	--theme-background: #fafafa;
	--theme-background-contrast: white;

	--theme-surface: #ffffff;
	--theme-border: #E5E7EB;
	--theme-muted: #6c757d;
	--theme-text: #000000;

	--theme-lighter: rgba(255, 255, 255, 0.05);
	--theme-darker: rgba(0, 0, 0, 0.05);
}

.theme-dark  {
	--theme-background: #1a1a1a;
	--theme-background-contrast: black;

	--theme-surface: #2e2e2e;
	--theme-border: #374151;
	--theme-muted: #cccccc;
	--theme-text: #ffffff;

	--theme-lighter: rgba(255, 255, 255, 0.1);
	--theme-darker: rgba(0, 0, 0, 0.1);
}

Fixes

utility

Opt-in opinionated resets. Apply .fix to enable all, or use granular classes.

.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

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

Color — .b-[color]

.b-primary

.b-accent

.b-info

.b-success

.b-warn

.b-danger

.b-muted

.b-text

.b-surface

.b-border

.b-background

.b-background-contrast

.b-primary-contrast

.b-accent-contrast

.b-lighter

.b-darker

.b-black

.b-white

Colors

utility

Background — .bg-[color]

.bg-primary

.bg-primary-contrast

.bg-accent

.bg-accent-contrast

.bg-info

.bg-success

.bg-warn

.bg-danger

.bg-surface

.bg-background

.bg-background-contrast

.bg-muted

.bg-text

.bg-border

.bg-lighter

.bg-darker

.bg-black

.bg-white

.bg-transparent

.bg-container

Lighter / Darker variants — .bg-[color]-lighter .bg-[color]-darker

.bg-primary-darker

.bg-primary

.bg-primary-lighter

.bg-success-darker

.bg-success

.bg-success-lighter

.bg-danger-darker

.bg-danger

.bg-danger-lighter

.bg-warn-darker

.bg-warn

.bg-warn-lighter

.bg-accent-darker

.bg-accent

.bg-accent-lighter

.bg-info-darker

.bg-info

.bg-info-lighter

.bg-muted-darker

.bg-muted

.bg-muted-lighter

.bg-surface-darker

.bg-surface

.bg-surface-lighter

Foreground — .fg-[color]

.fg-primary .fg-primary-contrast .fg-accent .fg-accent-contrast .fg-info .fg-success .fg-warn .fg-danger .fg-muted .fg-text .fg-surface .fg-border .fg-background .fg-background-contrast .fg-lighter .fg-darker .fg-black .fg-white

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

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 Items / Self / Content

.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