Eventside documentation

1Introduction

Thank you for choosing Eventside – a modern event, conference & meetup HTML5 template. It contains 6 home demos, 31 inner pages (including a tickets page with a group price calculator), a live style switcher, 5 header styles, 4 footer styles, 3 mobile menu skins and a fully working front-end shop (cart, wishlist, checkout).

• Pure HTML5 / CSS3 / vanilla JavaScript – no jQuery, no frameworks, no build step required.
• Fully responsive (320 px → 1920 px+), keyboard accessible, prefers-reduced-motion aware.
• Design tokens with CSS custom properties – change the whole color scheme in one place.
• Inline SVG icon set (no icon font requests).
• Style switcher on the main home: try colours, fonts, corners, headers, footers and a boxed layout live, and browse every home demo in a full-screen gallery. The inner pages carry the colour, font, corner and motion choices over.
• Inner page kit: five page hero layouts with breadcrumbs, a ticket-style closing band with a live countdown, and page-to-page transitions where the title and picture carry over.
• Built-in motion system: staggered scroll reveals, image wipes, parallax heroes, page transitions, draggable sliders, magnetic buttons – all dependency-free and switched off automatically for users who prefer reduced motion (or for everyone with <html data-motion="off">).
• Privacy-first map (click-to-load) and cookie consent with settings.

2File structure

eventside/
├── index.html … wishlist.html     46 ready-to-use pages
├── assets/
│   ├── css/style.css               main stylesheet – edit this one (commented, table of contents)
│   ├── css/style.min.css           minified build the pages load (perl tools/minify-css.pl)
│   ├── css/demos/                  one stylesheet per home demo (festival.css … food.css + .min.css),
│   │                               loaded only by that demo page, after style.min.css
│   ├── js/main.js                  all JavaScript (commented modules)
│   ├── js/main.min.js              minified build the pages load (perl tools/minify-js.pl)
│   ├── img/                        images (see Credits)
│   ├── video/                      background clips (home page, festival aftermovie)
│   ├── audio/                      festival artist previews (short m4a loops)
│   ├── docs/                       brochure PDF, .ics calendar file, e-mail template
│   └── switcher/                   style switcher for the demo (main home + inner pages, optional)
├── php/contact.php                 contact form mail handler
├── robots.txt, sitemap.xml         search engine files – set your domain (see SEO)
├── site.webmanifest                app name and icons for phones
├── tools/minify-css.pl             rebuilds style.min.css and css/demos/*.min.css
├── tools/minify-js.pl              rebuilds main.min.js from main.js
├── tools/build-menus.pl            rebuilds the main and mobile menus in every page from one list
├── tools/programme.pl             the conference programme: days, rooms, topics, speakers, sessions
├── tools/build-schedules.pl       writes every schedule and speaker agenda from tools/programme.pl
├── tools/build-switcher-parts.pl   rebuilds the switcher's header and footer variants
└── documentation/                  this file

3Getting started

1. Unzip the package and open index.html in your browser – everything works offline (except Google Fonts, the map and the video embeds).
2. Upload the contents of the eventside folder to your web server via FTP.
3. Edit texts directly in the HTML files. Each section is marked with a comment such as <!-- ===== SPEAKERS ===== -->.
4. Replace images in assets/img/ keeping the same file names, or update the src attributes.

4How-to recipes

Ten changes people make first. Each takes a few minutes; the sections below go deeper.

5Pages

Fifteen home demos and 31 inner pages. Each demo has its own colours and type; the inner pages share the main look and take the colour of the demo a visitor came from.

Programme and schedules

Every schedule in the template comes from one file, tools/programme.pl: the four days, the rooms, the topics with their colours, the speakers and all 24 sessions with a time, room, topic, type and summary. Change it, then run perl tools/build-schedules.pl from the template folder. That rewrites the day tabs on schedules.html, the main home (sessions marked hl) and event-detail.html, the timetable and the full list, and the agenda in each speaker biography on the main home and speakers.html, plus the speaker index and spotlight pages. Speakers carry their portrait and biography in the same file, so every speaker page tells the same story. The three schedule pages and the three speaker pages each link to each other with the layout switch at the top (.sc-views). Session avatars are 184×184 images in assets/img/avatars/, named after the speaker key.

6Headers & menus

Five desktop headers are included, and the style switcher lets you try each one on the main home. Copy the <header> block from a page that uses it:

Below 1200 px every page automatically switches to the compact .mobile-header. The off-canvas panel (#site-menu) is shared by the desktop off-canvas header and the mobile menu.

Off-canvas menu

On desktop the panel has two panes: the big menu items on the left and a stage on the right. The stage shows an event card (photo, date, live countdown, ticket button and calendar link); pointing at Demos, Pages, Blog or Shop shows that group's links there instead, with the demos as thumbnails. Below 1200 px the groups open as an accordion and the event card sits under the menu. Tab stays inside the open panel and Esc closes it.

The card on each demo home shows that demo's event, and every other page shows the main conference. Change the card texts, dates and photos in the %CARD list in tools/build-menus.pl; the button copies the page's own header ticket link. The small number next to each group is its page count, and the short line above each group's links is its note.

Off-canvas colours

Change the modifier class on <div class="offcanvas …" id="site-menu">:

• offcanvas--blue – blue (Mobile menu 03)
• offcanvas--light – light grey (Mobile menu 02)
• offcanvas--gradient – dark gradient (Mobile menu 01)

Add offcanvas--full to let the panel cover the header on desktop, with its own close button.

Add is-open is-initial to show the panel open on load (desktop only), as on the main home.

Sticky header

Any header with the data-sticky-header attribute becomes sticky after scrolling past it. Remove the attribute to disable.

Menus

Every page has the same main menu (Demos, Pages, Blog, Shop, Contact) and the same mobile menu. Both are written into the pages by tools/build-menus.pl from one list at the top of that file: add, rename or move a page there, then run perl tools/build-menus.pl from the template folder. It marks the current page in each file and leaves out pages that don't exist. Run perl tools/build-switcher-parts.pl afterwards so the style switcher's headers match. You can also edit the menus by hand in each page.

Dropdown styles

Each top-level entry in the list can pick how its dropdown looks with the style key:

Wide dropdowns are centred under their menu item. All of them open with a curtain effect and the links follow one after another.

7Footers

Four footers are included. Each is one <footer class="site-footer …"> block; copy it from the page that uses it.

Add site-footer--dark to any footer for the dark version. The copyright year updates automatically (data-year).

8Colors & fonts

All colors are CSS variables at the top of assets/css/style.css. The pages load the minified copy, so after any change run perl tools/minify-css.pl from the template folder (Perl comes with macOS and Linux).

:root {
  --c-primary: #0c00c1;      /* brand blue */
  --c-primary-rgb: 12, 0, 193;
  --c-dark: #1b1e23;
  --c-text: #6a6a6a;
  --c-turquoise: #a8e3e3;
  --f-base: "Poppins", …;     /* body & headings */
  --f-accent: "Roboto", …;    /* italic accent words */
  --f-num: "Oswald", …;       /* countdown numbers */
}

Spacing & type scale

Section spacing and section titles come from a few variables, so one change keeps every page in rhythm. --section-py is the top and bottom space of every .section; it steps down on smaller screens (120 → 110 → 90 → 80 → 70px). Titles and lead texts scale smoothly between phone and desktop.

:root {
  --section-py: 120px;                          /* every .section */
  --section-py-sm: calc(var(--section-py) * .6);   /* compact bands */
  --section-py-lg: calc(var(--section-py) * 1.6);  /* sections with a big image */
  --fs-h2: clamp(28px, 1.2rem + 2vw, 44px);     /* .sec-head__title */
  --fs-lead: clamp(16px, .85rem + .45vw, 20px); /* .sec-head__text */
}

#0c00c1   #1b1e23   #a8e3e3   #e8343e

Fonts are loaded from Google Fonts in the <head> of each page (Poppins, Roboto, Oswald, Nunito, Playfair Display; the festival demo adds Anton, the hackathon demo Space Grotesk and JetBrains Mono, the expo demo Fraunces and Inter Tight, the webinar demo Plus Jakarta Sans, the AI summit Geist and Geist Mono, the business forum Instrument Serif and Hanken Grotesk, the education demo Bricolage Grotesque, the creators demo Unbounded, the wedding Cormorant Garamond and Manrope, the medical congress Source Serif 4 and Public Sans, the marathon Big Shoulders Display and Inter, the film festival Playfair Display SC and IBM Plex Sans, the food festival Fraunces and DM Sans). To self-host, download them from fonts.google.com and replace the <link> with your own @font-face rules.

Demo themes

Each demo sets its own colors and fonts with one attribute on the <html> tag. The festival demo uses <html lang="en" data-demo="festival"> the hackathon demo data-demo="tech", the expo demo data-demo="expo", the webinar demo data-demo="webinar", then data-demo="ai", "business", "education", "creators", "wedding", "medical", "marathon", "film" and "food" Each demo has its own stylesheet in assets/css/demos/ (festival.css, tech.css … food.css), and only that demo page loads it, after the main one: <link rel="stylesheet" href="assets/css/demos/festival.min.css">. The values sit at the top of each file:

[data-demo="festival"] {
  --c-primary: #e3124f;      /* hot pink: buttons, links, accents */
  --c-accent: #c6ff1e;       /* lime: badges and highlights */
  --f-display: "Anton", …;   /* poster headings */
  --fest-bg: #0b0a10;        /* page background */
}

[data-demo="tech"] {
  --c-primary: #f24e15;      /* signal orange: buttons, highlights */
  --f-display: "Space Grotesk", …;
  --f-mono: "JetBrains Mono", …;   /* labels, times, terminal */
  --tech-bg: #f3f2ec;        /* paper background */
  --tech-ink: #101014;       /* text and dark bands */
}

[data-demo="expo"] {
  --c-primary: #1f5a46;      /* forest green: buttons, links */
  --c-accent: #c8643b;       /* terracotta: italic accents */
  --f-display: "Fraunces", …;
  --f-ui: "Inter Tight", …;  /* body text on the page */
  --expo-bg: #f4f1ea;        /* warm white background */
}

[data-demo="webinar"] {
  --c-primary: #5b3df5;      /* violet: buttons, links, active tabs */
  --c-accent: #12b886;       /* mint: live states and checks */
  --f-display: "Plus Jakarta Sans", …;
  --web-bg: #f6f5ff;         /* lavender white background */
  --web-ink: #14123a;        /* headings, player and dark bands */
}
[data-demo="ai"] {
  --c-primary: #c5f24a;      /* lime: buttons (with dark text), highlights */
  --f-display: "Geist", …;
  --f-mono: "Geist Mono", …; /* labels and times */
  --ai-bg: #0a0c0b;          /* near-black background */
  --ai-ink: #f1f4ec;         /* headings */
}

[data-demo="business"] {
  --c-primary: #14254a;      /* navy: buttons, active tabs */
  --c-accent: #c9a253;       /* brass: accents on navy */
  --f-display: "Instrument Serif", …;
  --biz-sans: "Hanken Grotesk", …; /* body text on the page */
  --biz-bg: #f5f2ea;         /* ivory background */
}

[data-demo="education"] {
  --c-primary: #0f6b62;      /* teal: buttons, links */
  --c-accent: #ffc53d;       /* sunflower: underlines, stickers */
  --f-display: "Bricolage Grotesque", …;
  --edu-sans: "Nunito", …;   /* body text on the page */
  --edu-bg: #fff8ec;         /* cream background */
}

[data-demo="creators"] {
  --c-primary: #ff2e88;      /* hot pink: buttons (with ink text), tape */
  --c-accent: #ffe14a;       /* yellow: highlights */
  --f-display: "Unbounded", …;
  --cr-ink: #161015;         /* borders, shadows and dark bands */
  --cr-bg: #fff6fa;          /* pink-white background */
}

To give another page the festival look, add the attribute, link assets/css/demos/festival.min.css after style.min.css and add family=Anton to its Google Fonts link. The same goes for a section you copy out of a demo: the page needs that demo's stylesheet. To make your own theme, copy a demo file (for example to demos/summit.css), rename the block to data-demo="summit", change the values and run perl tools/minify-css.pl.

Dark mode

The main home and all inner pages have a dark version; the fifteen home demos keep their own palettes. Visitors switch it in the style switcher (Style tab: Light, Dark or Auto, which follows the system setting); the choice is saved in the browser and applied before the page paints, so there is no flash. To make dark the default for everyone, add the attribute yourself:

<html lang="en" data-theme="dark">

The dark colours are tokens in section 25 of style.css. Change them there and every part follows:

html[data-theme="dark"]:not([data-demo]) {
  --c-bg: #0d0f12;        /* page background */
  --c-surface: #14171c;   /* cards, panels, menus */
  --c-heading: #eef0f3;   /* headings */
  --c-text: #a6abb6;      /* body text */
  --c-primary: #6d66ff;   /* a lighter brand colour that reads on dark */
}

Demo homes that set data-demo keep their own colours in both modes.

9Style switcher

The main home (index.html) has a "Customize" panel on the left edge. Visitors can try light or dark mode, the colour, fonts, corners, header, footer, page width and animations live, and browse the fifteen home demos. Choices last for the visit (sessionStorage), so every new visit starts from the designed look, and the panel can copy a link to the current look.

It is loaded by three lines in the <head> of index.html. To ship the site without it, delete these lines and the assets/switcher/ folder; nothing else depends on them.

<link rel="stylesheet" href="assets/switcher/switcher.css">
<script src="assets/switcher/switcher.js"></script>
<script src="assets/switcher/switcher-parts.js" defer></script>

Links can preset any option, which is handy for screenshots: index.html?color=forest&font=editorial&radius=round&header=boxed-dark&footer=b-dark&layout=boxed. Values: color = indigo, royal, teal, emerald, forest, violet, magenta, rose, orange, ink or a hex code without #; font = poppins, jakarta, grotesk, editorial; radius = default, sharp, soft, round; header = offcanvas, boxed-light, boxed-dark, minimal, overlay; sticky = on, off; footer = a, b-light, b-dark, compact; layout = wide, boxed; motion = on, off.

The inner pages load a lighter version with two of the three lines: <script src="assets/switcher/switcher.js" data-scope="style"></script> and the stylesheet. There the panel has the Demos and Style tabs (colour, fonts, corners, animations), and the choices made on the main home carry over. Header, footer and page width stay as each page was built. A visitor who arrives from the festival, hackathon, expo or webinar demo sees the inner pages in that demo's colour for the rest of the visit, so the preview stays in one look; picking a colour in the panel ends it. This is part of the switcher only: on your site the colour comes from --c-primary.

The panel only previews the options. To keep a look for your own site, copy the matching header and footer markup from the pages listed under Headers and Footers and set the colour and fonts as described in Colors & fonts. Any page can turn animations off with <html lang="en" data-motion="off">.

10Inner page kit

Page hero

The inner pages open with <section class="ph ph--…">. All four layouts share the same parts: a breadcrumb (.ph__crumbs), the title (.ph__title, one .ph__line per line so each rises on its own), a lead, info chips (.ph__meta) and buttons (.ph__actions). Copy the section from the page that uses the layout you want:

The product page only has a breadcrumb bar (<nav class="crumbbar">) so the product starts at the top; its name is the page's <h1>.

Sidebar widgets

Article and event sidebars (<aside class="sidebar">) are a list of .widget blocks with a .widget__title: search, categories, latest posts, newsletter, tags, socials, speakers and event info. Two more are built for reading:

Articles also get a reading progress bar: <div class="read-progress" aria-hidden="true"></div> inside .post-sec. It runs on CSS scroll timelines where supported and on a small script elsewhere.

The dark layouts draw the accent word as an outline, so they work with any brand colour. On Schedules, the day buttons use data-tab-jump="day-tab-2": a click opens that tab and scrolls to it. Any button can do the same for any tab set.

Ticket band

The closing band on the inner pages is <section class="cta2">: a ticket in the brand colour with a tear-off stub, a live countdown (data-countdown) and a barcode. Add cta2--ink for the dark version (tickets.html uses it).

Tickets page

Page transitions

Between pages, the title (#page-title), the breadcrumb and the hero picture carry over to the next page where browsers support cross-document View Transitions. A page reached this way skips its own title entrance.

11Icons & logo

Icons are original SVG symbols embedded at the top of every page. Use any icon like this:

<svg class="icon" aria-hidden="true"><use href="#i-calendar"></use></svg>

Available names: search, cart, cart-solid, heart, menu, close, chevron-*, arrow-*, plus, minus, check, user, lock, eye, grid, list, filter, trash, clock, share, card, delivery, support, refresh, map-pin, calendar, calendar-solid, download, cloud-download, play, play-circle, envelope, phone, users, chat, laptop, mic, globe, bar-chart, star, tag, ticket, quote, check-circle, x-circle, paper-plane, home, music, gamepad and social icons (facebook, twitter, instagram, pinterest, youtube, linkedin, vimeo, behance, dribbble, tiktok).

The logo is the #logo symbol: <svg class="logo"><use href="#logo"></use></svg>. Variants: logo--white, logo--blue. Colors can be set per part with --logo-a / --logo-b. To use your own logo, replace the <svg class="logo"…> with an <img>.

12Components (data attributes)

Open widgets.html to see 27 of these working side by side, each with the attribute to copy and the pages that use it.

A small public API is available as window.Eventside (e.g. Eventside.toast('Saved!'), Eventside.menu.open(), Eventside.cart.add('keep-going', 1)).

13Forms & PHP

Every form with data-ajax-form is validated (required, e-mail, minlength, data-match) and shows an inline message that names the fields to fix; invalid fields get aria-invalid and point to the message for screen readers. While sending, the submit button shows a spinner (.is-loading). Customize texts with data-success, data-error (replaces the automatic message), data-fail (server error) and redirect with data-redirect.

The contact form posts to php/contact.php. Open the file and set $recipient to your address. By default it sends with PHP mail(). Many hosts turn mail() off or its messages land in spam, so the file can also send through your mail provider's SMTP server (no library needed): fill in the $smtp settings at the top.

$smtp = array(
  'host'     => 'smtp.yourprovider.com',
  'port'     => 587,          // 587 with 'tls', 465 with 'ssl'
  'secure'   => 'tls',
  'username' => 'you@yourdomain.com',
  'password' => 'your SMTP or app password',
  'from'     => 'no-reply@yourdomain.com',
);

Leave 'host' empty to go back to mail(). The sender address should belong to your domain or the SMTP account, and the visitor's address is set as Reply-To. When opened locally (file://) the form shows a demo success message.

Newsletter, login and register forms are front-end demos. Connect them to your newsletter provider (Mailchimp, Brevo …) or back-end by changing the action attribute.

14Shop (front-end demo)

Cart, wishlist, coupon codes (EARLY = 20%, EVENTSIDE10 = 10%), checkout validation and the mini-cart work entirely in the browser with localStorage. The product catalogue is defined at the top of the shop module in assets/js/main.js (var PRODUCTS = {…}); product cards reference it with data-add-to-cart="product-id" and data-wishlist-toggle="product-id".

Each shop item opens its own page: product-details.html?p=product-id. The page reads the item from PRODUCTS and fills in the title, price, short text, options, gallery, SKU, event, tags, description, specifications and review, so one file serves every product. Shop items carry the extra fields cat, event, sku, ref, desc, about, specs, options, colors (a swatch per colour with its photo), gallery, tags and review. To add a product, copy an entry, give it a new id and photos, and link to it with ?p= your id. Without ?p the page shows its own markup (the Breaking Boundaries T-shirt). Gallery photos are 1000×1120, shop cards 740×960.

Prices show a dollar sign by default. To use another currency on a page, add it to the <html> tag, for example <html lang="en" data-currency="€"> (the expo demo does this); the cart, mini-cart and stand calculator pick it up.

This is a static template: no real payments or user accounts are processed. Integrate a back-end (WooCommerce, Shopify Buy Button, Snipcart, Stripe Checkout …) for a live store.

15Map

The contact page is privacy-friendly: a light, original city-map illustration (assets/img/misc/city-map.svg) is shown first, and the live map only loads when the visitor clicks Load interactive map – no third-party request before consent, no API key. Set your own location in data-map-src on .map-sec__map (any Google Maps / OpenStreetMap embed URL) and update the “View larger map / Direction” links (mlat, mlon).

16SEO & going live

Every page ships with a unique <title> and meta description, Open Graph and Twitter card tags, one <h1>, alt text on every image, a favicon set (favicon.svg, favicon-32.png, apple-touch-icon.png) and a web app manifest (site.webmanifest). Before you publish:

1. Domain: replace https://example.com/ in robots.txt and sitemap.xml with your own domain, and remove the demo pages you do not use from the sitemap.
2. Share image: social networks need absolute URLs. Change og:image to the full address, e.g. https://yourdomain.com/assets/img/og-image.jpg (1200 × 630). Optionally add <link rel="canonical" href="…"> with each page's final URL.
3. Event data: the home demos and event-single.html contain schema.org Event data (<script type="application/ld+json"> in the <head>). Update the name, dates, place and ticket URL so Google can show your event in search results. Check it with Google's Rich Results Test.
4. Private pages: 404, cart, checkout, order complete, account, wishlist and login carry <meta name="robots" content="noindex, follow">; keep it.
5. Analytics: the template contains no tracking code. Paste your provider's snippet (Google Analytics, Plausible, Fathom …) just before </head> on every page. Tracking that sets cookies should only start after the visitor accepts the cookie banner: listen for the eventside:consent event, whose detail.analytics is true once the visitor allows analytics:

<script>
document.addEventListener('eventside:consent', function (e) {
  if (e.detail.analytics) { /* start your analytics here */ }
});
</script>

17Quality checks

These are the checks the template went through before release. Run the same ones on your own pages after you edit them.

• HTML: every page was checked for unclosed or misnested tags, duplicate ids, labels and ARIA attributes that point to a missing id, list and paragraph content rules and images without alt text – no issues. Before you publish, run your edited pages through the W3C Nu HTML Checker.
• CSS: one hand-written stylesheet built on tokens, plus a small one per home demo so each page loads only what it uses; the .min.css files are generated with perl tools/minify-css.pl, so edit the source files and rebuild.
• JavaScript: the pages load main.min.js, generated from the commented main.js with perl tools/minify-js.pl. Edit main.js and rebuild. (If you prefer, change the script tag to main.js and skip the build.)
• The tools/ scripts are optional helpers; the site never needs them to run. They use Perl, which comes with macOS and Linux. On Windows install Strawberry Perl first, or edit the files by hand.
• JavaScript: all scripts run in strict mode, have no dependencies and load with no console errors on all 46 pages, the documentation and the landing page.
• Layout: no sideways scrolling on any page at 320px wide; the pages were reviewed at phone, tablet and desktop widths.
• Contrast: text colours were measured against their backgrounds in light and dark mode.
• Motion: every animation has a reduced-motion fallback, and the switcher can turn animations off.

18Browser support

Latest Chrome, Edge, Firefox, Safari (macOS & iOS) and Chrome for Android.

19Credits & licenses

• Fonts: Poppins, Roboto, Oswald, Nunito, Playfair Display, Anton, Space Grotesk, JetBrains Mono, Fraunces, Inter Tight, Plus Jakarta Sans, Geist, Geist Mono, Instrument Serif, Hanken Grotesk, Bricolage Grotesque, Unbounded, Cormorant Garamond, Manrope, Source Serif 4, Public Sans, Big Shoulders Display, Inter, IBM Plex Sans, Playfair Display SC, DM Sans – Google Fonts, SIL Open Font License.
• Icons, logo, sponsor & payment marks, illustrations-free UI graphics: original artwork made for Eventside. Sponsor names are fictional.
• Photos: Unsplash (Unsplash License). Every photo, its photographer and its source link are listed in assets/img/CREDITS.txt. The photos are shown in the live preview only. In the download each one is a neutral placeholder with the same file name and size, so every layout stays intact until you add your own. Large page headers also ship a -w2560 size for high-density screens.
• Videos: the online-meeting clip (main demo, event detail) is by cottonbro studio on Pexels, the festival aftermovie clip by Milan Kiro on Pexels (both Pexels License). The artist previews in assets/audio/ were synthesised for Eventside. Replace them with media you have the rights to. The download leaves the background videos out: their <source> lines are kept as comments in index.html, index-3.html and event-detail.html, ready for your own clips in assets/video/.
• Map: © OpenStreetMap contributors.

20Changelog

v1.0.0 – Initial release (fifteen home demos, 31 inner pages, a widgets page, style switcher)

Need help? Contact us through the item support tab. Please include the page URL and a short description.