ParkerBarker Style System

A user-friendly design system prioritizing clarity and accessibility, with special optimizations for iOS WebViews.

Class style guide Semantic guide Quick Start Cursor prompts
🚀

Zero Dependencies

Pure vanilla JavaScript. No build tools, no npm packages. Just include and go.

📱

iOS Optimized

Safe area support, touch-friendly 48px tap targets, and WebView-specific fixes.

🌙

Dark Mode

Built-in dark mode with automatic system preference detection.

♿

Accessible

WCAG-compliant with reduced motion support and screen reader utilities.

🔤

Web font loading

CSS and ParkerBarker.init() work together: webfonts preload, then html gets fonts-ready for a short fade-in without the system-font flash.

Quick Start

Add these lines to your HTML to get started. parkerbarker.css imports variables.css (shared tokens and webfonts); the page briefly hides until webfonts load (or a short timeout), then fonts-ready is set on <html>. ParkerBarker.init() triggers font preloading and that class. Users who prefer reduced motion skip the hide. Minified CSS inlines tokens—no extra request.

For the semantic stack, use semantic.css (same variables.css import) plus ui-core.js then semantic.js, and call Semantic.init()—the same font behavior applies.

<!-- In your <head>: one link pulls in variables.css via @import --> <link rel="stylesheet" href="https://assets.parkerbarker.com/css/parkerbarker.css"> <!-- Before closing </body>: ui-core first, then entry; init runs font loading + html.fonts-ready --> <script src="https://assets.parkerbarker.com/js/ui-core.js"></script> <script src="https://assets.parkerbarker.com/js/parkerbarker.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { ParkerBarker.init(); // ParkerBarker.init({ enableFontLoading: false }); // optional: CSS-only font behavior }); </script>

Available Files

All assets are served from https://assets.parkerbarker.com/

File Description
/css/parkerbarker.css Classic components; imports variables.css for tokens + fonts
/css/semantic.css Semantic attribute styling; same shared variables.css
/css/variables.css Design tokens (--core-*), --pb-*, and semantic vars; imported by both frameworks
/js/ui-core.js Shared JS (fonts, env, delegation); load before parkerbarker.js or semantic.js
/js/parkerbarker.js Class-based JavaScript entry (requires ui-core.js)
/fonts/ GT Ultra Fine & Standard fonts (woff2, woff, ttf)
/favicon/ Favicon assets for all platforms
/index.html Classic stack landing (class-based)
/parkerbarker-guide.html Class-based component & utility reference
/semantic-guide.html Semantic style guide (attribute-based)

Customization

Edit css/variables.css (--core-*) to align both stacks, or override in your own stylesheet after the framework link:

:root { /* Prefer editing variables.css: --core-primary, --core-font-sans, … */ --core-primary: #your-brand-color; --core-primary-dark: #your-darker-shade; /* Or override public tokens */ --pb-primary: #your-brand-color; --pb-font-sans: 'Your Font', sans-serif; /* Spacing */ --pb-space-md: 1.25rem; }