A quieter way to find a home. Maison is a magazine-inspired, hand-built HTML template for boutique brokerages, luxury listings agencies, and independent real-estate advisors. Warm bone palette. Terracotta accents. Hairline detail. Built on Tailwind CSS, pre-compiled and minified, with vanilla JavaScript and zero framework dependencies.
Live demo: classicaddons.com/maison
Highlights
- 33 hand-built HTML pages – four home variants, a full property suite, agent profiles, neighborhoods, dashboard, blog, system pages, and a complete style guide.
- Editorial design system – Fraunces (variable display serif), Bricolage Grotesque (humanist sans), and Geist Mono. Considered typography, asymmetric magazine grids, hairline dividers.
- Light & dark mode – every page, persisted to localStorage, respects the visitor’s
prefers-color-schemeon first load. - Working real-estate features – Save with heart icon, side-by-side Compare (up to three), live mortgage calculator, image gallery with lightbox & keyboard nav, URL-syncing filters, sortable listings, and a multi-step property submission form. Everything backed by localStorage so demos feel real.
- Leaflet maps with custom markers – four pages use Leaflet 1.9.4 with OpenStreetMap tiles. Swap to Mapbox or Google with one line.
- Vanilla JavaScript only – no jQuery, no React, no build step required to view. Seven small, well-commented modules.
- Pre-compiled Tailwind – ships a single minified 47 KB
dist/css/style.css. No CDN dependency. Recompile vianpm run buildif you change tokens. - Accessible – semantic HTML5, ARIA labels, visible focus rings, keyboard navigation, alt text on every image, WCAG-AA contrast.
- Responsive – fluid layouts from 360 px up through 1920 px. Mobile drawer, hover-driven mega menu on desktop.
- SEO-ready – unique title, meta description, full Open Graph block, and Twitter Card on every page. Clean canonical URLs.
- Cross-linked navigation – every page reachable from the primary nav, mobile drawer, and footer.
Page list (33 templates)
Home variants
- Home – Editorial (default)
- Home – Agency
- Home – Map
- Home – Search
Property pages
- Properties Grid · Properties List · Properties Map
- Property Detail (gallery, mortgage calculator, viewing slots)
- Property Compare (three-up side-by-side)
- Property Submit (multi-step listing form)
Agents & neighborhoods
- Agents Grid · Agent Profile · Partner Agencies
- Neighborhoods Grid · Neighborhood Detail
Account & dashboard
- Dashboard · Saved Properties
- Sign In · Register · Forgot Password
Content & info
- About · Careers · Contact · FAQ · Pricing
- Blog Grid (The Journal) · Blog Detail
System & reference
- 404 · Coming Soon · Maintenance · Changelog · Style Guide
Technical specs
- HTML5, CSS3, Tailwind CSS 3.4 (pre-compiled, minified)
- Vanilla JavaScript (ES2017+). No jQuery, no framework dependencies.
- Leaflet 1.9.4 for maps (loaded from unpkg, also easy to self-host)
- Google Fonts for type (Fraunces, Bricolage Grotesque, Geist Mono – all SIL OFL 1.1, with self-hosting instructions)
- W3C-valid HTML5. Tested in Chrome, Firefox, Safari, Edge (last two stable). IE not supported.
- Fully responsive: 360 / 414 / 768 / 1024 / 1280 / 1440 / 1920 px tested.
- Project size: 1.4 MB. Build size with node_modules excluded: under 2 MB.
What’s included in the download
- All 33 HTML pages
- Pre-compiled minified
dist/css/style.css - Tailwind source (
tokens.css,input.css,components.css,prose.css) for further customisation - 7 small vanilla-JS modules (design, main, favorites, compare, mortgage, gallery, search)
- Branded placeholder imagery – property, hero, interior, agent, neighborhood, and Open Graph default – all original artwork licensed under your Envato purchase
- Complete favicon set (svg, ico, multiple PNG sizes, apple-touch-icon, web manifest)
- Long-form documentation (
documentation/index.html) – quick start, customisation guide, JS module reference, forms, maps, browser support, going-to-production checklist, credits LICENSE,Licensing/license.txt,CHANGELOG.md,README.md,tailwind.config.js,package.json
What’s NOT included
- Server-side code. Forms are client-side demos – set the
actionattribute to your real endpoint, or pipe through Formspree / Netlify Forms / your backend (documented). - A WordPress version. This is a pure HTML / Tailwind template.
- Stock photography. The bundled placeholders are intentionally generic so you bring your own listings.
Credits
Fonts: Fraunces, Bricolage Grotesque, Geist Mono – all SIL Open Font License 1.1. Libraries: Tailwind CSS (MIT), Leaflet (BSD-2-Clause), OpenStreetMap tiles (ODbL). Icons: hand-authored inline SVG, MIT-style within this item. Demo imagery: original placeholders shipped under your Envato purchase. Full attribution lives in documentation/index.html → Credits & Licenses.
Support & updates
Comment thread on the item page for public questions – usually the fastest channel. Private bugs and account questions: [email protected], replies within two working days. Updates ship through the Envato item page; the changelog.html page documents every release.
Version
1.0.0 – Initial release.
