Step 19 - Configure Bricks, ACSS and Frames

I was going to outline the process of setting these three products up but that seemed pointless as it is already covered by the authors of these products. If you have bought Bricks, Frames and Automatic CSS, then you too will have access to all the training videos.

What I'll do here is list the videos you need to watch to save you looking for them.

If you've followed the instructions here so far, then next thing to do is watch the following videos and do as they say.

• Add Google fonts you want to use. See how in this video.
• How to Add Adobe Fonts To Bricks - don't forget to synch fonts.
• Set up Bricks and ACSS - I have started this video at the relevant spot to my set up methods. But by all means watch the whole thing if you wish.

However, these are the summary steps that are followed in the videos above

1. Upload all the Google fonts you want to use, as custom fonts. This is because you will later (if you have not done it already) disable all Google fonts to prevent them all loading. Watch the first video for help with this.
2. If you want to use Adobe fonts, watch the second video which shows how these are added to Bricks.
3. Watch the third video to set up Bricks, Frames and ACSS.
4. Note that when in the video above, Kevin gets to Bricks typography within Bricks Theme styles - you ARE supposed to select fonts there - don't style them - only select the fonts for headings, text, buttons etc. You can always come back and do these if you miss any.
5. When he talks about the option to Disable class chaining, as long as you on ACSS V2.5 or above (beta or otherwise), this needs now to be on.
6. Activate the Automatic CSS Plugin
7. Enter the ACSS license key
8. Activate the Frames plugin
9. Enter Frames license key
10. Set up the remote templates URL and password (Frames license key) in Bricks templates settings.
11. Set up Automatic CSS to load frames styling
12. Set up wire-framing colour palette in Automatic CSS (basically black)
    Set action, primary, base and shade colours all to #000000
    Turn off secondary and accent colours.
13. Disable Google Fonts in Bricks -> Settings -> Performance.
14. Add some variable Google fonts to use on the site (lighter weight than adding all font variations)
    or if you want to use Adobe Fonts view the Adobe Fonts link above.
15. Create a Header Template in Bricks, and edit it with Bricks
16. Access the templates folder in Bricks at the top right and click on remote templates
17. Select a header template, and say yes to importing a theme style
18. Repeat steps 8 to 10 to create a footer template.
19. Go to pages and edit Home with Bricks