Card title
Optional subtitle
Body content with optional footer below.
Getting started
Link the stylesheet, then the shared JS core and ParkerBarker entry. Call ParkerBarker.init() after DOMContentLoaded so fonts and enhancements run in step with the CSS fonts-ready behavior.
<link rel="stylesheet" href="css/parkerbarker.css">
<script src="js/ui-core.js"></script>
<script src="js/parkerbarker.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
ParkerBarker.init();
});
</script>
Use the minified CDN URLs from the README for production; parkerbarker.min.css inlines variables.css.
ParkerBarker wordmark
Match the home page: Parker in the serif stack (GT Ultra Fine) and Barker in the sans stack (GT Ultra Standard). Use pb-nav-brand on the link so size and weight stay consistent.
<!-- Nav brand (serif Parker + sans Barker; requires parkerbarker.css + variables webfonts) --> <a href="/" class="pb-nav-brand"><span class="pb-text-serif">Parker</span><span class="pb-text-sans">Barker</span></a> <!-- Optional: same split in a heading --> <h1 class="hero-title"><span class="pb-text-serif">Parker</span><span class="pb-text-sans">Barker</span> Style System</h1>
Design tokens
Customize css/variables.css: --core-* is the source of truth. Public --pb-* names alias those values so this sheet stays aligned with semantic.css.
/* After the framework link, or in variables.css */
:root {
--core-primary: #2563eb;
--core-font-sans: 'Your Sans', system-ui, sans-serif;
}
--pb-primary
--pb-secondary
--pb-accent
--pb-danger
Typography
Headings and body use GT Ultra via CSS defaults. Utility classes add display, quote, and caption treatments.
Heading level 3
Subtitle style (.pb-subtitle)
Body copy uses the sans stack at base size.
Quote style with .pb-quote
Caption with .pb-caption
<p class="pb-subtitle">…</p>
<blockquote class="pb-quote">…</blockquote>
<p class="pb-caption">…</p>
<p class="pb-display">Display line</p>
Containers
Center content with max-width utilities. Pair with horizontal padding via the container defaults.
<div class="pb-container">…</div>
<div class="pb-container-lg">…</div>
<div class="pb-content-container">…</div>
Flex & grid
Layout helpers follow a predictable prefix: pb-flex, pb-grid, justify/align utilities, and gap scales.
A
B
C
1
2
3
<div class="pb-flex pb-justify-between pb-items-center pb-gap-md">
<div class="pb-grid pb-grid-cols-2 pb-gap-lg">…</div>
Forms
Wrap fields in .pb-form. Labels, inputs, validation, and custom checkbox/radio patterns are scoped there.
<form class="pb-form">
<label for="email">Email</label>
<input id="email" type="email" />
</form>
Links
Default anchors pick up brand colors. Variants tune contrast for nav and footers.
<a href="#" class="pb-link-subtle">Subtle</a>
<a href="#" class="pb-link-button">Outline</a>
Alerts
Info
Something you should know.
Success
Saved successfully.
<div class="pb-alert pb-alert-info">…</div>
<div class="pb-alert pb-alert-error">…</div>
Cards
Clickable card
.pb-card-clickable lifts on hover.
<article class="pb-card">
<header class="pb-card-header">…</header>
<div class="pb-card-body">…</div>
</article>
Utilities
Spacing, display, borders, shadows, and text helpers use the pb- prefix. Examples:
.pb-mb-2 .pb-mt-3 .pb-hidden
.pb-shadow-md .pb-rounded-lg .pb-text-center
.pb-sr-only (visually hidden, available to AT)
Tooltips: add data-tooltip="Your hint" to supported elements (see stylesheet).
Dark mode
System dark preference can seed the UI; data-pb-theme-toggle flips the pb-dark-mode class on body. Pair with your own dark overrides or the built-in .pb-dark-mode variable overrides in CSS.
<button type="button" data-pb-theme-toggle>Toggle theme</button>
JavaScript
ParkerBarker.init() wires font loading, theme, toasts, forms, and optional iOS helpers. Public surface:
ParkerBarker.init({ enableFontLoading: true });
ParkerBarker.toast.show('Hi', { type: 'info', duration: 4000 });
ParkerBarker.theme.toggleDarkMode();
ParkerBarker.dom.addClass(el, 'pb-shadow-md');
Load ui-core.js first; shared primitives live on ParkerBarkerCore.