Sircus

Base

  <div class="Container">...</div>

Modofier: Slim

<div class="Container Container--slim">...</div>

Install

npm install sircus-components-container

CSS import

@import "sircus-components-container";

CSS

:root {
  --Container-width-sm: 48rem;
  --Container-width-md: 60rem;
  --Container-width-lg: 70rem;
}

/*　sircus-components-container
======================================== */
.Container {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}

@media (--viewport-sm) {
  .Container {
    max-width: var(--Container-width-sm);
  }
}

@media (--viewport-md) {
  .Container {
    max-width: var(--Container-width-md);
  }
}

@media (--viewport-lg) {
  .Container {
    max-width: var(--Container-width-lg);
  }
}

.Container--slim {
  max-width: var(--Container-width-sm);
}