Canvas layouts

Provides 5 layout components to build interesting and flexible pages using the Canvas page builder.

The handful of flexible blocks like Row and Grid enable non-technical site-builders to construct any kind of landing page.

Each component is built as a single-directory-component (SDC) using primarily HTML and CSS, without unnecessary JavaScript, and no bloated user interface.

Features

The components are:

• Columns: A row of columns; collapses into multiple rows on small devices.
• Row: A horizontal row of blocks; collapses into multiple rows on small devices. Each block can be a different size.
• Grid: A grid of equally-sized cells; can be used to create a row of equally-sized columns.
• Container: A simple wrapper that can contain one or more other blocks, with a title, classes, etc.
• Sized container: A more powerful wrapper that enables you to choose the size and constraints of the block; typically used within a Row.

Goals

• Lightweight: Built with as little code as possible, for performance and security.
• Flexible: Works well with any theme and all modules, now and in the future.
• Responsive: Adapts to any device and screen (from huge to tiny), and in all environments.
• Accessible: Built with standards-compliant HTML that works well for people with any abilities or disabilites.
• Human-made: Built and tested entirely by passionate web developers; no AI used.

Post-Installation

1. Go to the Canvas editor (/canvas/editor/) and create or edit a page
2. Open the Library (+) in the left sidebar, find the Layout group, and choose a component
3. Drag the component onto the page, and edit its settings in the right sidebar
4. Drag other components from Library into the component

Additional Requirements

This module requires Canvas to be installed.

Supporting this Module

If you spot any issues with the components, please submit a bug report to let us know.

If there are any other layout components you'd like added to this module, also let us know.