Folio
An editorial restaurant site.
Folio is a website for a small restaurant that writes a new menu every day, set like a quiet print magazine: a centred, letter-spaced wordmark with a dateline under it, one full-bleed film, a large standfirst with small photographs set between the words, the menu as a contents page, a journal with a drop cap and a pull quote, and a booking form designed as a printed reservation card. Cream paper, warm ink and one sorrel green; Young Serif for headlines, Albert Sans for text. The sample restaurant, Sorrel, and its dishes, suppliers, prices and hours are invented sample content.
- For
- Restaurant
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
Tonight's menu as a contents page that holds still while you scroll: each course steps in and its photograph is wiped up like a turned page while the caption changes.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): bar and dateline; a full-bleed hero film (the stock pot, muted, looping, with a pause control and a strip with both sittings); the standfirst with inline photos; tonight's menu as a contents page that holds still while each course takes its turn (photo, supplier, note, "Course 4 of 6"); the journal (a lead story with a drop cap, a side story, a text-only pull quote); the reservation card (date, sittings with a fully-booked one, a guest stepper, name, email, allergies; errors for past dates, Mondays, missing fields; a "held" state with a stamp); visit with today's hours marked; a footer with the wordmark. - Menu (
menu.html): every course with supplier, note and photo; filters for vegetarian and no gluten (with an empty state); a wine-pairing switch that adds the wines and updates the total. - 404 (
404.html). - Light and dark themes (dark is the dining room after service), phone to desktop.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Menu
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
