Meridian handbook

Getting started

Thank you for purchasing Meridian. The template is plain HTML, CSS and JavaScript — no build tools are required to use it.

1. Unzip the package.
2. Open index.html in your browser — or better, serve the folder with any local web server so fonts and relative paths behave exactly like on a real host.
3. Pick the homepage you need (index.html, home-shop.html or landing.html), delete the pages you don’t use and start replacing content.

# Any of these starts a local server in the template folder
npx serve .
python3 -m http.server 8000
php -S localhost:8000

File structure

meridian/
├── assets/
│   ├── css/          meridian.min.css (production) · meridian.css (readable)
│   ├── scss/         _variables.scss + component partials (source)
│   ├── js/           meridian.js — all interactions, vanilla JS
│   ├── img/          brand · hero · portfolio · shop · blog · team · misc
│   ├── fonts/        Plus Jakarta Sans variable (woff2)
│   └── vendor/       bootstrap (js + scss) · bootstrap-icons
├── documentation/    this guide
├── partials/         head.html · header.html · footer.html · processwire/_main.php
├── sl/               Slovenian homepage example
├── sitemap.xml · robots.txt · llms.txt · site.webmanifest
└── *.html            26 pages

Pages

Colors, fonts & logo

All design tokens live in assets/scss/_variables.scss. Change them, then recompile the stylesheet:

// assets/scss/_variables.scss
$primary: #4338ff;   // main brand color
$accent:  #ff6b3d;   // secondary highlight
$ink:     #0f1222;   // dark surfaces & text
$paper:   #f7f6f2;   // page background
$border-radius-xl: 1.5rem;
$font-family-sans-serif: "Plus Jakarta Sans", system-ui, sans-serif;

npm install -g sass
sass --style=compressed --no-source-map assets/scss/meridian.scss assets/css/meridian.min.css

Without Sass

Small tweaks can be done by overriding CSS variables in your own stylesheet loaded after meridian.min.css:

:root { --bs-primary: #0a7cff; --bs-primary-rgb: 10,124,255;
--mr-grad: linear-gradient(120deg, #0a7cff, #00c2a8); }

Logo & favicon

Replace the .brand-logo markup in header and footer with an <img> or inline SVG. Replace assets/img/brand/favicon.svg, apple-touch-icon.png and og-image.jpg (1200×630).

Fonts

The font is self-hosted from assets/fonts. To use another font, add its woff2 files, update _fonts.scss and $font-family-sans-serif, and update the <link rel="preload"> in each page head.

Header, menu & footer

The header contains a topbar, sticky navbar, mega menu, language switcher, search modal trigger, theme toggle, account and cart buttons. On screens below 992px the menu becomes an offcanvas panel.

• Active link: add active and aria-current="page" to the current .nav-link.
• Mega menu: a dropdown with the extra class dropdown-mega on the <li>. Its content is a normal Bootstrap grid.
• Hover: dropdowns open on hover on desktop devices with a mouse; click/tap always works.
• Topbar: remove .topbar if you don’t need it.

<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false" data-bs-auto-close="outside">Pages</a>
<div class="dropdown-menu">
<div class="row g-3">
<div class="col-lg-3">
<div class="mega-title">Company</div>
<a class="mega-link" href="about.html">
<span class="mega-icon"><i class="bi bi-building"></i></span>
<span><strong>About us</strong><small>Story, team &amp; values</small></span>
</a>
</div>
<!-- more columns -->
</div>
</div>
</li>

JavaScript features

assets/js/meridian.js is dependency-free (besides Bootstrap). Each feature runs only if its markup is present and is configured with data attributes:

// React to the visitor's cookie choice (e.g. load analytics)
document.addEventListener('mr:consent', (e) => {
if (e.detail === 'all') { /* load analytics / marketing scripts here */ }
});

Forms & backend

All forms use Bootstrap validation, real <label>s, help text and error messages. Forms with data-demo-submit only simulate sending. To connect a backend, remove that attribute and set action/method, or send via fetch:

// in meridian.js, replace the setTimeout demo block with:
fetch(form.action, { method: 'POST', body: new FormData(form) })
.then(r => r.ok ? showSuccess() : showError());

Every public form includes a hidden honeypot field. Pair it with server-side validation, rate limiting and optionally Cloudflare Turnstile or reCAPTCHA.

Shop & cart

The shop UI ships with a working client-side demo cart (stored in localStorage). It powers the mini cart, cart page, checkout summary, free-shipping bar and coupon (demo code MERIDIAN10).

<button type="button" class="btn btn-primary"
data-add-to-cart data-id="p4" data-name="Orbit Table Lamp"
data-price="89" data-img="assets/img/shop/product-4-sm.webp">Add to cart</button>
<!-- outputs -->
<span class="cart-count"></span>
<div data-cart-lines="mini"></div>   <!-- or "page" -->
<span data-cart-sub></span> <span data-cart-ship></span> <span data-cart-total></span>

For a real store, keep the markup and replace the cart object methods in meridian.js with calls to your shop API (PrestaShop, WooCommerce, Snipcart, Stripe Checkout or custom). Constants FREE_SHIP and SHIP set the demo shipping rules; currency comes from <html data-currency="EUR">.

Multilingual

• Set <html lang="xx"> on every page.
• Keep <link rel="alternate" hreflang="…"> tags for every translation plus x-default.
• Translate the JS strings in the I18N object at the top of meridian.js.
• Layouts are designed for longer strings (German, Slovenian…) — buttons and menus wrap gracefully.
• The font includes the latin-ext subset (č, š, ž, ć, đ, ő, ł…).

const I18N = {
en: { added: 'added to cart', empty: 'Your cart is empty', ... },
sl: { added: 'dodano v košarico', empty: 'Vaša košarica je prazna', ... },
de: { added: 'zum Warenkorb hinzugefügt', empty: 'Ihr Warenkorb ist leer', ... }
};

See sl/index.html for a fully translated page.

SEO & GEO

Every page has a unique title, meta description, canonical URL, Open Graph/Twitter tags, a single h1, breadcrumbs and relevant JSON-LD structured data.

GEO (generative engine optimisation): llms.txt gives AI assistants a concise summary of the site, robots.txt allows AI crawlers (remove the lines to opt out), and content uses clear headings, summaries and FAQ blocks that are easy to quote.

ProcessWire & CMS

Each <section> is a self-contained block designed to become a Repeater Matrix type (or PageTable / page-builder block):

Use multilingual field types (TextLanguage, TextareaLanguage, PageTitleLanguage) and language-specific page names. partials/processwire/_main.php is a starter layout with a dynamic menu, hreflang output and block rendering.

<?php foreach($page->blocks as $block) echo $block->render(); // /site/templates/blocks/{{type}}.php ?>

The same structure maps cleanly to PrestaShop (Smarty), WordPress (block patterns / ACF flexible content), Statamic, Craft or any headless CMS.

Performance & accessibility

• One stylesheet (~43 KB gzipped incl. all of Bootstrap), two deferred scripts, no jQuery.
• Self-hosted variable font, preloaded, font-display: swap.
• Images in WebP with explicit width/height and loading="lazy" below the fold; hero image uses fetchpriority="high".
• Optional: run PurgeCSS on your final templates to remove unused CSS.

• Skip link, visible focus states, ARIA labels on icon buttons, semantic landmarks.
• Animations respect prefers-reduced-motion.
• Color contrast meets WCAG 2.2 AA.

Credits & license

Your purchase includes a license to use Meridian according to the license terms on pyxios.com. Redistribution or resale of the template itself, in original or modified form, is not permitted.

Changelog & support

1.0.0 — November 12, 2026

Initial release.

Need help or custom work? Contact us via pyxios.com. Please include your order number.