Containers

Containers center and horizontally pad your content. VelinStyle provides a default responsive container plus fluid, narrow, and wide variants, along with container query support.

Default Container

The .velin-container class sets a responsive max-width at each breakpoint.

Breakpoint      .velin-container max-width
──────────────────────────────────────────
xs (<576px)     100%
sm (≥576px)     540px
md (≥768px)     720px
lg (≥992px)     960px
xl (≥1200px)    1140px
2xl (≥1400px)   1320px

<div class="velin-container">
  <!-- Responsive max-width at each breakpoint -->
</div>

.velin-container — resize the browser to see max-width change.

Fluid Container

Use .velin-container-fluid for a full-width container spanning the entire viewport.

<div class="velin-container-fluid">
  Full-width at every breakpoint.
</div>

.velin-container-fluid — always 100% wide.

Narrow Container

.velin-container-narrow constrains content to a readable width, ideal for long-form text and articles.

<div class="velin-container-narrow">
  <h2>Article Title</h2>
  <p>Narrow containers keep text at a comfortable reading width.</p>
</div>

.velin-container-narrow — max-width: 680px.

Wide Container

.velin-container-wide stretches wider than the default, useful for dashboards and data-heavy layouts.

<div class="velin-container-wide">
  Extra-wide container for expansive layouts.
</div>

.velin-container-wide — max-width: 1600px.

Responsive Containers

Responsive containers are 100% wide until the specified breakpoint, then apply a max-width at each tier above.

<div class="velin-container-sm">100% wide below sm, then capped</div>
<div class="velin-container-md">100% wide below md, then capped</div>
<div class="velin-container-lg">100% wide below lg, then capped</div>
<div class="velin-container-xl">100% wide below xl, then capped</div>
<div class="velin-container-2xl">100% wide below 2xl, then capped</div>

Container Queries

Add .velin-container-query to enable CSS Container Queries on any container. Children can then use @container rules to respond to the container's inline size rather than the viewport.

<div class="velin-container-query">
  <div class="card">
    This card responds to the container width, not the viewport.
  </div>
</div>

<style>
  .velin-container-query {
    container-type: inline-size;
  }
  @container (min-width: 400px) {
    .card { flex-direction: row; }
  }
</style>