Amplify from Studio 24

Get started

A living guide

This is a living guide, running off your project Sass and JavaScript. It starts as the default, clean starter kit. It is not meant to be styled nicely.

As you write your project's Sass and JavaScript, this guide will pick up those changes.

You can delete this directory (/amplify) if you don't need to refer to these docs or don't want to include it in your finished project.

  1. Grab an up-to-date copy of Amplify from GitHub
  2. Copy the following items from Amplify into your project (probably into the theme directory, but it will depend on your project setup):
    • /assets-src directory
    • .nvmrc file - update to the current LTS version
    • package.json and package-lock.json files
    • svgo.config.js file
    • webpack.config.js file
  3. Check that the config from and to paths in package.json are correct for your project setup
  4. Check the context and output paths in webpack.config.js are correct for your project setup
  5. Optional: copy the /amplify directory into the webroot
  6. Follow the command line instructions to install project dependencies and check there are no errors when building the front-end assets
  7. Make sure the html element in your web page template has an appropriate lang attribute and the no-js class
  8. Make sure your web page template includes the following (which can be copied from any of the example pages in the /amplify directory):
    • link to the core stylesheet
    • link to the advanced stylesheet, including the media query to determine which browsers it will be served to
    • link to the print stylesheet
    • script for the Font Face Observer library in the head
    • another script in the head, which checks when the desired web font is loaded, adds the fonts-loaded class to html, adds the main JavaScript file to the head and switches the no-js class to js