Reference Guide

Context Local Context Layer (context--)

context is a fundamental concept in Blocktail that provides stable realities or themes for our blocks. Rooted in psychological principles, context offers a powerful way to create adaptive, maintainable, and intuitive page structures.

Definition

Copy link to this section

In Blocktail, a context represents a specific thematic or behavioral setting that influences multiple blocks or entire sections of a page. It provides a stable environment that defines how blocks should appear and behave under certain conditions.

The Chameleon Effect

Copy link to this section

A context concept allows us to think differently about component adaptation:

  • Imagine an ecosystem that can shift its entire mood without changing the core nature of its inhabitants
  • The ecosystem (context) determines the overall appearance and behavior of its components
  • Individual components can still have their unique traits (via mutations) while responding to the broader context

This approach creates flexible and maintainable page structures that can adapt to different scenarios without cluttering individual components.

Psychological Framework

Copy link to this section

The concept of Context in Blocktail is deeply rooted in principles of human cognition and communication:

  • Enhanced Understanding: Context provides the necessary background for blocks to "understand" their role and appearance within a broader environment
  • Cognitive Efficiency: Context reduces the cognitive load for developers by providing a clear framework for component behavior across multiple instances
  • Adaptive Behavior: Context allows blocks to adapt to their environment, mirroring how humans adjust their behavior based on social and environmental cues

Implementation Guide

Copy link to this section

Global Context Application

Copy link to this section
<body class="matrix--main">
	<main class="context--admin context--dark_mode">
	  <!-- Entire page content influenced by admin and dark mode contexts -->
	</main>
</body>

Localized Context Usage

Copy link to this section
<main class="context--sales_event">
  <article class="product_card">
    <!-- Product card influenced by the sales event context -->
  </article>
  <article class="product_card --featured">
    <!-- Featured product card with mutation, also influenced by context -->
  </article>
</main>

Nested Contexts

Copy link to this section
<div class="context--product_catalog">
  <div class="context--featured_items">
    <article class="product_card">
      <!-- Block adapts to both contexts -->
    </article>
  </div>
</div>

Context Capabilities

Copy link to this section

1. Adaptive Styling and Behavior

Copy link to this section
<section class="context--premium">
  <!-- All blocks within adapt to premium styling -->
  <article class="product_card">
    <!-- Premium-styled product card -->
  </article>
</section>

2. Reduced CSS Redundancy

Copy link to this section
.context--premium .product_card {
  /* Premium styling applied to all product cards in this context */
}

3. Enhanced Semantic Clarity

Copy link to this section
<main class="context--catalog">
  <!-- Clear indication this is a catalog section -->
</main>

Pattern Validation

Copy link to this section

Valid Patterns

Copy link to this section
✓ class="context--featured"            <!-- Single context -->
✓ class="context--premium_catalog"     <!-- Compound name -->
✓ class="context--dark context--admin" <!-- Multiple contexts -->

Invalid Patterns

Copy link to this section
✗ class="context-featured"             <!-- Single dash -->
✗ class="featured--context"            <!-- Wrong prefix position -->
✗ class="context--premium-items"       <!-- Using hyphen instead of underscore -->

Development Workflow Benefits

Copy link to this section
  • Natural Mental Model: Context aligns with how developers naturally think about broad thematic changes
  • Reduced Complexity: Centralizing contextual information reduces the complexity of managing multiple components
  • Improved Problem-Solving: Context provides a framework for approaching design and functionality challenges
  • Enhanced Collaboration: Clear contexts facilitate better communication among design and development teams

Key Takeaways

Copy link to this section
  • Contexts provide us with stable environments for blocks
  • Use context-- prefix for clear identification
  • Combine them with mutations for granular control
  • Always think in terms of thematic groupings
Code licensed MIT, docs CC BY 4.0.