Layout - thinking in rows
- Marta Siewierska-Stańczak
TABLE OF CONTENTS
Components in rows
MageSuite CMS components are consistently arranged in full rows, occupying the entire available space, be it the content width or the browser width (depending on designs, components admin settings, and configurations in the code). Placing multiple components side by side in a single row is not feasible. This design concept was adopted to ensure a unified look and behavior for specific device breakpoints, which include:
phone: 23.13em, // 370px
phoneLg: 30em, // 480px
tablet: 48em, // 768px
laptop: 64em, // 1024px
laptopLg: 80em, // 1280px
desktop: 90em, // 1440px
tv: 120em,
By adhering to this concept of organizing MageSuite CMS components in full rows, it is possible to avoid the extensive complexity of components' look and behavior in multiple combinations of external (device) and internal breakpoints. This approach greatly reduces the time required for developers and testers to deliver CMS components for a child project. By focusing on a standardized structure, the development process becomes more efficient and streamlined, leading to quicker and more consistent results.
Content in columns
The concept of organizing components into full rows does not mean that it is not possible to display content in columns. Many components allow to have internal space to be divided into columns.
Image teaser
With image teaser, an editor can display 1, 2 3, or 4 images per row. Every teaser can be: an image, an image with text, or only text which can consist of a slogan, description, and CTA button).
More info: Teaser and Text
Teaser and text
Teaser and text is a component that under the hood is an image teaser with a specific configuration. As it was noticed that the frequent design choice is to place an image next to a text (2 columns layout) this component allows us to achieve this goal.
More info: Image teasers
Mosiac
If you need to place some content (image + image, image + text, image + image) in 2 asymmetrical columns use Mosaic.
More info: Mosaic
Paragraph
Texts in paragraph components can be divided into: one column / 2 columns / 3 columns / 4 columns.
More info: Paragraph
Products grid
With the product grid, it is possible to place an image next to 1 or more product tiles.
More info: Products grid
Check examples of components with internal columns: https://demo.magesuite.io/thinking-in-rows