Step 19 – Configure Bricks, ACSS and Frames

I was going to outline the process of setting up Bricks, ACSS and Frames but that seemed pointless as it is already covered by the developers 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.

Fonts

As we all know, Google Fonts are free. You add them to Bricks via a rather tedious process of having to download font files and them upload them using Bricks, to your site. If you use Adobe Fonts, these are much easier to add to Bricks.

You organise the Adobe fonts you want to use into Web Projects, and then all you have to do is specify the Web Project Id to Bricks. Easy! The downside is that if you stop paying for Creative Cloud, the fonts, they will go missing from your website. Probably best to stick to Google …

• Video 1 : Adding Google fonts is dealt with in this video.
• Video 2 : Find out how to add Adobe Fonts to Bricks – and if you do this, don’t forget to synch fonts.

Setting Up Bricks And ACSS

• Video 3 : Watch Set up Bricks and ACSS. Note, I have started this video at the spot relevant to my set-up methods. But by all means watch the whole thing if you wish.

Summary

Here’s a list of the key points covered in the above links.

Install Google Fonts

Upload all the Google fonts you want to use on your site, as custom fonts. This is necessary because you will later blanket disallow all remotely hosted Google fonts to prevent them loading en masse from the web and slowing your site down. Watch the first video for help with this. Google offers several different font file types. The ones you download should be of type WOFF2.

You can also use other fonts you’ve obtained from elsewhere, such as Adobe fonts. I am avoiding Adobe fonts as should I ever stop paying for Creative Cloud, then the fonts will no longer be available to the site.

I try to only use variable fonts. This does restrict my font choices somewhat but prevents you having to download loads of separate font files. The fonts I have chosen for my next project are as follows; I always choose five fonts. They were all available to download as TTF files from the Google Fonts website. But as the TTF files are not compressed, I compressed them all to WOFF files at Cloud Convert. These are the file size results.

Bricks Settings

Now watch Kevin’s set-up video and follow those instructions. – I have started it at the relevant point where Kevin starts talking about Bricks Settings.

• If you are using Frames, you will need your Frames license key for this step.
• When he talks about the option to Disable class chaining, as long as you on ACSS V2.5 or above this setting must now be set on.

ACSS Settings

Now watch the video from this starting point. This is where Kevin starts talking about ACSS Setup.

Bricks Builder Settings

Now watch the video from this starting point. This is where Kevin starts talking about Bricks Builder Setup.

You need to edit a page first before you can access the Bricks Builder settings. If you have followed the set up instructions on this site starting here, you will have a placeholder home page amongst others.

You will allocate fonts within Bricks Builder Settings; you should see the fonts you custom added earlier in the drop-down there. Note, you do not specify any styles for those fonts within Bricks. This is handled by ACSS.

Plugin Setup

Kevin uses an SEO plugin called RankMath. I prefer to use the free SEO Framework as I think the RankMath plugin is trying too hard. I do use PerfMatters which is an excellent plugin and agree with most of Kevin’s chosen settings shown in the video for that plugin.