From d66fded4e0efecd73987c52d71034cd3e3694a29 Mon Sep 17 00:00:00 2001 From: ztimson Date: Sat, 1 Aug 2026 03:35:02 -0400 Subject: [PATCH] Added skill file --- Dockerfile | 1 + SKILL.md | 126 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 14 ++++-- 3 files changed, 137 insertions(+), 4 deletions(-) create mode 100644 SKILL.md diff --git a/Dockerfile b/Dockerfile index 0bbd842..8373bcb 100644 --- a/Dockerfile +++ b/Dockerfile @@ -15,3 +15,4 @@ COPY src /usr/share/nginx/html/src COPY index.html /usr/share/nginx/html COPY wave.webp /usr/share/nginx/html COPY favicon.webp /usr/share/nginx/html +COPY SKILL.md /usr/share/nginx/html diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..b00315f --- /dev/null +++ b/SKILL.md @@ -0,0 +1,126 @@ +--- +name: CSS Utilities +description: How to style all HTML websites using @ztimson/css-utils (bootstrap inspired) +modified: 2026-08-01T06:12:28.966Z +--- + +# SCSS Utility Framework + +A single-file (`_theme.scss`) utility-class system. No build step config needed beyond Sass with the `sass:map` module. Import once globally. + +## Theme Setup + +All colors/tokens live in `:root` as CSS custom properties — edit these, not the utility classes: + + +```scss +--theme-background +--theme-primary +--theme-accent +--theme-success +--theme-info +--theme-warn +--theme-danger +--theme-black +--theme-white + +// Light/dark aware variables (auto via `light-dark()`): +--theme-surface +--theme-border +--theme-text +--theme-muted +--theme-lighter (transparent) +--theme-darker (transparent) + +// Breakpoints & spacing +$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); +$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); +``` + +Force a scheme on any element: `.theme-light` / `.theme-dark`, defaults to system preference. + +## "Fix" Classes (reboot/reset helpers) + +Apply `.fix` on `body`/root wrapper for all resets, or pick individual ones: + +| Class | Purpose | +|------------------|-------------------------------------------------------------| +| `.fix-anchor` | Styled `` links using `--theme-primary` | +| `.fix-button` | `cursor: pointer` on enabled buttons | +| `.fix-dom` | 100% height/width, no margin/padding, box-sizing border-box | +| `.fix-focus` | Removes outline/tap highlight | +| `.fix-font` | Base font sizing/weights for headings & form elements | +| `.fix-scrollbar` | Styled webkit scrollbars using `--theme-muted` | +| `.fix` | All of the above | + +Other misc: `.center` (absolute centering), `.clamp` (max content width), `.reset` (`all: revert`). + +## Color Utilities + +Pattern: `.b-{color}` (border), `.bg-{color}` (background + auto contrast text), `.fg-{color}` (text color). + +Colors: `black, white, background, background-contrast, primary, primary-contrast, accent, accent-contrast, surface, border, text, muted, lighter, darker, info, success, warn, danger` + +Variants: `.bg-{color}-lighter` / `.bg-{color}-darker` (filtered overlay) for `primary, accent, background, surface, info, success, warn, danger, muted`. + +`.bg-transparent` also available. + +## Typography (`.fs-*`) + +- Weight/style: `fs-bolder, fs-bold, fs-normal, fs-lighter, fs-italic, fs-norm` +- Decoration: `fs-none, fs-strike, fs-underline` (combinable) +- Size scale: `fs-1`(1rem) → `fs-7`(2.5rem) +- Wrapping: `fs-break, fs-truncate, fs-nowrap, fs-wrap` +- Case: `fs-lowercase, fs-uppercase, fs-capitalize` + +## Borders + +- Radius: `.br-circle, .br-pill`, plus scaled `.br{t|tl|tr|b|bl|br}-{0-5}` (size keys from `$sizes`) +- Style: `.b-dash, .b-dot, .b-double, .b-none, .b-solid` +- Width (per breakpoint + direction): `.b-{0-5}`, `.b{s|t|e|b}-{0-5}` (s/t/e/b = left/top/right/bottom, logical-ish) + +## Spacing (margin/padding) + +Per breakpoint, uses `$sizes` keys (0–5): +- All sides: `.m-{s}`, `.p-{s}` +- Axis: `.mx-{s}, .my-{s}, .px-{s}, .py-{s}` +- Direction: `.m{s|t|e|b}-{size}`, `.p{s|t|e|b}-{size}` +- Auto: `.m-auto, .mx-auto, .my-auto, .m{dir}-auto` + +## Flexbox / Grid Layout + +- Display: `.d-{block|inline|inline-block|flex|inline-flex|grid|inline-grid|table|table-row|table-cell|none}` +- Direction shorthand: `.flex-c` (column), `.flex-cr` (col-reverse), `.flex-r`, `.flex-rr`; inline variants `.flex-inline-*` +- Grow/shrink: `.flex-fill, .flex-fill-even, .flex-grow-{0-3}, .flex-shrink-{0-3}` +- Wrap: `.flex-nowrap, .flex-wrap` +- `align-items/content/self-{start|end|center|baseline|stretch}` +- `justify-{start|end|center|between|around|evenly}` +- `gap-{0-5}` +- `order-{0-5}` + +## Position / Sizing + +- `.pos-{abs|fix|rel|static|stick}` +- Offsets (0–100 step via `$divisible`): `.top-{n}, .bottom-{n}, .start-{n}, .end-{n}` (percent) +- `.h-{n}`, `.w-{n}` (percent) + `.h-auto, .w-auto` +- `.fit-{contain|cover|fill|scale|none}` (object-fit) +- `.float-{start|end|none}` +- `.visible, .hidden` (visibility, not display) + +## Other Utilities + +- `.animate, .animate-none, .animate-color, .animate-opacity, .animate-pos, .animate-trans` +- `.o-{0,10,20,25,30,33,34,40,50,60,66,70,75,80,90,100}` (opacity) +- `.overflow{-x|-y}-{auto|hidden|scroll|visible}` +- `.shadow-none` to `.shadow-5`, directional `.shadow-{top|bottom|start|end}`, `.shadow-inset-{1,2}`, `.shadow-drop{,-sm,-lg}`, colored `.shadow-{primary|accent|info|success|warn|danger}` +- `.select-{all|auto|none|text}` (user-select) +- `.z-{0-5}` +- `.curs-{name}` — full CSS cursor keyword list (pointer, grab, not-allowed, zoom-in, etc.) +- `.hover:hover`, `.curs-hover` — brightness(125%) on hover +- `.align-x, .align-x-start, .align-x-end` (text-align), `.align-y*` (vertical-align) + +## Responsive Breakpoints + +Every layout/spacing/flex utility above is generated per breakpoint suffix: `-sm-, -md-, -lg-, -xl-` (min-width media queries) plus a `-print-` variant for `@media print`. No suffix = base/xs. + +Example: `w-md-50` → 50% width from `md` breakpoint up. `d-lg-flex` → flex display from `lg` up. diff --git a/index.html b/index.html index fe77060..c6ddaeb 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,11 @@ color: var(--theme-primary); letter-spacing: 0.05em; display: block; } - .tagline { font-size: 0.68rem; color: var(--theme-muted); margin-top: 2px; } + .tagline { + font-size: 0.68rem; + color: var(--theme-muted); + margin-top: 2px; + } .nav-group { padding: 14px 10px 6px; } @@ -237,7 +241,8 @@
Getting Started
@@ -286,6 +291,7 @@
CSS Utility Library

@ztimson/css-utils

Bootstrap-inspired utilities at half the size. All theming through CSS variables — no build step required.

+ SKILL.md
< 100 KBUncompressed
@@ -304,8 +310,8 @@
NPM
npm install @ztimson/css-utils
Import (pick one)
- 
@import url("@ztimson/css-utils/dist/css-utils.css");
-@import url("@ztimson/css-utils/dist/css-utils.min.css");
+						
@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">