Pattern Library by Cloudy knot

Frame 

<div class="frame-wrapper grid-area">
    <header class="header">header</header>
    <main class="main">
        main / メインコンテンツのラッパーフレーム/外装
        <article>
            article / 記事コンテナ
            <section>
                section / セクション1
                <h2>header / 記事タイトル</h2>
            </section>
            <section>
                section / セクション2
                <h2>header / 記事タイトル</h2>
            </section>
        </article>
    </main>
    <nav class="nav">nav</nav>
    <aside class="aside">aside</aside>
    <footer class="footer">footer</footer>
</div>
 
<div class="frame-wrapper grid-area">
  <header class="header">header</header>
  <main class="main">
    main / メインコンテンツのラッパーフレーム/外装
    <article>
      article / 記事コンテナ
      <section>
        section / セクション1
        <h2>header / 記事タイトル</h2>
      </section>
      <section>
        section / セクション2
        <h2>header / 記事タイトル</h2>
      </section>
    </article>
  </main>
  <nav class="nav">nav</nav>
  <aside class="aside">aside</aside>
  <footer class="footer">footer</footer>
</div>
 
/* No context defined. */
  • Content: 
    /* ※.main-wrapperはすべてのパターンの共通ラッパーとしても使用 */
.main-wrapper {
  margin-right: auto;
  margin-left: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media print, screen and (min-width:48em) {
  .main-wrapper {
    width: 90%;
    max-width: 64.0625em;
    min-width: 48rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .main-wrapper {
    width: 90vw;
  }
}
.frame-wrapper {
  max-width: 100rem;
  padding: 1rem;
}
@media print, screen and (min-width:48em) {
  .frame-wrapper {
    width: 100%;
  }
}
.frame-wrapper.grid-area {
  display: grid;
}
@media print, screen and (min-width:48em) {
  .frame-wrapper.grid-area {
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
    /* 1行目から順番の高さ */
    grid-template-rows: 5rem 1fr 5rem;
    /* 1列目から順番の幅 */
    grid-template-columns: 12rem 1fr 10rem;
  }
}
@media print, screen and (max-width:47.96875em) {
  .frame-wrapper.grid-area {
    grid-template-rows: 3rem 3rem 1fr 3rem 3rem;
    grid-gap: 1rem;
  }
}
.frame-wrapper.grid-area > * {
  padding: .5rem;
  border: 1px solid #333;
}
.frame-wrapper.grid-area > * article {
  width: calc(100% - 1rem);
  width: 95%;
  height: auto;
  margin: 1rem auto .5rem;
  padding-top: .5rem;
  padding-left: .5rem;
  border: 1px solid #333;
}
@media print, screen and (min-width:48em) {
  .frame-wrapper.grid-area > * article {
    max-width: 50rem;
  }
}
.frame-wrapper.grid-area > * article > section {
  width: 95%;
  height: 5rem;
  margin: 1rem auto;
  padding-top: .5rem;
  padding-left: .5rem;
  border: 1px solid #333;
}
.frame-wrapper.grid-area .header {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: auto;
  grid-column-end: 4;
}
.frame-wrapper.grid-area .main {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media print, screen and (min-width:64.0625em) {
  .frame-wrapper.grid-area .main {
    grid-row-start: 2;
    grid-column-start: 2;
    grid-row-end: auto;
    grid-column-end: auto;
  }
}
@media print, screen and (min-width:48em) and (max-width:64em) {
  .frame-wrapper.grid-area .main {
    grid-row-start: 2;
    grid-column-start: 2;
    grid-row-end: auto;
    grid-column-end: 4;
  }
}
@media print, screen and (max-width:47.96875em) {
  .frame-wrapper.grid-area .main {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-row-end: auto;
    grid-column-end: 4;
  }
}
.frame-wrapper.grid-area .nav {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: auto;
  grid-column-end: auto;
}
@media print, screen and (max-width:47.96875em) {
  .frame-wrapper.grid-area .nav {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: auto;
    grid-column-end: 4;
  }
}
@media print, screen and (min-width:64.0625em) {
  .frame-wrapper.grid-area .aside {
    grid-row-start: 2;
    grid-column-start: 3;
    grid-row-end: auto;
    grid-column-end: auto;
  }
}
@media print, screen and (min-width:48em) and (max-width:64em) {
  .frame-wrapper.grid-area .aside {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-row-end: auto;
    grid-column-end: 4;
  }
}
@media print, screen and (max-width:47.96875em) {
  .frame-wrapper.grid-area .aside {
    grid-row-start: 4;
    grid-column-start: 1;
    grid-row-end: auto;
    grid-column-end: 4;
  }
}
@media print, screen and (min-width:64.0625em) {
  .frame-wrapper.grid-area .footer {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-row-end: auto;
    grid-column-end: 4;
  }
}
@media print, screen and (min-width:48em) and (max-width:64em) {
  .frame-wrapper.grid-area .footer {
    grid-row-start: 4;
    grid-column-start: 1;
    grid-row-end: auto;
    grid-column-end: 4;
  }
}
@media print, screen and (max-width:47.96875em) {
  .frame-wrapper.grid-area .footer {
    grid-row-start: 5;
    grid-column-start: 1;
    grid-row-end: auto;
    grid-column-end: 4;
  }
}
  • URL: /components/raw/frame/style.css
  • Filesystem Path: src/components/6-layout/frame/style.css
  • Size: 3.9 KB

No notes defined.