The way we design websites is about to radically change. New Frontier is a Source Project which introduces some of the powerful tools we now have at our disposal, particularly Grid, Variable Fonts and CSS Custom Properties (variables). In fact, it’s built entirely in grids, with a logical nested and colour-coded structure which shows a completey new and different way of working in Rapidweaver. It looks nothing like a stacks project! Indeed, it mostly uses just three stacks: Grid Plus Pro, Source Image Fit and Source Markdown. But it shows how much can be done with just these. Extensively documented and explained with ‘developer notes’ and commented CSS, it grew out of my own explorations and was created to be pulled apart and played with. Perfect for some fun discovery over the Winter holiday! Take a look at the published pages by clicking below.

Inspired by current magazine sites, New Frontier consists of a card-based homepage showing a variety of different approaches with a linked blog through a carousel Splider whose pages launch Poster 2 article pages designed for comfortable readability (just click on the Splider slides). There is another linked Splider with a slide-over effect. The four column grid drops to three for ‘phablet’ and two for mobile, showing how responsive Grid is. And there are some useful little techniques included: a full page menu using BWD‘s brilliant PopDrop, elegant interactive PopDrop footnotes set up and ready to use, image replacement on hover and much else. And it uses Huerta Tipográfica’s lovely 2-axis variable Piazzolla font, which has the full range of OpenType features (and which has a lovely microsite at piazzolla.huertatipografica.com).

New Frontier is aimed at ‘intermediate’ Rapidweaver users. It requires Rapidweaver 8 and Stacks 4, as well as the Source Base and Addon stacks, Splider and Animate from Shaking the Habitual. It also uses Poster 2 from Instacks and PopDrop from Big White Duck. The Piazzolla fonts and all image are included with the project. You will need to upload the fonts to your server and enter the URLs in Rapidweaver’s Code area (the CSS is annotated).