Issue
An editorial fashion site.
Issue is a website for a fashion label, set as a magazine issue, in the Editorial style: bone paper, ink black, warm grey and one lacquer red taken from the photographs, kept for the issue number, the look numbers, the drop cap, the thread and the sold-out marks. A high-contrast Didone (Bodoni Moda, roman and italic) does the shouting; a quiet sans (Rethink Sans) sets everything else, with hairline rules and a caption under every picture. The sample label, Oriel in Antwerp, its pieces, mills, prices and dates are invented sample content. Photographs are cropped at the collar so no face shows.
- For
- Fashion brand
- 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
A pinned lookbook: as you scroll, each look's photograph lays down over the last like a turned page while the one beneath settles back, the giant red look number rolls to the next digit and the details change; above it a Didone masthead runs edge to edge and rises letter by letter, and a lacquer red thread stitches itself across the cloth swatches.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a cover with the masthead set edge to edge, the issue line, the collection title and five cover lines with page numbers that jump to their sections, beside the cover photograph; a pinned lookbook of six looks; the editor's letter with a pull quote and a red drop cap; three cloths with a red thread stitched across them; eight pieces as a ruled list with filters, sizes, few-left and sold-out states, a waiting list and a size guide in centimetres or inches; a fittings form (piece, size, day, time) with error, sending and booked states; footer with stockists and a newsletter field with states. - Look (
look.html?l=02): one look as a product page: main photograph, a cloth detail and the next look, number, name, price and stock, notes, cloth and mill, size choice, "Book a fitting" (opens the home form with the piece chosen) and "Keep for my fitting" (remembered in the browser), previous and next looks, and a not-in-this-issue state for an unknown number. - 404 (
404.html): "This page was torn out before print", with a 0 that keeps slipping. - Light and night edition (dark) themes: follows the system, with a toggle that remembers the choice. Phone to desktop.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Look
- 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.
