Raster
A Swiss museum site.
Raster is a website for a museum or exhibition space, in the Swiss Design style: paper white, ink black, warm grey and one signal green kept for the open-now block, the active room on the plan, one full stop and the membership band. A bold neo-grotesk (Schibsted Grotesk) at poster sizes, a legible mono (Atkinson Hyperlegible Mono) for every label, room and accession number, a strict 12-column grid held asymmetric, black rules and no radius. The sample museum, Formhaus in Biel, its exhibitions, objects, prices and dates are invented sample content.
- For
- Museum
- 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 floor plan: as you scroll, the visitor route draws itself through five rooms, each room fills signal green while you are in it and greys once passed, and the room list and minutes counter follow; above it the year 1957 rises digit by digit and parts at four speeds as you leave.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a fact column (live open/closed status from the visitor's clock, address, admission, building) beside the giant year "1957." and the exhibition title, dates and intro, with a tall photograph and caption; a floor plan of five rooms with a room list; exhibitions as a typographic table with All / Now / Next / Past tabs and an empty state; five collection objects on an asymmetric grid, each opening its record in a dialog; visit information (hours with today marked, admission, tours) beside a timed-ticket booking with days, full and past slots, steppers, total, validation and a held state; a green membership band with two tiers; footer with today's hours and a newsletter field with states. - Room guide (
exhibition.html): the exhibition header, a sticky room number that changes as you read, a progress bar, each room with its text and a photograph or collection object, tours, access and tickets. - 404 (
404.html): "This room is closed for rehanging", with the 0 of 404 falling out of its line. - Light and 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
- Room guide
- 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.
