Skip to content
Get lifetime access
Docs menu

Use a kit.

A kit is a whole site: pages, header, footer, components, forms and the settings that make them match.

What is in the zip

  • README.md: the steps for that kit, in order. Start there.
  • acss-settings.json: the kit's palette, type scale, spacing and button settings.
  • look.css: the kit's design as one stylesheet, for Etch Studio or a site without the panel.
  • global.css: the kit's root tokens, keyframes and the light and dark rules; add it as a stylesheet beside look.css.
  • schema.json: the content types, their fields and loops, and the demo entries.
  • components: the header, the footer and every repeated part, as Etch components.
  • pages: each page as numbered sections, to paste in order.
  • templates: single, archive and 404 templates where the kit has them.
  • forms: the form markup, for the free SureForms plugin.
  • fonts: the font files, with their open licences.
  • studio: the same kit converted for Etch Studio (every kit but the SureCart shop).

Working in Etch on WordPress? The EtchPress panel builds the whole site in one click: in its Kits place, press Build this site on the kit's card, then Build the site (on a site that already has pages: Add the kit to this site, or Start over with the kit for the demo alone). The design system, the content types and their demo entries, the forms, the header, the footer, every template and every page arrive the way the demo has them, with placeholders where the photos are (The panel in Etch). The steps below are the by-hand route, and what Etch Studio uses.

Build it

  1. Download the kit from your accountDownloads lists every kit with its current version.
  2. Import the ACSS settingsACSS dashboard, Settings, Import: choose acss-settings.json, then regenerate the CSS. Change the brand colour afterwards if you like; every page follows.
  3. Add the fontsUpload the font files where the README says, or choose your own fonts in ACSS.
  4. Add the two stylesheetsIn Etch, Stylesheets: one from look.css and one from global.css. The second carries the light and dark switch; without it the header's switch does nothing.
  5. Create the content types and the demo entriesIf the kit has services, reviews, team members or similar, its README lists the post types, fields and loops to create in Etch, with the exact keys. Its schema.json holds the demo entries too, so the lists fill the way they do on the demo.
  6. Paste the components, then the pagesOpen a page in Etch, copy the JSON from a file and paste it onto the canvas. Paste the header and footer once, into the index template.
  7. Paste the templates and build the formsTemplates go into Etch templates with the slugs the README names. Forms paste into SureForms.
  8. Replace the placeholder contentText, images, phone number, company name. Things that repeat are component props, so you change them once.

The eleven kits

  • Studio: 10 pages, an agency site in light and dark built from six showpieces: a liquid hero, a work list that previews on hover, a pan gallery, a drawn process timeline, a client wall and a magnetic button.
  • Portfolio: 7 pages, one person's work as objects on paper, in light and dark: an image trail, a card deck, a fan, a lens on each piece and a ledger of clients.
  • Launch: 9 pages, a software product's site in light and dark: a product shot that grows into the headline, a feature dock and bento, a steps scene, ring-card pricing, a changelog as posts and a waitlist.
  • Restaurant: 6 pages, a menu edited in WordPress and shown in tabs, a pan scene from the kitchen, opening hours and a table request, built with library items, in light and dark.
  • Consultant: 8 pages, a headline whose last word changes, stacking service cards, result widgets and case studies, built with library items, in light and dark.
  • Cleaning: 8 pages, plan cards, a checklist and a how-it-works scroll scene, built with library items, in light and dark.
  • Landscaping: 7 pages, a gallery and a quote request, in light and dark.
  • Home Services: 8 pages, an emergency band, service areas and a booking form, in light and dark.
  • Law Firm: 10 pages, a practice index, a results ledger and attorneys, in light and dark.
  • Clinic: 11 pages, a visit finder with filters, doctors and locations, in light and dark.
  • SureCart shop: shop, product and collection pages for a SureCart store.

See the kits and their live demos

Client sites

Use a kit on as many sites as you like, your own and your clients'. You cannot resell or redistribute the kit itself.

Read the licence