The modular design method is a model for improving the production process for websites, emails, and landing pages. It uses components-based design and layout patterns that overlap structural coding practices. Its simple definitions allow it to be used across team roles as a way to help each person better describe and understand structure and essentially speak the same language throughout the design workflow.
The bottom level consists of content in its raw form, as text pieces and images. This helps separate content from design and aesthetics. It treats content as data and allows for dynamic content to be brought in using data sources.
Among content pieces are functional design elements: buttons, headlines, formatted lists, callouts, banners, etc. Standalone, reusable components that accompany content. They are the building blocks of your content and should work in a range of contexts. These components are often developed as part of a design system that documents guidelines for their proper usage.
The next level up are regions, which group content and components. They are essentially part of a column in a grid-based layout system. And they become functional as repeatable listings.
Above regions are sections which act as larger containers around regions. They are rows, stacked on top of each other, each consisting of their own columns and creating an overall layout.
Stacked sections are part of a frame that includes the header and footer areas.
The Blocks Edit is a CMS that uses a simple library of tags of classes or styles, and attributes, that you add to your HTML code to enable features in its visual editor. It follows the modular design method and compliments standard design systems. More info →