2026 - Public Theme Guide

A Clean, Scalable Layout System


<main>
  <section class="section">
    <div class="container">
      <div class="content">
        Text content
      </div>
    </div>
  </section>
</main>

1. Section (background + vertical spacing)

Sections are always full width. They control background color/images and vertical spacing.

CSS:


.section {
  padding-block: clamp(3rem, 6vw, 6rem);
}

Example variants:


.section
.section--light
.section--dark
.section--image
.section--flush

Example:


.section--dark {
  background: #111;
  color: white;
}

.section--image {
  background-size: cover;
  background-position: center;
}

Important:
Sections should NOT control max-width.

2. Container (layout width)

The container keeps content centered and padded.

CSS:


.container {
  max-width: 80rem; /* 1280px */
  margin-inline: auto;
  padding-inline: 1.5rem;
}

You can also make variants:


.container--wide {
  max-width: 96rem;
}

.container--narrow {
  max-width: 60rem;
}

This handles 95% of layout cases.

3. Content (readability width)

For long text, limit line length.

700px is excellent.

CSS:


.content {
  max-width: 44rem; /* ~704px */
}

Use this for:

Example:


<section>
  <div class="container">
    <div class="content">
      <p>Readable text...</p>
    </div>
  </div>
</section>

Handling "Fluid" Components

This is where most systems break.

You want:

Example:


<section class="section section--dark">
  <div class="container">
    content
  </div>
</section>

Background = full width
Content = container width

This solves 90% of design needs.

Full-Width Components (rare)

Sometimes you want something like:

Just skip the container:


<section class="section">
  <div class="hero-image"></div>
</section>

or


<section class="section">
  <div class="container">
    text
  </div>

  <img class="full-bleed">
</section>

A Trick for Full Bleed Inside Containers

Useful for sliders or images


.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

Now it breaks out of the container cleanly.

Padding System (important)

Use consistent horizontal padding everywhere.

Example:


--page-padding: 1.5rem;


.container {
  padding-inline: var(--page-padding);
}

Now everything aligns

My recommended values


Page max width:     80rem (1280px)
Readable text:      44rem (704px)
Page padding:       1.5rem
Section spacing:    4–6rem

These are very safe defaults.

A Modern Improvement (Optional)

You can actually simplify containers with one CSS rule:


.container {
  width: min(80rem, 100% - 3rem);
  margin-inline: auto;
}

Benefits:

Common Mistakes to Avoid

#1. Multiple max-width layers

Bad:


.section
.container
.card
.content

all with max-width.

Only container OR content should have max-width.

2. Random horizontal padding everywhere

Put horizontal padding only on container.

3. Sections centering content

Avoid:


.section {
  max-width
  margin:auto
}

Sections should always stay fluid.

Example Real Page


<main>

  <section class="section section--hero">
    <div class="container">
      <h1>Hero Title</h1>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <div class="content">
        <p>Long readable text</p>
      </div>
    </div>
  </section>

  <section class="section section--dark">
    <div class="container">
      <div class="card-grid">
        cards
      </div>
    </div>
  </section>

</main>

Super predictable.

Bonus: A Pattern Many Modern Systems Use

A lot of modern systems use *three layout utilities:


.wrapper  (full width section)
.container (max width)
.prose (readable text width)

Same concept, just naming.

https://striveptwellness.com/