@ztimson/css-utils

CSS Utils is a css library based on bootstrap. At 1/3 the size, its all the utilities without the bloat.

Some additional utilities have been added & a few have been renamed to conform to convention or remove redundancy.

Setup

Install

NPM


// Install
npm install @ztimson/css-utils

// Import one of: (CSS/minified/SCSS)
@import url("@ztimson/css-utils/dist/css-utils.css");
@import url("@ztimson/css-utils/dist/css-utils.min.css");
@import url("@ztimson/css-utils/src/main.scss");

Script Tags


<!-- Include one of -->
<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css" ></link>
<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.min.css" ></link>
<link rel="stylesheet" href="https://css.zakscode.com/src/main.scss" ></link>

Theming

Theming is minimal since its so opinionated. Its all done through CSS variables allowing runtime manipulation without having to recompile.


// Theme colors -- what ever you like
--theme-backdrop: #dddddd; // Background color of body, not to be confused with `--theme-clear`
--theme-primary: #ff0000;
--theme-accent: #0000ff;
--theme-info: #6157cc;
--theme-success: #65c147;
--theme-warn: #d88750;
--theme-danger: #bf4f4f;
--theme-black: black;
--theme-white: white;

// Misc
--theme-animation: 0.2s linear; // Animation style
--theme-content-width: 1100px; // Max width of `.clamped` content
--theme-font: Arial, sans-serif; // Forces font globally

// Light theme
.theme-light {
  --theme-clear: #ffffff; // Content background (Usually white or off-black which contrasts --theme-text)
  --theme-text: #000000; // Text color (Should contrast --theme-clear)
  --theme-muted: #6c757d; // Muted text color (Should have less than contrast than --theme-text)
}

// Dark theme
.theme-dark {
  --theme-clear: #2e2e2e; // Content background (Usually white or off-black which contrasts --theme-text)
  --theme-text: #ffffff; // Text color (Should contrast --theme-clear)
  --theme-muted: #cccccc; // Muted text color (Should have less than contrast than --theme-text)
}

// Multiple themes can be toggled via CSS classes
.theme-custom {
  ...
}

The generated breakpoints & margin/padding sizes can also be adjusted through SCSS.


$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); // Device size
$sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); // Padding/Margin, etc...

Utilities

Alignment

.align-[x|y]-[xs|sm|md|lg|xl]-[start|end]

text-align & vertical-align are used with align-x & align-y respectively.

.align-x-start

.align-x

.align-x-end

.align-y-end

.align-y

.align-y-start

Animations

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

Style changes will be animated using the --theme-animation variable

.animate

.animate-color

.animate-opacity

.animate-none

.animate-pos

.animate-trans

Borders

Color

.b-accent

.b-black

.b-danger

.b-info

.b-muted

.b-primary

.b-success

.b-text

.b-warn

.b-white

Radius

.br-[0-5]

.br-0

.br-1

.br-2

.br-3

.br-4

.br-5

.br-pill

.br-circle

Style

.b-[xs|sm|md|lg|xl]-[dash|dot|double|none|solid]

.b-dash

.b-dot

.b-double

.b-none

.b-solid

Width

.b[b|e|s|t]-[xs|sm|md|lg|xl]-[0-5]

.b-0

.b-1

.b-2

.b-3

.b-4

.b-5

.bb-5

.be-5

.bs-5

.bt-5

Colors

Background

.bg-accent

.bg-backdrop

.bg-black

.bg-clear

.bg-danger

.bg-info

.bg-muted

.bg-primary

.bg-success

.bg-transparent

.bg-text

.bg-warn

.bg-white

Borders

.b-accent

.b-black

.b-danger

.b-info

.b-muted

.b-primary

.b-success

.b-text

.b-warn

.b-white

Foreground

.fg-accent

.fg-black

.fg-clear

.fg-danger

.fg-info

.fg-muted

.fg-primary

.fg-success

.fg-text

.fg-warn

.fg-white

Cursors

.curs-alias

.curs-auto

.curs-cell

.curs-col-resize

.curs-copy

.curs-crosshair

.curs-default

.curs-grab

.curs-grabbing

.curs-help

.curs-hover

.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

Flex

Direction

.flex-[xs|sm|md|lg|xl]-[c|r|rc|rr]

.flex-c

Item 1

Item 2

Item 3

.flex-cr

Item 1

Item 2

Item 3

.flex-r

Item 1

Item 2

Item 3

.flex-rr

Item 1

Item 2

Item 3

Justify / Align

.justify-start

Item 1

Item 2

Item 3

.justify-center

Item 1

Item 2

Item 3

.justify-end

Item 1

Item 2

Item 3

.justify-around

Item 1

Item 2

Item 3

.justify-between

Item 1

Item 2

Item 3

.justify-evenly

Item 1

Item 2

Item 3

.align-self-baseline

.align-self-center

.align-self-end

.align-self-start

.align-self-stretch

Order

.order-[xs|sm|md|lg|xl]-[0-5]

.order-5

.order-4

.order-3

.order-2

.order-1

.order-0

Size

.flex-[xs|sm|md|lg|xl]-[grow|shrink]-[0-3]

.flex-grow-1

.flex-shrink-1

.flex-grow-1

.flex-grow-2

.flex-fill-[even]

.flex-fill (Matches content ratio)

.flex-fill

.flex-fill-even (Doesn't match content ratio)

.flex-fill-even

Wrap

.flex-[xs|sm|md|lg|xl]-[nowrap|wrap]

.flex-nowrap

Item 1

Item 2

Item 3

.flex-wrap

Item 1

Item 2

Item 3

Float

.float-[xs|sm|md|lg|xl]-[end|none|start]

.float-none

.float-end

.float-start

Font Style

Decoration

.fs-[italic|line-through|none|underline]

.fs-italic .fs-line-through .fs-none .fs-underline

Size

.fs-[1-7]

.fs-1 .fs-2 .fs-3 .fs-4 .fs-5 .fs-6 .fs-7

Weight

.fs-[bold|bolder|lighter|normal]

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

Wrapping

.fs-[break|nowrap|truncate|wrap]

.fs-break	Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit
.fs-nowrap	Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit
.fs-truncate	Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit
.fs-wrap	Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit

Hover

.curs-hover|.hover

.curs-hover

.hover

Object Fit

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

.fit-contain

.fit-cover

.fit-fill

.fit-scale

.fit-none

Overflow

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

.overflow-auto

.overflow-hidden

.overflow-scroll

.overflow-visible

Opacity

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

.o-0

.o-10

.o-20

.o-30

.o-40

.o-50

.o-60

.o-70

.o-80

.o-90

.o-100

Position

.pos-[abs|rel|static|stick]

Anchor

.anchor-[c|e|s]

.anchor-s

.anchor-c

.anchor-e

Position

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

.top-0 .start-0

.top-0 .end-0

.top-50 .start-50

.bottom-50 .end-50

.bottom-0 .start-0

.bottom-0 .end-0

.center

Shadows

.shadow-[drop|none|white]

.shadow

.shadow-drop
.shadow-white

.shadow-none

Size

Height

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

.h-100

.h-10

.h-90

.h-20

.h-80

.h-25

.h-75

.h-30

.h-70

.h-34

.h-66

.h-40

.h-60

.h-50

Width

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

.h-100

.h-10

.h-90

.h-20

.h-80

.h-25

.h-75

.h-30

.h-70

.h-34

.h-66

.h-40

.h-60

.h-50

Spacing

Margin: .m[b|e|s|t|x|y]-[xs|sm|md|lg|xl]-[0-5|auto]

Padding: .p[b|e|s|t|x|y]-[xs|sm|md|lg|xl]-[0-5]

.m-0
.p-0

.m-1
.p-1

.m-2
.p-2

.m-3
.p-3

.m-4
.p-4

.m-5
.p-5

.mb-3
.pb-3

.me-3
.pe-3

.ms-3
.ps-3

.mt-3
.pt-3

.mx-3
.px-3

.my-3
.py-3

.mx-auto
.p-3

User Select

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

.select-all

.select-auto

.select-none

.select-text

Visibility

.[hidden|visible]-[xs|sm|md|lg|xl]

.visible

Z-Index

.z-[0-5]

z-5

z-4

z-3

z-2

z-1

z-0