While it is incredibly useful to use a blueprint site as a starting point for all new website development projects, it also makes it easy to forget what our default site settings are. This article is part checklist, part reminder what default settings I use for reference when create a new blueprint site.

Body width

Since there are a wide variety of monitor sizes, it is often useful to set a maximum width for the body tag, to keep the site width constrained on large monitors. Since we’re using AutomaticCSS (ACSS), all we have to do is go to Layout > Boxed Layout and toggle on the “Boxed Layout” feature. For most sites the default width of 1920px and default background color of var(–white) are exactly what we need, but those (and other) settings can be adjusted as-needed.

Content width

Within the body, we typically want to further constrain the width of the content, so that the width of each section reaches the full body width, but the content within that section uses a more limited width. When using Bricks and ACSS, this is a two-part process:

1. Set the content width in ACSS. In ACSS, we go to Layout > Website Dimensions and set the “Content Width” setting for both desktop and mobile. ACSS will smoothly transition the content width between those two settings based on the screen size being used.
2. Reference the content width in Bricks. Now in the Bricks settings we need to implement the –content-width variable that  ACSS provides. First, inside the Bricks editor we go to Settings > Theme Styles and choose a theme style (if none have been set up yet, we create a new style, name it “Defaults”, and set the “Conditions” to “Entire Website”). Next, we scroll down to the Element Container section and set the “Width” to var(–content-width). This ensures that Bricks will default to the content width set by ACSS.