Ambco Hygiene Care

Marketing and product catalogue site for Ambco Hygiene Care, a Mumbai based supplier of professional cleaning tools and accessories. It is a static site built with Eleventy, started from the Eleventy Excellent template and adapted to this project's needs.

Live site: ambcohygiene.com

Stack

• Eleventy 2 for templating and the build, with Nunjucks as the template language.
• CSS written by hand in a CUBE style layout (global, compositions, utilities, blocks), processed through PostCSS with Tailwind used only as a token and utility generator. Tailwind's preflight reset is disabled.
• Design tokens in src/_data/designTokens/, converted into Tailwind theme values and CSS custom properties at build time. Type and space scales are fluid, generated as clamp() values.
• esbuild bundles and minifies the client side JavaScript.
• eleventy-img generates responsive AVIF, WebP and JPEG variants.
• Pagefind builds the on site search index.
• Netlify hosts the site.

CSS and JS are treated as first class Eleventy templates rather than as a separate pipeline, so a single eleventy run produces the whole site.

Project structure

.eleventy.js          Eleventy entry point, kept thin
config/               everything the entry point delegates to
  collections/        custom collections
  filters/            custom filters
  shortcodes/         image, YouTube, raw include
  transforms/         HTML minification and post processing
  events/             build hooks (Open Graph image conversion)
  template-languages/ CSS and JS treated as Eleventy templates
  css-utils/          clamp generator, token to Tailwind conversion
src/
  _data/              global data, product catalogue, design tokens
  _includes/partials/ reusable markup
  _includes/svg/      inline SVG
  _layouts/           base, home, page, products, product-categories, search, contact
  pages/              the pages themselves
  helperfiles/        sitemap, robots.txt, redirects, humans.txt, web manifest
  assets/             CSS, scripts, fonts, images
dist/                 build output, not committed

Content

Site wide details live in src/_data/site.js: name, description, language, default Open Graph image and the full business address, phone numbers, email and Google Maps embed. The contact page and footer read from that one file, so a change to a phone number or address only needs to happen there.

The product catalogue lives in src/_data/products.json as a single nested tree: category, subcategory, manufacturer, product type, product variant. Eight categories are currently defined, including Housekeeping, Tissues, Dispensers and Industrial Cleaning Machines.

Requirements

Node 16 or newer.

Getting started

Install dependencies:

npm install

Start the dev server on http://localhost:8080 with watch and live reload:

npm start

Produce a production build in dist/:

npm run build

npm run clean removes dist/ on its own if you need a fresh start.

There is no required configuration to run locally. A .env file is read if present (dotenv), and site.url falls back to http://localhost:8080 when the URL environment variable is absent, which Netlify supplies during deploys.

Deployment

Netlify builds with npm run build and publishes dist/. netlify.toml also sets the security headers (CSP, X-Frame-Options, Referrer-Policy, Permissions-Policy and others) and caches .cache between builds so eleventy-img does not regenerate every image each time.

Credits

Built on Eleventy Excellent by Lene Saile, which follows the CUBE CSS and design token approach from Andy Bell's Every Layout and buildexcellentwebsit.es. The navigation pattern is based on Manuel Matuzović's work, and the Open Graph image generation on Bram Nijenhuis's.

License

ISC. See LICENSE.MD.