BRICKS Framework

V1.0

Website Structure

Core Structure Explained

page-wrapper

Element type: div block
Purpose: contains whole website content
Usability: is used for copying whole website content to another page
Styling: has no styling, except overflow: clip

When using horizontal scroll sections in projects, set page-wrapper overflow: none, instead of clip, to ensure horizontal scroll functionality. While using this method, set overflow:clip on separate section_page-name-identifier elements, when needed.

main-wrapper

Element type: div block
Purpose: nests all non-global/unique to the specific site sections
Usability: is used to apply semantic tag -> Main, for SEO and Screen Reader purposes
Styling: has no styling

section_page-name-identifier

Element type: custom DOM element
Purpose: clearly states a descriptive name for section, which helps with project overview
Usability: is used to apply semantic tag -> Section, for SEO and Screen Reader purposes, create advanced section components and to set Theme Mode via custom attributes -> data-theme: light/dark or custom colour combination
Styling: position:relative is set via global-styles_page-settings code embed

Theme Modes are set via global-styles_theme-color code embed and controlled via Webflow Variable System.

container-identifier (small, medium, large, fullwidth)

Element type: div block
Purpose: is used to set right+left+top+bottom padding via custom attributes
Usability: set values for data-padding-top and data-padding-bottom, choose between “none”, “small”, “medium” and “large”, set wished values within Webflow Variable System
Styling: each container size has corresponding max widths connected via Webflow’s Variable System (max-width=container-size within Variable Setup)

Always manipulate values for container padding via Webflow Variable System to ensure global changes to all containers.