CSSkel 3.0.0 - Comprehensive Documentation

Grid System

CSSkel 3.0.0 features a powerful CSS Grid-based layout system with desktop-first responsiveness. Customize the number of columns, spans, gaps, and use automatic column distribution for flexible layouts.

Grid Containers

Create a grid with grid-container or columns classes. By default, grids have 3 columns on desktop.

Deprecation Notice: The grid-container class is deprecated in CSSkel 3.0. Use columns for all new layouts.

Example: 3-Column Layout

Column 1

Column 2

Column 3

Column Classes

Set the number of columns in your grid. These classes replace the default 3-column layout:

Class	Columns	Responsive
`cols:1`	1 column (full width stacking)	`@tablet`, `@mobile`, `@laptop`
`cols:2`	2 columns	`@tablet`, `@mobile`, `@laptop`
`cols:3` to `cols:12`	3 to 12 columns	`@tablet`, `@mobile`, `@laptop`

Example: 4-Column Grid

<div class="columns cols:4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

Flexible Columns (Softcols)

Use softcols:* for flexible column layouts without min-width constraint. Columns shrink to fit content when needed:

Class	Behavior
`softcols:1` to `softcols:12`	Flexible columns without minimum width constraints. Perfect for content-adaptive layouts.

Example: Flexible 4-Column Grid

<div class="columns softcols:4">
    <div>Short</div>
    <div>Medium content here</div>
    <div>X</div>
    <div>Long content that needs more space</div>
</div>

Column Spanning

Make individual grid items span multiple columns:

Class	Effect	Responsive
`colspan:2`	Span 2 columns	`@tablet`, `@mobile`
`colspan:3` to `colspan:12`	Span 3 to 12 columns	`@tablet`, `@mobile`

Example: Column Spanning

<div class="columns cols:4">
    <div class="colspan:2">Spans 2 columns (50% width)</div>
    <div>Regular column</div>
    <div>Regular column</div>
    <div class="colspan:4">Spans full width (all 4 columns)</div>
</div>

Row Spanning

Make grid items span multiple rows (for more complex layouts):

Class	Effect
`rowspan:2` to `rowspan:12`	Span 2 to 12 rows. Useful for sidebars, hero sections, or complex grid layouts.

Gap Control

Control the spacing between grid items with gap classes:

Class	Gap Value	CSS Value	Responsive
`gap:0`	No gap	0	`@tablet`, `@mobile`
`gap:1`	Extra small	0.25rem (4px)	`@tablet`, `@mobile`
`gap:2`	Small	0.5rem (8px)	`@tablet`, `@mobile`
`gap:3`	Medium-small	0.75rem (12px)	`@tablet`, `@mobile`
`gap:4`	Medium	1rem (16px)	`@tablet`, `@mobile`
`gap:5`	Medium-large	1.25rem (20px)	`@tablet`, `@mobile`
`gap:6`	Large	1.5rem (24px)	`@tablet`, `@mobile`
`gap:7`	Extra large	1.75rem (28px)	`@tablet`, `@mobile`
`gap:8`	Extra large+	2rem (32px)	`@tablet`, `@mobile`
`gap:9`	Huge	2.25rem (36px)	`@tablet`, `@mobile`
`gap:10`	Huge+	2.5rem (40px)	`@tablet`, `@mobile`
`gap:15`	Extra huge	3.75rem (60px)	`@tablet`, `@mobile`
`gap:20`	Maximum	5rem (80px)	`@tablet`, `@mobile`

Example: Grid with Gap

<div class="columns cols:3 gap:4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Responsive gap -->
<div class="columns cols:3 gap:6 gap:3@tablet gap:2@mobile">
    <div>Larger gap on desktop, smaller on mobile</div>
    <div>...</div>
    <div>...</div>
</div>

Automatic Column Distribution (Autocols)

Use maxcols:* for automatic, responsive column distribution. Perfect for card grids and dynamic layouts that adapt to container width:

Class	Effect	Use Case
`maxcols:1`	Auto-fit with max 1 column	Single column adaptive to container
`maxcols:2`	Auto-fit with max 2 columns	Two-column responsive layout
`maxcols:3`	Auto-fit with max 3 columns	Three-column card grid
`maxcols:4` to `maxcols:9`	Auto-fit with max 4-9 columns	Complex layouts, thumbnail grids, dashboard widgets

Example: Automatic Column Distribution

<!-- 3-column card grid that auto-fits -->
<div class="columns maxcols:3 gap:4">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
    <div class="card">Card 5</div>
</div>

<!-- The grid automatically:
     - Shows 3 columns on wide screens
     - Reduces to 2 columns on tablets
     - Shows 1 column on mobile
     - All without additional responsive classes needed!
-->

Grid Features Summary:

✓ Desktop-first responsive system with @tablet, @mobile, @laptop prefixes
✓ Flexible column configuration (1-12 columns) via .cols:*
✓ Soft columns (.softcols:*) for content-adaptive layouts
✓ Column spanning (.colspan:*) for complex grid arrangements
✓ Row spanning (.rowspan:*) for advanced layouts
✓ Precise gap control (13 gap values from 0 to 5rem)
✓ Automatic column distribution (.maxcols:*) for responsive card grids
✓ Pure CSS Grid - no JavaScript needed
✓ Full responsive support with prefix overrides

Complete Grid Example

Example: Complex Layout

<div class="columns cols:12 gap:4">
    <!-- Header spans full width -->
    <div class="colspan:12">
        <h1>Dashboard Header</h1>
    </div>

    <!-- Sidebar spans 3 columns, content area spans 9 -->
    <aside class="colspan:3">Navigation</aside>
    <main class="colspan:9">Main Content</main>

    <!-- Footer spans full width -->
    <footer class="colspan:12">Footer</footer>
</div>

<!-- Responsive variant -->
<div class="columns cols:12 cols:1@tablet cols:1@mobile gap:4 gap:2@mobile">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Colors & Backgrounds

CSSkel provides semantic color utility classes with automatic opacity variants generated via color-mix(). Colors are fully themeable via CSS variables and support dark/light mode switching via data-theme attribute.

Base Semantic Colors

These are the default light theme values defined in settings.css. Override them in your own stylesheet to match your brand:

Variable	Default Value (Light)	Purpose
`--text`	#091613	Default text color
`--background`	#f2f9f8	Page background color
`--primary`	#41689b	Primary brand color
`--secondary`	#a4aad8	Secondary accent color
`--accent`	#1a3aae	Main accent/highlight color
`--success`	#076b3d	Success/positive state
`--warning`	#ca9c03	Warning/caution state
`--error`	#cf090293	Error/destructive state

Nota: No existe una variable --info en CSSkel. Para estados informativos usa --accent o define tu propia variable.

Example: Semantic Colors

<div class="bg:success">Success message</div>
<div class="bg:warning">Warning alert</div>
<div class="bg:error">Error message</div>
<div class="bg:accent">Accent / info notification</div>

Background Colors (Full Reference)

Category	Classes	Description
Semantic	`bg:primary`, `bg:secondary`, `bg:accent`	Brand colors — customize via CSS variables
States	`bg:success`, `bg:warning`, `bg:error`	Semantic state colors for feedback (no `bg:info`)
Neutral	`bg:text`, `bg:background`	Text color and background color as backgrounds

Opacity Variants via color-mix()

Each color has 10 transparency variants generated using color-mix(in srgb, var(--color) X%, transparent). This is different from CSS opacity — only the background color is affected, not the content inside.

Level	Class Format	CSS Variable	Use Case
5%	`bg:primary-5`	`--color-primary-5`	Subtle backgrounds, hover states
10%	`bg:primary-10`	`--color-primary-10`	Slight tints, container backgrounds
20%	`bg:primary-20`	`--color-primary-20`	Light backgrounds, UI panels
30%	`bg:primary-30`	`--color-primary-30`	Noticeable tint, button hover
40%	`bg:primary-40`	`--color-primary-40`	Medium overlay
50%	`bg:primary-50`	`--color-primary-50`	Semi-transparent, balanced
60%	`bg:primary-60`	`--color-primary-60`	Strong background
70%	`bg:primary-70`	`--color-primary-70`	Dark background, readable overlay
80%	`bg:primary-80`	`--color-primary-80`	Very dark background
90%	`bg:primary-90`	`--color-primary-90`	Nearly opaque

The same pattern applies to all colors: secondary, accent, success, warning, error, text, and background.

Example: Opacity Variants

<div class="bg:primary-5">Subtle hint of primary color</div>
<div class="bg:primary-50">50% transparent primary</div>
<div class="bg:primary-80">Nearly full primary color</div>

Text Colors

Class	Purpose
`color:primary`	Primary brand color on text
`color:secondary`	Secondary color on text
`color:success`, `color:warning`, `color:error`	Semantic state text colors
`color:text`	Default text color (`--text`)
`color:text-inverse`	Auto-computed inverse of text color via `oklch()`

Using Color Variables

Example: Customizing Colors

/* Override in your own stylesheet after loading csskel.css */
:root {
    --primary: #3b82f6;
    --secondary: #8b5cf6;
    --accent: #ec4899;
    --success: #076b3d;
    --warning: #ca9c03;
    --error: #e03c3c;
    --background: #ffffff;
    --text: #1f2937;
}

/* Opacity variants are auto-generated — no extra work needed */
/* Use them directly: */
.my-card {
    background: var(--color-primary-10);
    border-color: var(--color-primary-40);
}

Additional Component Variables

CSSkel also exposes useful derived variables for borders and interactive states:

Variables disponibles

--text-inverse          /* Auto-computed opposite of --text via oklch() */
--border-color          /* Defaults to --color-text-40 */
--border-color-softer   /* Defaults to --color-text-20 */
--accent-color          /* Alias of --color-primary */
--accent-color-hover    /* Auto-darkened version via oklch() */

Dark & Light Theme Switching

CSSkel supports theme switching via the data-theme attribute on the <html> element. Both "dark" and "light" overrides are defined in settings.css:

Example: Theme Switching

<!-- Force dark theme -->
<html data-theme="dark">

<!-- Force light theme -->
<html data-theme="light">

<!-- Switch via JavaScript -->
document.documentElement.dataset.theme =
    document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';

Dark Mode Color Values

These are the actual values defined in settings.css for [data-theme="dark"]:

Dark Theme Variables (settings.css)

[data-theme="dark"] {
    --text:       #e9f6f3;
    --background: #060e0d;
    --primary:    #648bbe;
    --secondary:  #262c59;
    --accent:     #5272e5;
    --success:    #34c48f;
    --warning:    #e2b203;
    --error:      #e03c3c;
}

Color System Summary:

✓ Semantic color classes for primary, secondary, accent, success, warning, error
✓ 10 transparency variants per color (5%–90%) via color-mix()
✓ Fully customizable via CSS variables — no preprocessor needed
✓ data-theme="dark" and data-theme="light" support
✓ Auto-computed --text-inverse via oklch()
✓ Derived border and hover color variables included
⚠ No --info variable — use --accent or define your own

Typography

CSSkel provides 15 carefully selected font stacks and comprehensive text styling utilities.

Font Stacks Available (15 Curated Options)

CSSkel includes 15 professionally curated font stacks from Modern Font Stacks, covering all typography needs with visual samples:

Class	Description	Use Case	Visual Sample
`font:system-ui`	Modern system fonts	Default, modern web	The Quick Brown Fox
`font:transitional`	Transitional serifs (Charter, Cambria)	Professional documents	The Quick Brown Fox
`font:old-style`	Old-style serifs (Iowan Old Style, Palatino)	Classic, traditional look	The Quick Brown Fox
`font:humanist`	Humanist sans-serifs (Seravek, Calibri)	Friendly, accessible	The Quick Brown Fox
`font:geometric-humanist`	Geometric humanist (Avenir Next, Trebuchet)	Modern, balanced design	The Quick Brown Fox
`font:classical-humanist`	Classical humanist (Optima, Candara)	Elegant, sophisticated	The Quick Brown Fox
`font:neo-grotesque`	Neo-grotesque (Inter, Roboto, Helvetica Neue)	Clean, modern UI	The Quick Brown Fox
`font:monospace-slab-serif`	Monospace slab serif (Courier, Menlo)	Terminal/code, retro	The Quick Brown Fox
`font:monospace-code`	Monospace code fonts (SF Mono, Monaco, Consolas)	Code snippets, technical	The Quick Brown Fox
`font:industrial`	Industrial sans-serif (Bahnschrift, DIN Alternate)	Bold, technical appearance	The Quick Brown Fox
`font:rounded-sans`	Rounded sans-serif (Rounded Mplus, Apple system fonts)	Friendly, approachable	The Quick Brown Fox
`font:slab-serif`	Slab serif (Rockwell, Courier Std)	Headlines, strong presence	The Quick Brown Fox
`font:antique`	Antique serif (Superclarendon, Bookman)	Classical, vintage	The Quick Brown Fox
`font:didone`	Didone serif (Didot, Bodoni)	Editorial, luxury brands	The Quick Brown Fox
`font:handwritten`	Handwriting style (Segoe Print, Bradley Hand)	Personal, artistic touch	The Quick Brown Fox

Example: Font Stack Usage

<!-- Use any of the 15 font stacks -->
<h1 class="font:didone">Luxury Brand Title</h1>
<body class="font:system-ui">...</body>

<!-- Responsive typography -->
<h2 class="font:neo-grotesque font:slab-serif@mobile">
    Clean on desktop, strong on mobile
</h2>

Font Sizes

Responsive font sizing with desktop-first approach. Scale from 0.5rem to 7rem with 15 distinct sizes:

Class	Size	Pixels	Use Case	Responsive
`fs:.5`	0.5rem	8px	Extra small, micro text	`@tablet`, `@mobile`
`fs:.6`	0.6rem	9.6px	Very small labels	`@tablet`, `@mobile`
`fs:.7`	0.7rem	11.2px	Small annotations	`@tablet`, `@mobile`
`fs:.8`	0.8rem	12.8px	Small text	`@tablet`, `@mobile`
`fs:.9`	0.9rem	14.4px	Very small text	`@tablet`, `@mobile`
`fs:1.5`	1.5rem	24px	Subheading	`@tablet`, `@mobile`
`fs:2`	2rem	32px	Heading (h3/h4)	`@tablet`, `@mobile`
`fs:2.5`	2.5rem	40px	Large heading	`@tablet`, `@mobile`
`fs:3`	3rem	48px	Display size (h2)	`@tablet`, `@mobile`
`fs:4`	4rem	64px	Large display	`@tablet`, `@mobile`
`fs:5`	5rem	80px	Extra large display	`@tablet`, `@mobile`
`fs:6`	6rem	96px	Massive display	`@tablet`, `@mobile`
`fs:7`	7rem	112px	Hero/banner text	`@tablet`, `@mobile`

Example: Responsive Font Sizes

<!-- Scale heading down on smaller screens -->
<h1 class="fs:4 fs:3@tablet fs:2@mobile">
    Large on desktop, medium on tablet, small on mobile
</h1>

<!-- Body text stays readable -->
<p class="fs:1 fs:.9@mobile">Standard paragraph text</p>

<!-- Display text -->
<div class="fs:5">5rem hero text</div>

Line Height

Control vertical spacing between lines of text for readability and visual hierarchy:

Class	Value	Use Case	Responsive
`lh:1`	1	No line spacing (very tight, use for display text)	`@tablet`, `@mobile`
`lh:1.2`	1.2	Compact spacing (headlines, titles)	`@tablet`, `@mobile`
`lh:1.4`	1.4	Standard text (UI, comfortable reading)	`@tablet`, `@mobile`
`lh:1.6`	1.6	Body text (default, most readable)	`@tablet`, `@mobile`
`lh:1.8`	1.8	Relaxed (accessibility, long-form content)	`@tablet`, `@mobile`
`lh:2`	2	Double-spaced (very readable, airy)	`@tablet`, `@mobile`
`lh:2.5`	2.5	Very relaxed (poetry, special layouts)	`@tablet`, `@mobile`
`lh:3`	3	Triple-spaced (extreme spacing)	`@tablet`, `@mobile`

Example: Line Height Usage

<!-- Heading with tight line height -->
<h2 class="lh:1.2">
    Multiple lines with compact spacing
</h2>

<!-- Body text with optimal readability -->
<p class="lh:1.6">
    Lorem ipsum dolor sit amet... Full paragraph text here.
</p>

<!-- Responsive line heights -->
<article class="lh:1.8 lh:1.4@mobile">
    More relaxed on desktop, tighter on mobile to save space
</article>

Letter Spacing

Control horizontal spacing between characters for creative typography and improved readability:

Class	Value	Use Case	Responsive
`ls:-3`	-0.09em	Very tight (dense, compact headlines)	`@tablet`, `@mobile`
`ls:-2`	-0.06em	Tight (bold, impact titles)	`@tablet`, `@mobile`
`ls:-1`	-0.03em	Slightly tight (headlines, emphasis)	`@tablet`, `@mobile`
`ls:0 / .ls:normal`	normal	Reset to default (body text)	`@tablet`, `@mobile`
`ls:1`	0.3em	Relaxed spacing	`@tablet`, `@mobile`
`ls:2`	0.6em	Wide spacing	`@tablet`, `@mobile`
`ls:3`	0.9em	Extra wide (all-caps headers)	`@tablet`, `@mobile`
`ls:4`	1.2em	Very wide spacing	`@tablet`, `@mobile`
`ls:5`	1.5em	Extreme spacing	`@tablet`, `@mobile`
`ls:6` to `ls:10`	1.8em to 3.0em	Display text, artistic layouts	`@tablet`, `@mobile`

Example: Letter Spacing Usage

<!-- Luxury brand with wide letter spacing -->
<h1 class="uppercase ls:3 font:didone">
    ELEGANT TITLE
</h1>

<!-- Tight, impactful headline -->
<h2 class="ls:-2 fw:700">
    Bold Statement
</h2>

<!-- Responsive letter spacing -->
<p class="ls:2 ls:0@mobile">
    Wide on desktop, normal on mobile
</p>

<!-- Combine with other typography -->
<div class="fs:2.5 lh:1.2 ls:1 font:neo-grotesque">
    Professional heading with precise spacing
</div>

Text Transform

Class	Effect	Example Output
`uppercase`	text-transform: uppercase	THE QUICK BROWN FOX
`lowercase`	text-transform: lowercase	the quick brown fox
`capitalize`	text-transform: capitalize	The Quick Brown Fox
`none-case`	text-transform: none (reset)	The Quick Brown Fox (unchanged)

Responsive: All text-transform utilities support responsive prefixes: @tablet, @mobile, @laptop

Example: Responsive Text Transform

<h1 class="uppercase lowercase@mobile">
    Heading (uppercase on desktop, lowercase on mobile)
</h1>

Spacing Utilities

Comprehensive margin and padding utilities for precise layout control. All spacing utilities support responsive prefixes (@tablet, @mobile, @laptop).

Spacing Format

Spacing classes follow the pattern property:value. The property prefix indicates what spacing type to apply:

Prefix	Property	Description	Example
`p:`	Padding (all sides)	Apply padding on all 4 sides equally	`p:2` = 0.5rem padding all sides
`m:`	Margin (all sides)	Apply margin on all 4 sides equally	`m:3` = 0.75rem margin all sides
`px:`	Horizontal padding	Padding on left and right only	`px:1` = 0.25rem left/right padding
`py:`	Vertical padding	Padding on top and bottom only	`py:2` = 0.5rem top/bottom padding
`mx:`	Horizontal margin	Margin on left and right. Use `mx:auto` to center	`mx:auto` centers horizontally; `mx:2` = 0.5rem left/right
`my:`	Vertical margin	Margin on top and bottom	`my:1` = 0.25rem top/bottom margin
`pt:`	Padding top	Padding only on top side	`pt:1`
`pb:`	Padding bottom	Padding only on bottom side	`pb:2`
`pl:`	Padding left	Padding only on left side	`pl:3`
`pr:`	Padding right	Padding only on right side	`pr:1`
`mt:`	Margin top	Margin only on top side	`mt:2`
`mb:`	Margin bottom	Margin only on bottom side	`mb:3`
`ml:`	Margin left	Margin only on left side	`ml:1`
`mr:`	Margin right	Margin only on right side	`mr:1`

Spacing Scale

CSSkel provides 12 spacing values from 0 to 10, plus auto-center. Each value represents a consistent unit:

Value	Rem	Pixels	Use Case
`:0`	0	0	Remove all spacing, reset
`:1`	0.25rem	4px	Micro spacing, tight layout
`:2`	0.5rem	8px	Small spacing, icon padding
`:3`	0.75rem	12px	Medium-small spacing
`:4`	1rem	16px	Standard spacing (default rhythm)
`:5`	1.25rem	20px	Medium spacing
`:6`	1.5rem	24px	Large spacing, section separation
`:7`	1.75rem	28px	Extra large spacing
`:8`	2rem	32px	Very large spacing
`:9`	2.25rem	36px	Huge spacing
`:10`	2.5rem	40px	Maximum spacing, major sections
`:auto`	auto	auto	Center element (with .mx:auto or .my:auto)

Margin & Padding Usage

Example: Basic Spacing

<!-- Padding and margin on all sides -->
<div class="p:4">16px padding all sides</div>
<div class="m:2">8px margin all sides</div>

<!-- Directional spacing -->
<div class="pt:3 pb:2">Top padding 12px, bottom padding 8px</div>
<div class="ml:4 mr:2">Left margin 16px, right margin 8px</div>

<!-- Horizontal and vertical shortcuts -->
<div class="px:3 py:4">Horizontal 12px, vertical 16px padding</div>
<div class="mx:2 my:3">Horizontal 8px, vertical 12px margin</div>

Centering & Auto Margins

Use mx:auto to center elements horizontally. Works with fixed widths or max-widths:

Example: Center Elements

<!-- Center a card container -->
<div class="mx:auto p:4" style="max-width: 400px;">
    This centered card has max-width: 400px
</div>

<!-- Center with padding -->
<div class="mx:auto px:2 py:4">
    Centered with horizontal padding
</div>

Responsive Spacing

Apply different spacing on different screen sizes using responsive prefixes:

Example: Responsive Spacing

<!-- More spacing on desktop, less on mobile -->
<div class="p:6 p:3@tablet p:2@mobile">
    Large padding on desktop (24px), medium on tablet (12px), small on mobile (8px)
</div>

<!-- Section margins scale responsively -->
<section class="m:8 m:4@tablet m:2@mobile">
    ...
</section>

<!-- Card with responsive padding -->
<article class="p:4 px:2@mobile">
    Same top/bottom padding everywhere, but horizontal padding only on mobile
</article>

Combining Spacing Properties

Stack multiple spacing classes for precise control:

Example: Complex Spacing

<!-- Card with custom spacing -->
<div class="p:4 m:2 mt:6">
    16px padding all sides, 8px margin all sides, 24px margin on top
</div>

<!-- Button with specific padding -->
<button class="px:3 py:2 mb:2">
    12px horizontal padding, 8px vertical padding, 8px bottom margin
</button>

<!-- Layout spacing -->
<div class="mx:auto py:8 px:4" style="max-width: 1200px;">
    Centered container with 32px vertical padding and 16px horizontal padding
</div>

Spacing Best Practices:

✓ Use spacing scale consistently for visual harmony (1, 2, 3, 4, etc.)
✓ Reset margins on first/last children when needed with m:0 or mt:0
✓ Use mx:auto + fixed width for perfect centering
✓ Combine horizontal (px:, mx:) and vertical (py:, my:) for cleaner code
✓ Use responsive prefixes to optimize mobile layouts
✓ Remember: margins collapse vertically in certain contexts, padding doesn't
✓ Use padding for interior space, margin for external spacing between elements
✓ All spacing values support @tablet, @mobile, @laptop suffixes for responsive design

Display & Layout

Control element display and layout properties for precise visual control. Most display utilities support responsive prefixes (@tablet, @mobile, @laptop).

Display Properties

Control how elements are rendered in the document flow:

Class	CSS Value	Use Case	Responsive
`d:block`	display: block	Full width, normal block flow. Default for divs, sections, etc.	`@tablet`, `@mobile`
`d:inline`	display: inline	Inline within text. Takes only necessary width.	`@tablet`, `@mobile`
`d:inline-block`	display: inline-block	Inline but can have width/height set. Great for buttons, badges.	`@tablet`, `@mobile`
`d:flex`	display: flex	Flexible box layout. Children distribute automatically.	`@tablet`, `@mobile`
`d:grid`	display: grid	CSS Grid layout. Use for 2D layouts (see Grid System section).	`@tablet`, `@mobile`
`d:none`	display: none	Hide element completely (removed from document flow)	`@tablet`, `@mobile`

Example: Responsive Display

<!-- Hide on mobile, show on desktop -->
<div class="d:none d:block@tablet">
    Desktop only sidebar
</div>

<!-- Show mobile menu, hide desktop nav -->
<nav class="d:none d:flex@tablet">
    Desktop navigation
</nav>

<!-- Switch layout -->
<div class="d:block d:flex@laptop">
    Stacked on mobile, flex row on desktop
</div>

Flexbox Properties

Create flexible, responsive layouts with flexbox utilities:

Class	Property	Effect	Example Use Case
`flex:row`	flex-direction: row	Arrange children horizontally (default)	Navigation bars, button groups
`flex:column`	flex-direction: column	Stack children vertically	Sidebars, vertical menus
`justify:center`	justify-content: center	Center flex items horizontally	Centered button groups, aligned content
`justify:space-between`	justify-content: space-between	Distribute items with space between	Header with logo and nav spread apart
`items:center`	align-items: center	Center flex items vertically	Vertically centered content in flex containers
`items:start`	align-items: flex-start	Align items to start (top/left)	Top-aligned content
`items:end`	align-items: flex-end	Align items to end (bottom/right)	Bottom-aligned content
`vertical-centered`	display: flex + flex-direction: column + center alignment	Perfect vertical + horizontal centering	Hero sections, modal overlays, centered cards

Example: Flexbox Layouts

<!-- Centered navigation -->
<nav class="d:flex flex:row justify:center items:center gap:4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</nav>

<!-- Header with space between -->
<header class="d:flex justify:space-between items:center p:4">
    <div class="logo">Logo</div>
    <nav>Navigation</nav>
    <button>Sign In</button>
</header>

<!-- Vertical centering -->
<div class="vertical-centered" style="height: 300px;">
    <p>This content is perfectly centered</p>
</div>

<!-- Responsive flex direction -->
<div class="d:flex flex:column flex:row@tablet">
    Vertical on mobile, horizontal on tablet+
</div>

Width Utilities - Complete Reference

Control element width with percentage-based and fixed-width utilities. All width classes support responsive prefixes:

Percentage-Based Width

Class	Width %	Common Use	Responsive
`w:10`	10%	Narrow sidebar, thin column	`@tablet`, `@mobile`
`w:20`	20%	Narrow layout section	`@tablet`, `@mobile`
`w:25`	25%	Quarter width (1/4)	`@tablet`, `@mobile`
`w:33`	33.333%	Third width (1/3)	`@tablet`, `@mobile`
`w:40`	40%	Two-column layout (40/60 split)	`@tablet`, `@mobile`
`w:50`	50%	Half width (1/2), two-column	`@tablet`, `@mobile`
`w:60`	60%	Two-column layout (60/40 split)	`@tablet`, `@mobile`
`w:66`	66.666%	Two-thirds width (2/3)	`@tablet`, `@mobile`
`w:75`	75%	Three-quarter width (3/4)	`@tablet`, `@mobile`
`w:80`	80%	Wide layout (80/20 sidebar)	`@tablet`, `@mobile`
`w:90`	90%	Almost full width with margins	`@tablet`, `@mobile`
`w:100`	100%	Full width (default for blocks)	`@tablet`, `@mobile`

Fixed-Width Utilities (if available)

In addition to percentage-based widths, you may have fixed-width utilities (check your CSS file for availability):

Pattern	Example	Use Case
`max-w:*`	`max-w:1200px`, `max-w:800px`	Limit maximum width (readability, container width)
`min-w:*`	`min-w:300px`	Ensure minimum width (prevent shrinking too much)

Responsive Width Examples

Example: Responsive Width Layouts

<!-- Full width on mobile, half on desktop -->
<aside class="w:100 w:25@laptop">
    Sidebar: full width on mobile, 25% on laptop
</aside>

<!-- Flexible layout that adapts -->
<div class="d:flex">
    <main class="w:100 w:66@tablet">Main content (2/3 on tablet+)</main>
    <aside class="w:100 w:33@tablet">Sidebar (1/3 on tablet+)</aside>
</div>

<!-- Three-column on desktop, single column on mobile -->
<div class="d:flex flex:column flex:row@laptop">
    <section class="w:100 w:33@laptop">Section 1</section>
    <section class="w:100 w:33@laptop">Section 2</section>
    <section class="w:100 w:33@laptop">Section 3</section>
</div>

<!-- Container with max-width and centered -->
<main class="w:90 mx:auto" style="max-width: 1200px;">
    90% width with centering, max 1200px
</main>

Width Breakpoint Strategy

Plan your responsive widths based on breakpoints:

Device	Breakpoint	Suggested Width Strategy
Mobile	`@mobile`	Use `w:100` for stacked layouts, full-width elements
Tablet	`@tablet`	Use `w:50` for 2-column layouts, `w:33` for 3-column
Laptop/Desktop	Default (no prefix)	Use optimized widths: `w:75` + `w:25` for sidebar, `w:66` for main content

Common Layout Patterns

Example: Common Responsive Patterns

<!-- Pattern 1: Sidebar Layout -->
<div class="d:flex flex:column flex:row@tablet">
    <aside class="w:100 w:25@tablet">Sidebar</aside>
    <main class="w:100 w:75@tablet">Content</main>
</div>

<!-- Pattern 2: Dashboard (3-column on desktop, stacked on mobile) -->
<div class="d:flex flex:column flex:row@laptop">
    <div class="w:100 w:33@laptop">Card 1</div>
    <div class="w:100 w:33@laptop">Card 2</div>
    <div class="w:100 w:33@laptop">Card 3</div>
</div>

<!-- Pattern 3: Split Screen (50/50 split on desktop, stacked on mobile) -->
<section class="d:flex flex:column flex:row@tablet">
    <article class="w:100 w:50@tablet" style="padding: 2rem;">
        Left content
    </article>
    <article class="w:100 w:50@tablet" style="padding: 2rem;">
        Right content
    </article>
</section>

<!-- Pattern 4: Asymmetric Layout (70/30 split) -->
<div class="d:flex flex:column flex:row@laptop">
    <main class="w:100 w:70@laptop">Main content</main>
    <aside class="w:100 w:30@laptop">Related info</aside>
</div>

Clearing Floats

Class	CSS Property	Effect
`clear`	clear: both	Clear floats from both left and right. Use after floated elements to prevent layout collapse.

Display & Width Best Practices:

✓ Always think mobile-first: start with w:100, then add width at breakpoints
✓ Use d:flex with responsive direction for flexible layouts
✓ Combine d:flex with width utilities for powerful responsive layouts
✓ Use mx:auto + width for centered containers
✓ Remember: @tablet and @mobile suffixes work on ALL width classes
✓ Plan three-tier responsive: mobile (stacked), tablet (2-col), desktop (3-col or sidebar)
✓ Use percentage widths for flexible layouts, fixed widths for specific components
✓ Test your layouts on multiple screen sizes to ensure proper scaling

Buttons & Forms

CSSkel provides professional button and form styling for native elements and semantic classes. Consistent spacing, sizing, and visual styling out of the box.

Button Structure & Requirements

Critical Requirement: For button styles to be visible, buttons must be wrapped in a container with the ui class, just like form elements. This ensures consistent spacing, sizing, and visual styling across all interactive elements.

Example: Correct Button Structure

<!-- Correct: Buttons inside .ui container -->
<div class="ui">
    <button>Default Button</button>
    <button class="button-primary">Primary Button</button>
</div>

<!-- Incorrect: Buttons without .ui wrapper won't have proper styling -->
<button>This won't be styled properly</button>

Button Elements

CSSkel supports multiple ways to create styled buttons:

Element/Class	Usage	Example	Best For
`<button>`	Native button element (styled by default)	`<button>Click Me</button>`	Interactive actions, form submissions
`<a class="button">`	Link styled as button	`<a href="#" class="button">Link Button</a>`	Navigation, external links that look like buttons
`<input type="submit">`	Form submit button (styled by default)	`<input type="submit" value="Submit">`	Form submissions
`<input type="reset">`	Form reset button (styled by default)	`<input type="reset" value="Reset">`	Reset form to default values
`<input type="button">`	Generic button input (styled by default)	`<input type="button" value="Click">`	Generic clickable inputs

Button Styles & Variants

Class	Style	Use Case
Default (no class)	Neutral button with subtle styling	Secondary actions, general buttons
`button-primary`	Primary/accent button, high contrast	Primary CTA (Call-to-Action), important actions

Button Customization via CSS Variables

Customize button appearance by overriding these CSS variables:

Variable	Default Value	Description
`--button-height`	38px	Vertical height of button (padding + font height)
`--button-padding`	0 30px	Internal padding (top/bottom left/right)
`--button-fontsize`	11px	Font size of button text
`--button-weight`	600	Font weight (bold appearance)
`--button-letter-spacing`	0.08rem	Spacing between letters
`--button-border-radius`	4px	Corner rounding

Example: Customize Button Variables

/* Override button defaults globally */
:root {
    --button-height: 44px;              /* Larger buttons */
    --button-padding: 0 40px;           /* More horizontal padding */
    --button-fontsize: 14px;            /* Larger text */
    --button-weight: 700;               /* Extra bold */
    --button-letter-spacing: 0.1rem;    /* More letter spacing */
    --button-border-radius: 8px;        /* More rounded corners */
}

/* Or customize for specific context */
.cta-section {
    --button-height: 50px;
    --button-padding: 0 50px;
    --button-fontsize: 16px;
    --button-border-radius: 25px;       /* Pill-shaped buttons */
}

Button Examples

Example: Various Button Types

<!-- Standard button wrapper -->
<div class="ui">
    <!-- Default button -->
    <button>Default Button</button>

    <!-- Primary action button -->
    <button class="button-primary">Primary Action</button>

    <!-- Link styled as button -->
    <a href="#" class="button button-primary">Link Button</a>

    <!-- Form buttons -->
    <button type="submit">Submit Form</button>
    <button type="reset">Reset Form</button>
    <button type="button">Generic Button</button>

    <!-- Form inputs as buttons -->
    <input type="submit" value="Submit via Input">
    <input type="reset" value="Reset via Input">
</div>

Button Layout Patterns

Example: Button Groups & Layouts

<!-- Horizontal button group -->
<div class="ui d:flex gap:2">
    <button>Cancel</button>
    <button class="button-primary">Save</button>
</div>

<!-- Vertical button group -->
<div class="ui d:flex flex:column gap:2">
    <button class="button-primary w:100">Continue</button>
    <button>Skip for Now</button>
</div>

<!-- Centered buttons -->
<div class="ui d:flex justify:center gap:3">
    <button>Previous</button>
    <button class="button-primary">Next</button>
</div>

<!-- Full-width button -->
<div class="ui">
    <button class="w:100">Full Width Button</button>
</div>

<!-- Button with icon/content -->
<div class="ui">
    <button class="button-primary">
        🔒 Login with credentials
    </button>
</div>

Button States & Interactions

Buttons respond automatically to user interactions. Use CSSkel utility classes to customize button behavior and appearance:

Built-in Pseudo-States

State	Behavior	CSS
Default (Normal)	Standard button appearance	`button { ... }`
Hover	Visual feedback when cursor over button	`button:hover { ... }`
Focus	Keyboard accessibility indicator (Tab key)	`button:focus { ... }`
Active	Visual feedback while being clicked/pressed	`button:active { ... }`
Disabled	Grayed out, not clickable, disabled state	`button:disabled { ... }`

Visibility & Display Utilities

Control button visibility and interaction states with these utilities:

Class	Effect	Use Case
`visible`	visibility: visible	Make button visible (default, use to override hidden state)
`hidden`	visibility: hidden	Hide button but reserve space in layout
`d:none`	display: none	Hide button and remove from layout (see Display section)

Cursor & Selection Utilities

Enhance button interactivity with cursor and text selection controls:

Class	Effect	Use Case
`cursor:pointer`	cursor: pointer	Standard pointer cursor (default for buttons, makes intent clear for links styled as buttons)
`cursor:not-allowed`	cursor: not-allowed	Disabled cursor (prohibition sign) for disabled buttons to signal non-interactivity
`cursor:default`	cursor: default	Reset to default cursor (arrow)
`select:none`	user-select: none	Prevent text selection on button (recommended for all buttons)
`select:auto`	user-select: auto	Allow default text selection behavior

Opacity Utilities

Control button transparency and visual weight:

Class	Opacity	Use Case
`opacity:0`	0 (completely transparent)	Invisible button (rarely used, prefer .hidden or .d:none)
`opacity:25`	0.25 (very faint)	Subtle, disabled appearance
`opacity:50`	0.5 (semi-transparent)	Medium opacity, loading state
`opacity:75`	0.75 (mostly visible)	Slightly faded, secondary action
`opacity:100`	1 (fully opaque)	Default, fully visible button

Hover State Utilities

Apply styles specifically on hover for interactive feedback:

Class	Effect on Hover	Use Case
`hover:opacity-75`	Opacity becomes 0.75 on hover	Subtle fade effect on button hover
`hover:opacity-100`	Opacity becomes 1 on hover	Fade in effect (from semi-transparent to fully visible)
`hover:cursor-pointer`	Cursor changes to pointer on hover	Emphasize clickability (especially for link buttons)
`hover:scale-105`	Scale 1.05x on hover (5% larger)	Subtle zoom effect, friendly interaction
`hover:scale-110`	Scale 1.1x on hover (10% larger)	Noticeable zoom effect, more prominent feedback

Focus State Utilities

Enhance keyboard accessibility with focus states:

Class	Effect on Focus	Use Case
`focus:outline-none`	Remove outline on focus (use with caution)	Custom focus styling (buttons already have default)
`focus:opacity-100`	Full opacity on focus	Make faded buttons fully visible when focused

Active State Utilities

Provide feedback while button is being clicked:

Class	Effect When Active/Pressed	Use Case
`active:scale-95`	Scale 0.95x (5% smaller) while pressed	Button press effect, tactile feedback

Interactive Button Examples

Example: Basic Interactive Button

<!-- Standard button with built-in interactions -->
<div class="ui">
    <button>Default Button</button>
    <button class="button-primary">Primary Button</button>
</div>
<!-- Buttons automatically have hover/focus/active states -->

Example: Enhanced Button Interactions

<!-- Button with custom hover scale effect -->
<div class="ui">
    <button class="hover:scale-105">
        Zoom on Hover
    </button>
</div>

<!-- Link styled as button with pointer cursor -->
<div class="ui">
    <a href="#" class="button button-primary hover:cursor-pointer">
        Link Button
    </a>
</div>

<!-- Secondary button with fade effect -->
<div class="ui">
    <button class="opacity:75 hover:opacity-100">
        Hover to show
    </button>
</div>

Example: Disabled and Hidden States

<!-- Disabled button with not-allowed cursor -->
<div class="ui">
    <button disabled class="cursor:not-allowed">
        Disabled Button
    </button>
</div>

<!-- Hidden button (preserves layout space) -->
<div class="ui">
    <button class="hidden">Hidden Button</button>
</div>

<!-- Loading state with opacity -->
<div class="ui">
    <button class="opacity:50 cursor:not-allowed" disabled>
        Loading...
    </button>
</div>

Example: Advanced Interactive Patterns

<!-- CTA button with multiple interaction effects -->
<div class="ui">
    <button class="button-primary hover:scale-110 active:scale-95 select:none">
        Subscribe Now
    </button>
</div>

<!-- Icon button with hover effects -->
<div class="ui">
    <button class="hover:opacity-100 opacity:75" title="Like">
        ❤️
    </button>
</div>

<!-- Toggle button appearance on hover -->
<div class="ui">
    <button class="opacity:50 hover:opacity-100 select:none">
        Hover to activate
    </button>
</div>

<!-- Button group with consistent interaction -->
<div class="ui d:flex gap:2">
    <button class="w:50 hover:scale-105">Cancel</button>
    <button class="button-primary w:50 hover:scale-105">Confirm</button>
</div>

Button Best Practices:

✓ Always wrap buttons in ui container for proper styling
✓ Use button-primary only for the main CTA on a page
✓ Use semantic button types: submit, reset, button
✓ Keep button text short and action-oriented ("Save" not "OK")
✓ Use <button> for actions, <a class="button"> for navigation
✓ Add visual feedback with hover and active states for better UX
✓ Use hover:scale-105 or hover:opacity-100 for interactive feedback
✓ Apply cursor:not-allowed to disabled buttons to signal non-interactivity
✓ Use select:none to prevent accidental text selection on buttons
✓ Combine active:scale-95 with hover effects for complete tactile feedback
✓ Never disable buttons without providing feedback about why
✓ Combine with flex utilities for button groups: d:flex .gap:2
✓ Use w:100 for full-width mobile buttons
✓ Customize CSS variables for project-specific styling
✓ Ensure sufficient padding/height for touch targets (38px+ on mobile)

Forms

Form controls and validation styling. All forms and inputs must be wrapped in a ui container for CSSkel styles to apply (spacing, sizing, and visual styles).

Form Elements

All form elements are normalized for consistent heights and alignment by the ui wrapper.

Element	Height	Padding	Use Case
`<input>`	38px (default)	6px 10px	Single-line text, email, password, number
`<select>`	38px (matches input)	6px 10px	Dropdowns that match input height for visual alignment
`<button>`	38px (matches input)	0 30px	Action buttons that align with inputs
`<textarea>`	Min 6.5em height	6px 10px	Multi-line text; uses rows but enforces comfortable minimum

UI Class

Wrap your forms and inputs with ui to enable CSSkel form styles. Example:

Example: Form structure

<form class="ui">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="[email protected]">

    <label for="message">Message</label>
    <textarea id="message" rows="5"></textarea>

    <button type="submit">Send</button>
</form>

Custom Checkboxes & Radios

Use ui.ui-checkable container to style checkboxes and radio buttons consistently. The markup pairs an input with a label; the label receives the custom visual indicator.

Example: Custom checkbox & radio

<div class="ui ui-checkable">
    <input type="checkbox" id="agree" name="agree">
    <label for="agree">I agree to the terms</label>
</div>

<div class="ui ui-checkable">
    <input type="radio" id="opt1" name="options" value="option1">
    <label for="opt1">Option 1</label>
</div>

Custom Styled Appearance & Behavior

Custom visuals (checkmark, radio dot) are injected by CSS tied to the label and input :checked state.
Hover and focus states amplify the control for discoverability.
Disabled inputs appear dimmed and are non-interactive.
Controls are keyboard accessible (label click toggles input, Tab focuses, Space toggles).

Validation & States

Form controls support validation states; check your CSS for classes like is-valid / is-invalid or border utilities (border-success, border-error) to indicate status.

Quick Patterns

Example: Inline form & checkable

<form class="ui d:flex gap:2 align:center">
    <input type="text" placeholder="Search" class="w:100">
    <button type="submit" class="button-primary">Go</button>
</form>

<div class="ui ui-checkable">
    <input type="checkbox" id="subscribe">
    <label for="subscribe">Subscribe</label>
</div>

Forms Features & Best Practices:

✓ Wrap forms and controls in ui for consistent styling
✓ Inputs and selects share the same height for visual rhythm
✓ Textareas have a comfortable minimum height (6.5em) for readability
✓ Use ui-checkable to get accessible, keyboard-friendly custom checkbox/radio UI
✓ Provide validation feedback using is-valid/is-invalid or border utilities
✓ Ensure disabled controls include disabled attribute and/or cursor:not-allowed
✓ Labels must use for matching input id for accessibility
✓ Use semantic types (email, tel, number) to leverage mobile keyboards
✓ Keep forms compact using spacing utilities and ensure touch targets are >= 38px high on mobile

Lists

Styled list components and utilities. Always wrap lists in a ui container to activate CSSkel list styles and spacing.

Available List Utilities

The following list utilities are provided in csskel.css and can be combined for varied layouts:

Class	Effect	Notes
`ui ul / .ui ol`	Default list styles within `ui`	Baseline styling (disc/decimal and padding)
`list-unstyled`	Remove bullets and padding	Use when you need bare semantic lists
`list-inline`	Display items inline (horizontal)	Good for navs, tags; items become inline-block
`list-check`	Replace bullets with checkmarks (✓)	Checkmarks inherit accent color; semantic HTML preserved
`list-tight`	Reduced vertical spacing between items	Compact lists inside dense UIs
`list-loose`	Increased vertical spacing between items	Readable lists for long-form content
`list-none`	No spacing between items	Zero-margin lists useful for compressed layouts
`list-dl`	Definition list styling for `<dl>`	Styles `dt` and `dd` with clear spacing

Examples — code + rendered result

Unstyled List

<div class="ui">
  <ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Item 1
Item 2
Item 3

Inline List (Navigation)

<div class="ui">
  <ul class="list-inline">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Checklist (checkmarks)

<div class="ui">
  <ul class="list-check">
    <li>Feature included</li>
    <li>Setup complete</li>
    <li>Ready to use</li>
  </ul>
</div>

Feature included
Setup complete
Ready to use

Tight / Loose / None spacing

<div class="ui">
  <ul class="list-tight"><li>Tight 1</li><li>Tight 2</li></ul>
  <ul class="list-loose"><li>Loose 1</li><li>Loose 2</li></ul>
  <ul class="list-none"><li>None 1</li><li>None 2</li></ul>
</div>

Tight 1
Tight 2

Loose 1
Loose 2

None 1
None 2

Definition List (.list-dl)

<div class="ui">
  <dl class="list-dl">
    <dt>Term One</dt>
    <dd>Definition for term one.</dd>
    <dt>Term Two</dt>
    <dd>Definition for term two.</dd>
  </dl>
</div>

Term One: Definition for term one.
Term Two: Definition for term two.

List Notes & Best Practices:

✓ Use semantic HTML (<ul>, <ol>, <dl>) and apply list utilities only for presentation.
✓ Prefer list-unstyled for building custom list UI (menus, dropdowns).
✓ Use list-inline for horizontal navigation; it collapses well with responsive prefixes.
✓ Use list-check for feature lists — checkmark color follows accent variables.
✓ Combine spacing utilities (list-tight, list-loose) with padding/margin utilities for fine control.
✓ All list utilities support responsive prefixes: @tablet, @mobile, @laptop.
✓ When building interactive list controls (selectable items), ensure keyboard focus styling and ARIA roles are applied.

Tables

Comprehensive table patterns and responsive strategies for data presentation. Use the ui wrapper for consistent spacing and typography.

Table Classes

Class	Effect
`ui.table-bordered`	Borders on all cells (visual grid)
`ui.table-striped`	Alternating row background for readability
`ui.table-hover`	Highlight row on hover for row-based interactions
`ui.table-condensed`	Reduced cell padding for dense data
`ui.table-fixed`	`table-layout: fixed` for predictable column widths
`ui.table-sticky`	Sticky header row (when supported by browser)

Responsive strategies

Large tables require patterns to remain usable on narrow screens. Common approaches:

Horizontal scroll: wrap the table in a container that allows overflow-x auto so columns are accessible without breaking layout.
Stacking / card view: convert rows into stacked blocks on small screens so each row becomes a vertical list of label/value pairs.
Column prioritisation: hide or collapse low-priority columns at smaller breakpoints using responsive utilities (@tablet, @mobile).
Fixed layout: use ui.table-fixed to enable predictable column sizing and avoid horizontal reflow when combined with scroll wrappers.

Example — Horizontal scroll

Wrap wide tables in a scroll container; this keeps the table readable without breaking layout.

<div class="table-scroll" style="overflow:auto;">
  <table class="ui table-bordered table-striped table-hover">
    <caption>Monthly metrics</caption>
    <thead>
      <tr><th>Month</th><th>Visits</th><th>Signups</th><th>Revenue</th></tr>
    </thead>
    <tbody>
      <tr><td>Jan</td><td>12,345</td><td>123</td><td>$1,234</td></tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

Example — Stack rows on mobile

Use responsive prefixes to apply a stacking utility at small breakpoints. This example shows the idea — implementation can be CSS-only using display:block for table rows and data-label attributes for values.

<table class="ui table-striped table-condensed table-stack@mobile">
  <thead>...</thead>
  <tbody>
    <tr>
      <td data-label="User">Jane Doe</td>
      <td data-label="Email">[email protected]</td>
      <td data-label="Role">Admin</td>
    </tr>
  </tbody>
</table>

Rendered example

Sales snapshot (rendered example)
Product	Units	Price	Total
Widget A	1,234	$12.50	$15,425
Widget B	987	$8.00	$7,896

Responsive prefixes and examples

All table-related classes can be combined with responsive suffixes to change behavior across breakpoints. Examples:

table-condensed@mobile — reduce padding on phones only.
table-stack@mobile — enable stacking of rows at the mobile breakpoint.
table-fixed@tablet — use fixed layout starting at tablet sizes.
table-hidden-col--2@mobile — hide column 2 on mobile (implement with utility helpers or a small ruleset).

Accessibility

Always include a <caption> describing the table's content.
Use scope="col" on header cells and scope="row" for row headers when present.
When creating interactive/sortable tables add appropriate ARIA attributes (e.g., aria-sort) and keyboard focus styles.
Ensure responsive stacking preserves the association between headers and cell values (use data-label or CSS generated labels).

Recommendations

Prefer horizontal scroll for wide, read-only datasets and stacking for compact, row-centric content on mobile.
Combine ui.table-fixed with a scroll wrapper for stable column widths.
Use responsive prefixes to progressively reduce complexity (hide lower-priority columns at smaller sizes).

Additional Utilities

Comprehensive utility classes — grouped and with rendered examples. Most utilities accept responsive suffixes (@tablet, @mobile, @laptop).

Display & Layout

Class	Effect
`d:block`	display: block
`d:inline`	display: inline
`d:inline-block`	display: inline-block
`d:flex`	display: flex
`d:grid`	display: grid
`flex-row`	flex-direction: row
`flex-column`	flex-direction: column

Spacing & Sizing (see full Spacing section)

Use margin/padding utilities from the Spacing section. Sizing utilities include:

Class	Effect
`w:100%`	width: 100%
`w:auto`	width: auto
`max-w:sm/med/lg`	Common max-width helpers
`h:xx`	Height helpers (eg. `h:48`)

Shadows (Rendered examples)

Shadows range from subtle to deep. Use responsive suffixes to change elevation across breakpoints.

Class	Effect
`shadow`	Default shadow
`shadow:1` … `shadow:6`	Incremental depth

Default (.shadow)

Depth 2 (.shadow:2)

Depth 5 (.shadow:5)

Interactive States (Rendered examples)

Use state prefixes (hover:, focus:, active:) to declaratively apply changes.

State	Class pattern	Effect
Hover	`hover:scale-105`	Scale element on hover
Focus	`focus:shadow:3`	Apply shadow on focus
Active	`active:scale-95`	Press/active scale
Combined	`hover:shadow:3 .focus:outline`	Combine multiple state utilities

Link with focus

Card — keyboard focusable (tabindex=0)

Transforms & Transitions

Class	Effect
`scale-95`	transform: scale(.95)
`scale-105`	transform: scale(1.05)
`transition`	Apply smooth transition for transform/opacity

Overflow & Scroll

Class	Effect
`overflow:auto`	overflow: auto
`overflow-x:auto`	overflow-x: auto (horizontal scroll)

Cursor, Selection & Pointer

Class	Effect
`cursor:pointer`	cursor: pointer
`cursor:not-allowed`	cursor: not-allowed
`select:none`	user-select: none
`pointer-events:none`	pointer-events: none

Opacity & Visibility

Class	Effect
`opacity:0`	opacity: 0
`opacity:50`	opacity: .5
`hidden`	visibility: hidden
`show-on@tablet`	show starting at tablet breakpoint

Tips & Patterns

Prefer using state prefixes (e.g., hover:, focus:) instead of inline :hover rules for consistency across components.
Combine transition with hover:scale-105 for a smooth effect.
For accessible interactive cards, ensure tabindex="0" and focus: styles are visible.
Use responsive prefixes to progressively enhance (e.g., hover:shadow:3@tablet to only show hover elevation on larger screens).

Horizontal Rule

The <hr> element is automatically styled (top/bottom margin and soft border).

Borders

CSSkel provides a comprehensive border system for all your border styling needs. Most border utilities support responsive prefixes (@tablet, @mobile, @laptop).

Basic Borders

Class	Effect
`border`	1px solid border (all sides)
`border:none`	Remove all borders

Border Width

Class	Width
`border:1`	1px border
`border:2`	2px border
`border:4`	4px border
`border:8`	8px border

Border Style

Class	Style
`border:solid`	Solid line
`border:dashed`	Dashed line
`border:dotted`	Dotted line
`border:double`	Double line

Side Borders

Side	Classes	Example
Top	`border-t:1`, `border-t:2`, `border-t:4`	Top border only
Right	`border-r:1`, `border-r:2`, `border-r:4`	Right border only
Bottom	`border-b:1`, `border-b:2`, `border-b:4`	Bottom border only
Left	`border-l:1`, `border-l:2`, `border-l:4`	Left border only
Horizontal (left+right)	`border-x:1`, `border-x:2`	Left and right borders
Vertical (top+bottom)	`border-y:1`, `border-y:2`	Top and bottom borders

Border Colors

Color	Classes	Use Case
Primary	`border:primary`, `border-t:primary`, `border-x:primary`	Main brand color
Secondary	`border:secondary`	Secondary accent
Error	`border:error`	Error/validation state
Success	`border:success`	Success state
Warning	`border:warning`	Warning state
Soft	`border:soft`	Subtle/light border
Transparent	`border:transparent`	Invisible border (reserves space)

Rendered examples

Quick visual samples demonstrating widths, colors, side borders and a responsive change.

Default (.border)

Thicker (.border:2 / .border:primary)

Left accent (.border-l:4 .border-success)

Top dashed (.border-t:3 .border:warning .border:dashed)

Transparent (.border:transparent)

Pill (.rounded:full)

Responsive example

Change border presentation at breakpoints — for example hide side borders on mobile and add emphasis on tablet:

<div class="border:1@mobile border:3@tablet border:primary@tablet border:soft@mobile">
  Responsive box
</div>

Rendered (simulated): the box below uses soft border on small screens and stronger primary border at tablet and up.

Responsive border example

Border Radius

CSSkel provides extensive border radius utilities for rounded corners on all sides or individual corners. Most radius utilities support responsive prefixes (@tablet, @mobile, @laptop).

Basic Radius

Class	Radius Value
`rounded`	0.5rem (8px)
`circle`	9999px (perfect circle)

Precise Radius Values

Class Range	Example Values
`rounded:0` to `rounded:50`	.rounded:0, .rounded:1, .rounded:4, .rounded:8, .rounded:12, .rounded:16, .rounded:20, .rounded:24, .rounded:28, .rounded:32, .rounded:40, .rounded:48, .rounded:50
`rounded:full`	Full circle (border-radius: 9999px)

Side-Specific Radius (All Four Sides)

Side	Classes	Example Values
Top sides	`rounded-t:*`	.rounded-t:0, .rounded-t:4, .rounded-t:8, .rounded-t:full
Right sides	`rounded-r:*`	.rounded-r:0, .rounded-r:4, .rounded-r:8, .rounded-r:full
Bottom sides	`rounded-b:*`	.rounded-b:0, .rounded-b:4, .rounded-b:8, .rounded-b:full
Left sides	`rounded-l:*`	.rounded-l:0, .rounded-l:4, .rounded-l:8, .rounded-l:full

Rendered examples

Visual samples for common radius values, side-specific radii, pill/circle shapes and a responsive variant.

Default (.rounded)

Small (.rounded:4)

Medium (.rounded:12)

Pill (.rounded:full)

Circle (.circle)

Side-specific rendered

Rounded top (.rounded-t:12)

Rounded bottom (.rounded-b:12)

Mixed corners (.rounded-tr:12 .rounded-bl:0)

Overflow-hidden pattern (images & containers)

Use overflow:hidden with radius to clip children (avatars, image cards).

Card with clipped image/content

Responsive radius example

Apply different radii at breakpoints (example syntax shown; actual behavior requires responsive utility support).

<div class="rounded:4@mobile rounded:12@tablet rounded:24@laptop">Responsive corners</div>

Exhaustive notes

Supported ranges: rounded:0 to rounded:50, plus rounded:full (pill/circle).
Side-specific: rounded-t:*, rounded-r:*, rounded-b:*, rounded-l:* and corner-specific helpers like rounded-tr:*, rounded-bl:*.
Combine with overflow-hidden to clip child content to the container radius (useful for images, cards).
Use responsive suffixes (@mobile, @tablet, @laptop) to change radius across breakpoints.

Individual Corners

Corner	Class Pattern	Example Values
Top-Left	`rounded-tl:*`	.rounded-tl:0, .rounded-tl:4, .rounded-tl:8, .rounded-tl:12, .rounded-tl:20, .rounded-tl:full
Top-Right	`rounded-tr:*`	.rounded-tr:0, .rounded-tr:4, .rounded-tr:8, .rounded-tr:12, .rounded-tr:20, .rounded-tr:full
Bottom-Right	`rounded-br:*`	.rounded-br:0, .rounded-br:4, .rounded-br:8, .rounded-br:12, .rounded-br:20, .rounded-br:full
Bottom-Left	`rounded-bl:*`	.rounded-bl:0, .rounded-bl:4, .rounded-bl:8, .rounded-bl:12, .rounded-bl:20, .rounded-bl:full

Components

Pre-built components for common UI patterns including navigation, breadcrumbs, and accordions.

Navbar

Responsive navigation bar with mobile menu toggle. The navbar is fixed at the top of the page.

Class	Purpose
`navbar`	Fixed navigation container
`nav-container`	Wrapper for navbar content with max-width
`navbar-logo`	Logo or brand name (floated left)
`menu`	Navigation menu list
`menu-icon`	Hamburger menu icon for mobile

Navbar Features:

Fixed positioning at top (z-index: 3)
Responsive - hamburger menu collapses on mobile
Smooth animations on hover and toggle
Customizable via CSS variables (navbar-background, navbar-color, navbar-hover-background, etc.)
Mobile breakpoint at 900px

Breadcrumbs

Navigation aid showing the current page hierarchy with forward slashes as separators.

Class	Purpose
`breadcrumbs`	Container for breadcrumb navigation
`breadcrumbs ul`	Flex list with automatic spacing and wrapping
`breadcrumbs li`	Individual breadcrumb item
`breadcrumbs a`	Breadcrumb link (primary color, no underline by default)
`breadcrumbs .active`	Current/active page (text color, no link)

Example: Breadcrumb HTML

<nav class="breadcrumbs">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li class="active">Product Details</li>
    </ul>
</nav>

Accordion

Collapsible content sections. Only one section can be open at a time using pure CSS checkbox pattern (no JavaScript required).

Accordion Component Classes

Class	HTML Element	Purpose	Details
`accordion`	`<div>`	Main accordion container	Wrapper for all accordion items. Adds border and rounded corners to the entire accordion.
`accordion-item`	`<div>`	Individual section wrapper	Contains one complete accordion section (checkbox + label + content). Each item has a border-bottom between items.
`accordion-toggle`	`<input type="checkbox">`	State control (hidden)	Invisible checkbox that stores the open/closed state. The label is associated via `for` attribute. Each must have a unique `id`.
`<label>`	`<label for="...">`	Clickable header	The visible accordion header. When clicked, toggles the checkbox state. Shows dynamic +/− icon that changes on state change. The `for` attribute must match the checkbox `id`.
`accordion-content`	`<div>`	Expandable content	The content that shows/hides. Uses CSS sibling selector (`~`) to respond to checkbox state. Max-height animation for smooth expand/collapse.

How Accordion Works (CSS-Only, No JavaScript)

The accordion uses CSS selectors to toggle visibility based on checkbox state:

State Management via CSS:

accordion-toggle:checked~label:after - Shows the minus (−) icon when checked
accordion-toggle:checked~.accordion-content - Expands content with max-height animation when checked
No JavaScript needed - pure CSS sibling selector magic!
When user clicks label, it toggles the hidden checkbox
CSS reacts to the checkbox `:checked` state

Complete Accordion Example

Example: Full Accordion Structure

<div class="accordion">
    <div class="accordion-item">
        <input type="checkbox" class="accordion-toggle" id="faq1">
        <label for="faq1">What is CSSkel?</label>
        <div class="accordion-content">
            <p>CSSkel is a comprehensive CSS framework with...</p>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" class="accordion-toggle" id="faq2">
        <label for="faq2">How do I use it?</label>
        <div class="accordion-content">
            <p>Simply include the CSS file and start using...</p>
        </div>
    </div>

    <div class="accordion-item">
        <input type="checkbox" class="accordion-toggle" id="faq3">
        <label for="faq3">Is it responsive?</label>
        <div class="accordion-content">
            <p>Yes! CSSkel is fully responsive with...</p>
        </div>
    </div>
</div>

Accordion Styling & Customization

CSS Variable	Purpose	Default
--accordion-bg	Background color of accordion	Inherits from theme
--accordion-border	Border color	Inherits from theme
--accordion-header-hover	Background on header hover	Inherits from theme
--accordion-text	Text color	Inherits from theme

Important Implementation Details

Critical for Accordion to Work:

ID Uniqueness: Each accordion-toggle must have a unique id attribute
Label Association: Each <label> must have a for attribute that matches a checkbox's id
DOM Order: Checkbox must come BEFORE label and content in the HTML (CSS uses sibling selector ~)
Container Order: All three elements (.accordion-toggle, label, .accordion-content) must be direct children of .accordion-item
CSS Selectors: The CSS uses input:checked ~ label and input:checked ~ .content - this is why order matters

Accordion Features

What You Get Out of the Box:

✓ Pure CSS - no JavaScript required for toggle functionality
✓ Smooth expand/collapse animation (max-height transition 0.3s ease)
✓ Automatic +/− icon toggle on state change (content: "+" / "−")
✓ Visual feedback - rounded borders and hover states on headers
✓ Fully customizable colors via CSS variables
✓ Icons included automatically (no image files needed)
✓ Responsive - works on all screen sizes
✓ Semantic HTML - uses standard input/label elements
✓ Accessible - keyboard navigable with Tab and Space/Enter
✓ Multiple instances - multiple accordions can coexist on same page

Advanced: Multiple Accordions on One Page

Example: Two Independent Accordions

<!-- First Accordion -->
<div class="accordion">
    <div class="accordion-item">
        <input type="checkbox" class="accordion-toggle" id="faq-set1-q1">
        <label for="faq-set1-q1">First FAQ Set - Question 1</label>
        <div class="accordion-content">...</div>
    </div>
</div>

<!-- Second Accordion -->
<div class="accordion">
    <div class="accordion-item">
        <input type="checkbox" class="accordion-toggle" id="faq-set2-q1">
        <label for="faq-set2-q1">Second FAQ Set - Question 1</label>
        <div class="accordion-content">...</div>
    </div>
</div>

Rendered examples

Interactive, live examples of key components. These examples use the framework classes; tweak with responsive suffixes as needed.

Navbar (rendered)

Breadcrumbs (rendered)

Accordion (rendered)

What is CSSkel?

CSSkel is a comprehensive CSS framework with...

How do I use it?

Simply include the CSS file and start using...

Is it responsive?

Yes! CSSkel is fully responsive with...

Avatar (rendered)

Jane Doe

Product Designer

Responsive Design

CSSkel follows a mobile-first responsive approach. Use responsive suffixes (@mobile, @tablet, @laptop) to change utility behavior at breakpoints.

Breakpoints

Breakpoint	Viewport	Width Range	Prefix
Desktop	Monitor / Large screen	1280px+	(none) — default
Laptop	Small laptop	1024px — 1279px	`@laptop`
Tablet	Tablet devices	640px — 1023px	`@tablet`
Mobile	Smartphones	≤ 639px	`@mobile`

Core patterns

Mobile-first: write base (mobile) styles, then use suffixes to add/override styles at larger breakpoints.
Use utility suffixes to progressively enhance (e.g., cols:1@mobile, cols:2@tablet).
Prefer hiding low-priority content on small screens rather than cramming more data into a single view.

Show / hide utilities (with revert)

These utilities explicitly show or hide elements per breakpoint. display:revert restores the element's default rendering when shown.

/* Show/hide elements depending on device */
.hide-on\@mobile{display:revert!important}
.hide-on\@tablet{display:revert!important}
.hide-on\@laptop{display:revert!important}

/* Show utilities with revert */
.show-on\@mobile{display:revert!important}
.show-on\@tablet{display:revert!important}
.show-on\@laptop{display:revert!important}

/* Mobile: <= 639px */
@media (max-width:639px){
  .hide-on\@mobile{display:none!important}
  .show-on\@mobile{display:revert!important}
}

/* Tablet: 640px - 1023px */
@media (min-width:640px) and (max-width:1023px){
  .hide-on\@tablet{display:none!important}
  .show-on\@tablet{display:revert!important}
}

/* Laptop: 1024px - 1279px */
@media (min-width:1024px) and (max-width:1279px){
  .hide-on\@laptop{display:none!important}
  .show-on\@laptop{display:revert!important}
}

Practical examples

<!-- Hide banner on mobile, show on tablet+ -->
<div class="hide-on@mobile show-on@tablet">Promotional banner</div>

<!-- Sidebar: visible on laptop and up -->
<aside class="d:none d:block@laptop">Sidebar content</aside>

<!-- Columns that change per breakpoint -->
<div class="columns cols:4 cols:2@tablet cols:1@mobile">...</div>

Why use revert?

display:revert restores the UA or inherited stylesheet value instead of forcing a specific display. This prevents accidentally forcing display:block or inline when re-showing elements that had different defaults.

Accessibility & progressive disclosure

When hiding content, ensure it's not essential for keyboard-only or screen-reader users. Provide alternatives where necessary.
Prefer collapsing non-essential visuals on mobile and offer ways to reveal them (details/expander) rather than hiding core functionality.

Tip: combine these show/hide utilities with responsive spacing and typography utilities to build fully responsive components without custom media queries.

CSS Variables Reference

Reference for all CSS custom properties used by CSSkel 3.0.0. These defaults are defined in 3.0.0/settings.css. Override them in your own stylesheet to theme the framework.

Layout & Spacing

Variable	Default	Purpose
`--base-font-size`	100%	Root font-size base
`--mobile-padding`	10px	Padding applied to columns on mobile
`--spacing-unit`	.25rem	Base step used by spacing utilities
`--spacer`	calc(var(--spacing-unit) * 4)	Default spacer
`--grid-gap`	calc(var(--spacing-unit) * 4)	Default grid gap

Buttons & Inputs

Variable	Default	Purpose
`--button-height`	38px	Standard button height
`--button-padding`	0 30px	Button horizontal padding
`--button-fontsize`	11px	Button text size
`--button-weight`	600	Button font-weight
`--button-letter-spacing`	.08rem	Button letter spacing
`--button-border-radius`	4px	Button corner radius
`--input-padding`	6px 10px	Input padding
`--input-height`	var(--button-height)	Input height
`--textarea-min-height`	6.5em	Default textarea min height

Fonts & Typography

Font stacks (named variables) and scale values available for quick use.

Variable	Example Stack
`--font-system-ui`	system-ui, sans-serif
`--font-transitional`	Charter, 'Bitstream Charter', Cambria, serif
`--font-old-style`	'Iowan Old Style', 'Palatino Linotype', serif
`--font-humanist`	Seravek, 'Gill Sans Nova', Ubuntu, Calibri, sans-serif
`--font-geometric-humanist`	Avenir, Montserrat, Corbel, sans-serif
`--font-classical-humanist`	Optima, Candara, 'Noto Sans', sans-serif
`--font-neo-grotesque`	Inter, Roboto, 'Helvetica Neue', Arial, sans-serif
`--font-monospace-slab-serif`	'Nimbus Mono PS', 'Courier New', monospace
`--font-monospace-code`	ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace
`--font-industrial`	Bahnschrift, 'DIN Alternate', 'Franklin Gothic', sans-serif-condensed
`--font-rounded-sans`	ui-rounded, 'Quicksand', 'Arial Rounded MT', Calibri, sans-serif
`--font-slab-serif`	Rockwell, 'Roboto Slab', serif
`--font-antique`	Superclarendon, 'Bookman Old Style', Georgia, serif
`--font-didone`	Didot, 'Bodoni MT', serif
`--font-handwritten`	'Segoe Print', 'Bradley Hand', cursive
`--headers-weight`	600	Default headers font-weight

Font size scale

Variable	Value
`--font-size-00`	.5rem
`--font-size-0`	.75rem
`--font-size-1`	1rem
`--font-size-2`	1.1rem
`--font-size-3`	1.25rem
`--font-size-4`	1.5rem
`--font-size-5`	2rem
`--font-size-6`	2.5rem
`--font-size-7`	3rem
`--font-size-8`	3.5rem

Base color palette

Variable	Default	Purpose
`--text`	#091613	Primary text color
`--background`	#f2f9f8	Page background
`--primary`	#41689b	Primary brand color
`--secondary`	#a4aad8	Secondary color
`--accent`	#1a3aae	Accent color
`--success`	#076b3d	Success state
`--warning`	#ca9c03	Warning state
`--error`	#cf090293	Error state

Color variant families

Each family exposes opacity variants: --color-*< -5 | -10 | -20 | ... -90 > (e.g., --color-primary-10, --color-text-70). Families include: text, background, primary, secondary, accent, success, warning, error.

Component & UI variables

Variable	Default / Notes
`--accent-color`	var(--color-primary)
`--accent-color-hover`	Computed hover accent (OKLCH derivation)
`--shadow-color`	var(--text)
`--transition-base`	.2s (base transition timing)
`--button-primary-color`	white (text on primary buttons)
`--border-color`	var(--color-text-40)
`--border-color-softer`	var(--color-text-20)
`--navbar-background`	var(--color-background)
`--navbar-color`	#444
`--navbar-hover-background`	#f4f4f4
`--navbar-hover-color`	#000

Theme overrides

There are light/dark theme overrides available via :root[data-theme="dark"] and :root[data-theme="light"]. These redefine the base palette and some UI variables (navbar, success/warning/error colors).

Customization Example

/* Override variables in your stylesheet */
:root {
    --primary: #FF6B35;        /* Change primary color */
    --accent: #FDB913;         /* Change accent */
    --spacing-unit: 0.5rem;    /* Adjust base spacing */
    --button-height: 44px;     /* Larger buttons */
    --navbar-background: #333; /* Dark navbar */
    --shadow-color: rgba(0,0,0,.12);
}

Quick Start Guide

Welcome to CSSkel 3.0.0, the comprehensive CSS framework! This guide will help you get started with the framework.

Getting Started

Browse the documentation sections using the navigation menu on the left. Each section contains detailed information about specific components, utilities, and how to use them effectively.

Common Use Cases

Task	How To Implement
Create responsive layout	Use `columns` with `cols:*` classes and responsive prefixes like `cols:4 cols:2@tablet cols:1@mobile`
Style a card	Combine `bg:primary`, `p:4`, `shadow:2`, and `rounded:8` classes
Create form	Wrap all inputs and buttons in `ui` container for proper styling
Add borders	Use `border`, `border-t:2`, `border:primary`, `border:dashed` etc.
Center content	Use `vertical-centered` or `flex:column .items:center .justify:center`

Key Features of CSSkel 3.0.0

CSS Grid Layout - Modern layout system with .columns (deprecated: .grid-container)
100+ Colors - With 10 opacity variants each for precise control
15 Font Stacks - Professional typography options from modernfontstacks.com
Responsive - Mobile-first design with @tablet, @mobile, @laptop prefixes
CSS Variables - Easy customization via custom properties
Dark/Light Themes - Built-in support via data-theme attribute
Interactive States - Hover, focus, active states with opacity and scale transforms
Components - Navbar, breadcrumbs, and accordion components included
Comprehensive Borders - Full border system with styles, widths, and colors
Radius Control - Individual corner and side radius customization

Pro Tips for Using CSSkel:

Use responsive prefixes (@tablet, @mobile) for adaptive designs that work on all devices
Customize the framework by overriding CSS variables in your own stylesheet
Always wrap form elements and buttons in .ui wrapper class
Combine utility classes for powerful layouts without writing custom CSS
Use .vertical-centered for easy content centering
Prefer .columns over deprecated .grid-container for new projects
Leverage opacity variants (primary-5 through primary-90) for color hierarchy
Use border utilities for quick styling without custom borders