Behind the Build
Site Plan &
Implementation Brief
The full brief, architecture decisions, design system, and implementation phases behind the Binny Golf Club website.
- 7 Nav Sections
- 10 Components
- 0 Dependencies
- 2 Phases
- AA WCAG Standard
01 — The Brief
Project Overview
A fully responsive, standards-compliant static website for Binny Golf Club — built to be fast, accessible, and straightforward to migrate into Umbraco CMS.
Static HTML/CSS/JS
No build step, no bundler, no npm scripts. Pure standards-based HTML with a single CSS file and one zero-dependency JavaScript file.
Umbraco-Ready
Every header, footer, and component is wrapped in PARTIAL and COMPONENT comment markers mapping directly to Umbraco partial views.
Mobile-First
Responsive from 320 px up. Sliding mobile nav drawer with focus trap, keyboard navigation, and prefers-reduced-motion support throughout.
WCAG 2.1 AA
All colour pairs meet 4.5:1 contrast for normal text. Skip links, visible focus rings, semantic landmarks, and appropriate ARIA attributes throughout.
- Visitors welcome seven days a week — booking and green fees need to be prominent on every page.
- Membership conversion is the primary commercial goal — the apply page is a key CTA destination.
- Google Maps iframe uses a query-based embed (
maps.google.com/maps?q=Binny+Golf+Club…) rather than a Place ID to avoid API key requirements. - All external images use Unsplash for placeholder content — to be replaced with real club photography before launch.
- The footer year is set dynamically via a small inline script so copyright stays current without a CMS.
02 — Site Map
Navigation & Page Structure
Seven top-level sections, each with its own sub-pages. The navigation is consistent across all pages with desktop dropdown menus and a mobile slide-out drawer.
- Live course status badge
- Book a tee time CTA (above the fold)
- Welcome / about excerpt
- Latest news feed (3 cards)
- Visitor CTA strip
- Membership fee overview
- Find us / Google Maps
- Visitor Booking (BRS tee sheet)
- Green Fees
- Societies & Outings
- Visitor FAQs
- Course Overview
- Hole by Hole (aerial + description)
- Scorecard (PDF download)
- Course Conditions
- Why Join Binny
- Categories & Fees
- Apply Online (key conversion)
- Member Login
- Latest News
- Competition Results
- Open Competitions
- Fixtures Calendar
- Juniors
- Our Story (est. 2002, Bernard Gallacher)
- History of Binny Estate
- Committee & Officials
- Sponsors
- Contact form
- Address, phone, email
- Google Maps embed
- How to find us (car & bus)
03 — Architecture
Technical Decisions
Deliberate choices were made at each layer to keep the codebase maintainable, fast, and portable to a CMS without a costly rewrite.
-
No build tooling. Plain HTML, a single
css/global.css, andjs/main.js. Any developer with a text editor can work on this site without installing anything. - Web Components rejected. An initial plan to use custom elements was revised — Kestrel (the Umbraco server) has no SSI support, and light-DOM Web Components would still require JavaScript for server rendering. Plain semantic HTML was chosen instead.
-
SSI rejected. Server-Side Includes were considered for header/footer partials. Rejected because both Kestrel and Python's
http.server(used for local dev) lack SSI support. Header and footer are copied inline on each page with comment markers for future CMS extraction. -
Comment-based partial markers.
<!-- PARTIAL: site-header | Umbraco: Views/Partials/SiteHeader.cshtml -->and<!-- COMPONENT: binny-card -->conventions make future Umbraco migration a mechanical find-and-replace rather than a re-architecture. -
Zero runtime JS dependencies. All behaviour (mobile drawer, dropdown navigation, map lazy-load, card click delegation) lives in a single vanilla
main.jsfile with no libraries or polyfills. -
Lazy-loaded map. The Google Maps iframe uses a
data-srcattribute and is only injected into the DOM when the map container enters the viewport, keeping Lighthouse scores high on pages that don't scroll to the map. -
Favicons generated locally.
favicon.ico(16/32/48 px multi-frame),favicon-32x32.png,favicon-16x16.png, andapple-touch-icon.png(180 px) created from the club logo using macOSsips.
| File / Folder | Purpose |
|---|---|
index.html | Home page — all sections, header, and footer inline |
styleguide.html | Living design system — every component with 2–3 variations |
site-plan.html | This page — the brief and implementation plan |
css/global.css | Single stylesheet: tokens, reset, layout, all components |
js/main.js | Single script: navigation, lazy-load, card clicks, footer year |
includes/site-header.html | Header reference file (3 variants — not served, copy-paste only) |
includes/site-footer.html | Footer reference file (3 variants — not served, copy-paste only) |
images/Logos/ | Club logo (downloaded from live site) |
favicon.ico etc. | Multi-size favicons and Apple touch icon |
04 — Design System
Visual Language
A golf-inspired palette grounded in parkland greens and estate gold, paired with a display serif for headings and a neutral sans-serif for body copy.
Colour Palette
Typography
Cormorant Garamond
Display / Headings. A classical serif that evokes the estate heritage of the club. Used for all h1–h3 headings, hero titles, and large numerical callouts. Weights: 400, 600, 700. Italic variant used for emphasis within headings.
DM Sans
Body / UI. A clean, optically-sized sans-serif that remains readable at small sizes. Used for all body copy, navigation, buttons, labels, and form elements. Optical size range: 9–40. Weights: 400, 500, 600.
Spacing Scale
A 4 px base scale exposed as CSS custom properties (--space-1 through --space-20). All spacing, padding, and gap values throughout the site reference these tokens — no magic numbers.
--space-1= 4 px ·--space-2= 8 px ·--space-4= 16 px ·--space-8= 32 px ·--space-16= 64 px- Container max-width:
1280 pxwithclamp()-based responsive padding. - Border-radius tokens:
--radius-sm,--radius-md,--radius-lg,--radius-xl,--radius-full.
05 — Components
UI Component Library
Ten reusable components, each with 2–3 documented variants in the Styleguide. All are plain semantic HTML — no JavaScript required to render them.
binny-header
Desktop dropdowns, mobile slide-out drawer, focus trap, full keyboard navigation. 3 variants: default, sticky/compact, with CTA strip.
binny-footer
3 variants: full 4-column default, minimal single-row, and with newsletter sign-up form.
binny-hero
Full-bleed image hero with overlay, status badge, eyebrow, title, body, and action buttons. Optional parallax and scroll-fade animation.
binny-card
News/content card with image, category label, title, excerpt, date meta, and read-more link. Whole-card click via data-href.
binny-btn
5 variants: primary, secondary, ghost, inverse, and CTA (gold). 3 sizes: sm, default, lg. Full-width modifier.
binny-text-block
Section text with eyebrow, title, decorative rule, lead, body, and action buttons. Centered and narrow modifiers. IntersectionObserver fade-in.
binny-list
Styled unordered and ordered lists with gold bullet/number styling for use within content areas.
binny-form
Contact and application forms with live validation, ARIA error messages, and accessible field labelling.
binny-table
Membership fees and scorecard data tables. Overflow scroll hint on narrow viewports. Zebra striping and price-column alignment.
binny-map
Google Maps iframe lazy-loaded via IntersectionObserver (Lighthouse boost). Caption with address and directions alongside. Consent placeholder variant.
06 — Implementation
Build Phases
The site was built in two distinct phases — the second being a significant architectural pivot following a decision to remove Web Components in favour of plain semantic HTML.
Phase 1
Design System & Component Build
Established the full design token set in css/global.css — colour palette, typographic scale, spacing system, and component styles. Built the styleguide page first as a living reference for all components and their variants.
Constructed the home page (index.html) using the component system, including the hero section, quick-facts strip, welcome text, course status CTA, news card grid, visitor strip, membership table, and map.
Initial implementation used Web Components (custom elements with light DOM) on the assumption this would aid Umbraco migration by keeping component boundaries explicit in the HTML output.
Phase 2
Web Components Removed — Plain HTML Refactor
After review, Web Components were removed. The key reasons: Kestrel (ASP.NET Core's web server, used by Umbraco) has no SSI support; Web Components still require JavaScript to render, complicating server-side output; and the custom element approach added complexity without benefit for a static-first site.
The js/components/ directory was deleted entirely. A single js/main.js replaced it, consolidating all behaviour: mobile drawer, dropdown navigation, focus trap, card-click delegation, map lazy-loading, and footer year.
All 13 custom element instances in index.html and 31 in styleguide.html were replaced with equivalent semantic HTML. The includes/ folder was added with static header and footer reference fragments for copy-paste use when creating new pages.
The PARTIAL / COMPONENT comment convention was established as the Umbraco migration marker — a mechanical mapping that requires no structural changes to the HTML, only extraction into .cshtml partials.
Assets
Logo & Favicons
The club logo was downloaded from the live Binny Golf Club site (binnygolf.co.uk/images/Logos/BGC-Logo_v2.png) and saved locally to images/Logos/BGC-Logo_v2.png to ensure it displays reliably during development without a live internet connection.
Favicons were generated from the logo using macOS sips: a multi-frame favicon.ico (16 × 16, 32 × 32, 48 × 48 px), favicon-32x32.png, favicon-16x16.png, and apple-touch-icon.png at 180 × 180 px.
What's Next
See It in Action
Explore the live home page or browse the styleguide to see every component and design token in detail.