Matrix Page-level wrapper where blocks and contexts interact

Matrix Fundamentals

Copy link to this section

matrix represents the overarching structure or layout for a web page. It serves as a simulation framework that defines the foundational environment for different contexts and blocks.

Understanding the Matrix

Copy link to this section

Conceptual Framework

Copy link to this section

Matrix in Blocktail acknowledges and embraces the constraints of predefined templates, especially in CMS environments. It treats the overall structure of a page as a simulation, providing a consistent framework for layout and styling across different sections.

Syntax

Copy link to this section

A Matrix is typically implemented on the <body> tag or a high-level container:

<body class="matrix[main_template]">
  <!-- Page content -->
</body>

Matrix in CMS Environments

Copy link to this section

Embracing Constraints

Copy link to this section

The Matrix concept introduces a discipline of working within the constraints of our development environment, particularly in Content Management Systems (CMS) like WordPress, Craft CMS, and Drupal.

CMS Template Awareness

Copy link to this section

Blocktail's Matrix encourages developers to recognize and embrace the unique characteristics of CMS templates they are working with:

Template-Specific Matrices

<body class="matrix[single_product]">
    <!-- Content for a single product page -->
</body>

Reusable Matrices

<body class="matrix[product]">
    <!-- Content that can be used across different product-related templates -->
</body>

Server-Side Integration

Copy link to this section

The Matrix acknowledges server-side limitations and CMS-specific outputs:

<body class="matrix[single_product] <?php echo get_body_class(); ?>">
  <!-- Content adapting to both Blocktail and CMS-generated classes -->
</body>

Matrix-Driven Development Benefits

Copy link to this section
  1. Consistency Across Templates: Ensures consistent layouts and styling, reducing redundant CSS declarations.
  2. Improved Maintainability: Centralizes layout and styling logic, reducing code duplication.
  3. Enhanced Flexibility: Allows for adaptable designs across various CMS templates.
  4. Clearer Structure: Provides a clear, top-level organization for page layouts.

Matrix as a Simulation Framework

Copy link to this section

The Matrix in Blocktail acts as a simulation that hosts multiple timelines or alternate realities.

Principles

Copy link to this section
  • Coexistence of Contexts: Different contexts can exist simultaneously within the Matrix.
  • Adaptive Blocks: Blocks can adapt their appearance and behavior based on the context provided by the Matrix.

Example

<body class="matrix[single_post]">
  <header class="site_header">
    <!-- Header content -->
  </header>
  
  <main class="content_area">
    <article class="post context[full_article]">
      <h1 class="-title">Post Title</h1>
      <div class="-content">
        <!-- Post content -->
      </div>
    </article>
    
    <aside class="sidebar context[related_articles]">
      <!-- Sidebar content -->
    </aside>
  </main>
  
  <footer class="site_footer">
    <!-- Footer content -->
  </footer>
</body>

In this example, the matrix[single_post] provides a consistent structure for a WordPress theme, allowing different contexts to coexist and adapt within the same page. The use of blocks (like post and sidebar) and tails (like -title and -content) demonstrates how these concepts work together within the Matrix.

Interaction with Other Blocktail Concepts

Copy link to this section
  • Contexts: The Matrix hosts multiple contexts, allowing for dynamic, context-aware rendering of components.
  • Blocks: Within the Matrix, blocks serve as the primary building units, adapting to different contexts.
  • Tails: Tails (denoted by -) provide structure within blocks, maintaining consistency across different matrices.
  • Mutations: While not shown in the example, mutations (denoted by --) can be applied to blocks within any matrix to create variants.

The Matrix concept in Blocktail offers a practical approach to managing constraints in web development. By treating the page structure as a simulation framework, it allows for consistent, maintainable, and flexible designs that can adapt to various templates and server-side restrictions while seamlessly integrating with other Blocktail concepts.