Amply Dev Library

Explore

Project Setup Checklist
Project Setup Checklist

A walk through video will come soon - but for now please follow these steps:

Clone the client first style guide -

⁠

https://webflow.com/made-in-webflow/website/client-first-cloneable?ref=made-in-webflow-search&searchValue=finsweet⁠

⁠

Import Fonts - Don’t use Google Font API (doesn’t meet GDPR requirements)

Apply styles to global classes first -

⁠

⁠

Apply styles manually to heading-style-h classes so that you can have an h1 with the h2 styling.

⁠

Setup Fluid Responsive Typography using finsweet extension

⁠

⁠

Double check all fonts on all breakpoints

Decide whether to use spacing wrappers or spacing blacks throughout the project

we typically prefer spacing blocks

Decide whether you will use .spacer-medium or .padding-bottom .padding-vertical throughout the project

we typically prefer .spacer classes since it’s simpler.

Update the rest of the finsweet elements to match the style guide for the site in Figma

Add new components that will be resused throughout the site

Navbar

Footer

Additional Button classes

Cards

Decorative Elements

Set the language code on the project settings to “en”

Add Favicon and Webclip image

Add Open Graph image to home page now if it is available.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.