Larder

About this template

Larder is a complete website for a food blog, built around the number every recipe on the internet leaves out: what the dish actually costs.

The reason nobody publishes it is the pack size. A recipe calling for 115g of butter is costing you a 250g block, and pricing the block instead of the 115g is how two recipes for the same dish end up three times apart. Larder does that arithmetic on the page, with no sign-up. A reader enters an ingredient, the quantity the recipe uses, the price of the pack it came from and the size of that pack, and gets the cost of what was actually used. Rows can be added and removed, so a reader can price their own variation rather than only the one you wrote. The banana bread that ships with it returns a total of 2.85 and a cost per serving of 0.36 at eight servings; enter a sale price of 2.50 a slice and a margin row appears at 2.14, which is 85.8%.

The ingredient data is CMS content, not code. Each recipe carries an Ingredient Costs field written as Name; Quantity; Unit; Pack Price; Pack Size, one line per ingredient, so adding a recipe prices itself.

Eight pages: home, the recipes archive, a CMS recipe detail template, about, contact, privacy, terms and a custom 404, laid out for desktop, tablet and phone with a drawer navigation carrying the course list. One Recipes collection with 17 fields holds twelve recipes across four courses and two articles, switched by a Post Type field that hides the calculator on an essay. Course chips on the archive filter the grid live and have a real empty state.

Bodoni Moda over IBM Plex Sans across fifteen text presets, each with desktop, tablet and phone sizes, tuned for sustained reading rather than brochure copy. Every colour comes from one of eight tokens, so rebranding is a colour change rather than a rebuild.

Recipes, contributors and photography are demonstration content and the prices are invented plausible figures, not a price survey. A six-page setup guide ships with the purchase.