Loft — Free Architecture Studio Website Template
Loft is a cool, concrete-toned template built for architecture practices, not furniture showrooms — all strong grid, mono annotations and generous whitespace. It ships with a filterable projects grid (residential / commercial / cultural), a full case-study block with a technical spec sheet, and a studio, team, awards and contact section. Every interaction is vanilla JavaScript on self-hosted Bootstrap 5, so it deploys clean on strict-CSP hosts.
Features
- Full-bleed project hero with a drawing-style title block (location, coordinates, year)
- Filterable "selected work" grid with live counts and an asymmetric 12-column layout
- Featured case-study block with a technical spec sheet and a detail-shot strip
- Studio / approach section with a numbered methodology and a portrait team grid
- Tabular awards-and-press list plus a client/publication logo row
- Six-service grid with inline SVG line icons (no icon fonts)
- Dark contact section with a validated enquiry form (project type + budget selectors)
- Scrollspy nav, condensing sticky header, reveal-on-scroll, full reduced-motion support
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Cool concrete monochrome, architectural grid, mono blueprint annotations
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Loft really free for commercial projects?
Yes. Use it for client and commercial work at no cost. You may not resell or redistribute the template itself as a template.
Does it use jQuery or any icon font?
No. All behaviour is vanilla JavaScript in one `main.js`, and every icon is inline SVG — so it passes strict Content-Security-Policy hosts without external icon-font or script requests.
How is Loft different from Habitat in the same category?
Habitat is a warm, serif, furniture-and-home studio. Loft is the opposite: a cool concrete monochrome, a grotesque + monospace type system, and a rigid architectural grid built for a building practice rather than an interiors showroom.
Can I add more projects or change the filters?
Yes. Each project is a single `.proj` block with a `data-type` attribute — duplicate one, set its type, and update the count in the matching filter button. The filter logic reads the attributes automatically.
