Templates

Page Header

/src/assets2/scss/codegrid-ui.scss
  • Template
  • CG2-pageHeaderPlacerを併用すると高さを確保することができる、高さ確保が不要ならCG2-pageHeaderPlacerを利用しない
  • 実際に利用するときには以下のコードからstyle="position:relative;"取り除いて使う

WWW用

<div class="CG2-pageHeaderPlacer">
  <header class="CG2-pageHeader" style="position:relative;">
    <div class="CG2-pageHeader__inner">
      <div class="CG2-pageHeader__logo">
        <a href="#"><img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24"></a>
      </div>
      <div class="CG2-pageHeader__nav">
        <ul>
          <li><a href="#">料金</a></li>
          <li><a href="#">団体購読</a></li>
          <li><a href="#">よくある質問</a></li>
          <li><a href="#">書籍</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__buttons">
        <ul>
          <li><a class="CG2-button CG2-button--primary CG2-button--thin" href="#">購読する</a></li>
          <li><a href="#">ログイン</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__opener" data-drawer-toggle></div>
    </div>
  </header>
</div>

APP用

<div class="CG2-pageHeaderPlacer">
  <header class="CG2-pageHeader" style="position:relative;">
    <div class="CG2-pageHeader__inner">
      <div class="CG2-pageHeader__logo">
        <a href="#"><img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24"></a>
      </div>
      <div class="CG2-pageHeader__appNav">
        <ul>
          <li><a href="#">最新記事一覧</a></li>
          <li><a href="#">お気に入り一覧</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__search">
        <div class="CG2-pageHeader__searchInner">
          <input>
        </div>
      </div>
      <div class="CG2-pageHeader__buttons">
        <ul>
          <li><a class="CG2-button CG2-button--primary CG2-button--thin" href="#">購読する</a></li>
          <li><a href="#">ログイン</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__opener" data-drawer-toggle></div>
    </div>
  </header>
</div>

APP用 ログイン後

<div class="CG2-pageHeaderPlacer">
  <header class="CG2-pageHeader" style="position:relative;">
    <div class="CG2-pageHeader__inner">
      <div class="CG2-pageHeader__logo">
        <img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24">
      </div>
      <div class="CG2-pageHeader__appNav">
        <ul>
          <li><a href="#">最新記事一覧</a></li>
          <li><a href="#">お気に入り一覧</a></li>
        </ul>
      </div>
      <div class="CG2-pageHeader__search">
        <div class="CG2-pageHeader__searchInner">
          <input>
        </div>
      </div>
      <div class="CG2-pageHeader__user">
        <div class="CG2-pageHeader__userHeader">
          <div class="CG2-pageHeader__userName">oyamada.akihiro@email.com</div>
          <div class="CG2-pageHeader__userAvatar">
            <img src="http://www.gravatar.com/avatar/3d8d92b9ff9e708e3e4c247d5ab787ba.png?s=112" alt="" width="56" height="56">
          </div>
          <div class="CG2-pageHeader__userOpener"></div>
        </div>
        <div class="CG2-pageHeader__userMenu">
          <div class="CG2-pageHeader__userMenuInner">
            <ul>
              <li><a class="CG2-button CG2-button--fullWidth CG2--alignCenter" href="#">設定</a></li>
              <li><a class="CG2-button CG2-button--fullWidth CG2--alignCenter" href="#">ログアウト</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

導線無し(フォーム途中など)

<div class="CG2-pageHeaderPlacer">
  <header class="CG2-pageHeader" style="position:relative;">
    <div class="CG2-pageHeader__inner">
      <div class="CG2-pageHeader__logo">
        <img src="../../../assets2/img/CG2-pageHeader/logo.svg" alt="CodeGrid" width="125" height="24">
      </div>
    </div>
  </header>
</div>
/src/assets2/scss/codegrid-ui.scss
  • Template
<footer class="CG2-pageFooter">
  <div class="CG2-pageFooter__inner">
    <div class="CG2-pageFooter__wwwNav">
      <div class="CG2-pageFooter__logo">
        <img src="http://img.pxgrid.net/128x32" alt="CodeGrid" width="128" height="32">
      </div>
      <ul>
        <li><a href="#">CodeGridについて</a></li>
        <li><a href="#">料金</a></li>
        <li><a href="#">団体購読</a></li>
        <li><a href="#">よくある質問</a></li>
        <li><a href="#">書籍</a></li>
        <li><a href="#">購読する</a></li>
      </ul>
    </div>
 
    <div class="CG2-pageFooter__appNav">
      <div class="CG2-pageFooter__appNavHeader">
        <div class="CG2-pageFooter__appNavHeading">
          <a href="#">アプリトップ</a>
        </div>
        <div class="CG2-pageFooter__appNavSearch">
          <div class="CG2-pageFooter__appNavSearchInner">
            <input>
          </div>
        </div>
      </div>
      <div class="CG2-pageFooter__appNavList">
        <ul>
          <li><a href="#">最新記事一覧</a></li>
          <li><a href="#">おすすめ記事一覧</a></li>
          <li><a href="#">お気に入り登録記事一覧</a></li>
          <li><a href="#">無料公開記事一覧</a></li>
          <li><a href="#">シリーズ一覧</a></li>
          <li><a href="#">著者一覧</a></li>
        </ul>
      </div>
      <div class="CG2-pageFooter__appNavCategory">
        <ul>
          <li><a href="#"><span class="CG2-icon-cat-elementary"></span>入門</a></li>
          <li><a href="#"><span class="CG2-icon-cat-practice"></span>実践</a></li>
          <li><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>
          <li><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>
          <li><a href="#"><span class="CG2-icon-cat-architecture"></span>設計</a></li>
          <li><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>
          <li><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>
          <li><a href="#"><span class="CG2-icon-cat-workstyle"></span>仕事術</a></li>
          <li><a href="#"><span class="CG2-icon-cat-survey"></span>アンケート</a></li>
          <li><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>
          <li><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>
          <li><a href="#"><span class="CG2-icon-cat-discussion"></span>ディカッション</a></li>
        </ul>
      </div>
    </div>
 
    <div class="CG2-pageFooter__legalNav">
      <ul>
        <li><a href="#">公式Twitter</a></li>
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">利用規約</a></li>
        <li><a href="#">プライバシーポリシー</a></li>
        <li><a href="#">特定商取引法に基づく表示</a></li>
      </ul>
      <div class="CG2-pageFooter__company"><a href="#">運営会社<img src="../../../assets2/img/CG2-pageFooter/pxg-logo.svg" alt="Pixel Grid" width="128" height="32"></a></div>
    </div>
  </div>
<!-- /.CG2-pageFooter --></footer>

導線無し(フォーム途中など)

<footer class="CG2-pageFooter CG2-pageFooter--simple">
  <div class="CG2-pageFooter__inner">
    <div class="CG2-pageFooter__legalNav">
      <div class="CG2-pageFooter__company">運営会社<img src="../../../assets2/img/CG2-pageFooter/pxg-logo.svg" alt="Pixel Grid" width="128" height="32"></div>
    </div>
  </div>
<!-- /.CG2-pageFooter --></footer>

Drawer

/src/assets2/scss/codegrid-ui.scss
  • Template
  • スモールスクリーン時のみ有効
  • CG2-pageHeader 内のトグルボタンで表示
<div class="CG2-drawer">
  <div class="CG2-drawer__panel">
    <div class="CG2-drawer__panelViewport">
      <div class="CG2-drawer__panelBody">
 
        <div class="CG2-drawerBody">
 
          <div class="CG2-drawerBody__user">
            <div class="CG2-drawerBody__userAvatar">
              <img src="http://www.gravatar.com/avatar/3d8d92b9ff9e708e3e4c247d5ab787ba.png?s=112" alt="" width="56" height="56">
            </div>
            <div class="CG2-drawerBody__userName">oyamada.akihiro@email.com</div>
          </div>
 
          <div class="CG2-drawerBody__nav">
            <ul>
              <li><a href="#">アプリトップ</a></li>
              <li><a href="#">最新記事一覧</a></li>
              <li><a href="#">おすすめ記事一覧</a></li>
              <li><a href="#">お気に入り登録記事一覧</a></li>
              <li><a href="#">無料記事一覧</a></li>
              <li><a href="#">シリーズ一覧</a></li>
              <li><a href="#">著者一覧</a></li>
            </ul>
          </div>
          <div class="CG2-drawerBody__userNav">
            <ul>
              <li><a class="CG2-button CG2-button--primary CG2-button--fullWidth" href="#">購読する</a></li>
              <li><a class="CG2-button CG2-button--fullWidth" href="#">ログイン</a></li>
            </ul>
          </div>
          <div class="CG2-drawerBody__separator"></div>
          <div class="CG2-drawerBody__search">
            <div class="CG2-drawerBody__searchInner">
              <input>
            </div>
          </div>
          <div class="CG2-drawerBody__nav">
            <ul>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-elementary"></span>入門</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-practice"></span>実践</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-architecture"></span>設計</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-workstyle"></span>仕事術</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-survey"></span>アンケート</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-cat-discussion"></span>ディカッション</a></li>
            </ul>
          </div>
          <div class="CG2-drawerBody__separator"></div>
          <div class="CG2-drawerBody__nav">
            <ul>
              <li><a href="#">CodeGridについて</a></li>
              <li><a href="#">料金</a></li>
              <li><a href="#">団体購読</a></li>
              <li><a href="#">よくある質問</a></li>
              <li><a href="#">書籍</a></li>
              <li><a href="#">購読する</a></li>
              <li class="CG2-drawerBody__navItem--icon"><a href="#"><span class="CG2-icon-twitter"></span>公式Twitter</a></li>
            </ul>
          </div>
          <div class="CG2-drawerBody__separator"></div>
          <div class="CG2-drawerBody__nav">
            <ul>
              <li class="CG2-drawerBody__navItem--plane"><a href="#">お問い合わせ</a></li>
              <li class="CG2-drawerBody__navItem--plane"><a href="#">利用規約</a></li>
              <li class="CG2-drawerBody__navItem--plane"><a href="#">プライバシーポリシー</a></li>
              <li class="CG2-drawerBody__navItem--plane"><a href="#">特定商法に基づく表示</a></li>
            </ul>
          </div>
 
        </div>
      </div>
 
    </div>
    <div class="CG2-drawer__panelLeft" data-drawer-hide></div>
  </div>
  <div class="CG2-drawer__bg" data-drawer-close></div>
</div>

Container

/src/assets2/scss/codegrid-ui.scss
  • Template
コンテンツ配置/編集 領域
コンテンツ配置/編集 領域
コンテンツ配置/編集 領域
<div class="CG2-container">
  <div class="CG2-container__inner">
    コンテンツ配置/編集 領域
  </div>
</div>
 
<div class="CG2-container">
  <div class="CG2-container__inner">
    コンテンツ配置/編集 領域
  </div>
</div>
 
<div class="CG2-container">
  <div class="CG2-container__inner">
    コンテンツ配置/編集 領域
  </div>
</div>

articleNotice

/src/assets2/scss/codegrid-ui.scss
  • app-item-article
多くが古い情報の可能性があり、現在は推奨されない記事です
<div class="CG2-articleNotice CG2-articleNotice--level1">
  <div class="CG2-articleNotice__head">
    <span class="CG2-icon-exclamation-triangle"></span>
    多くが古い情報の可能性があり、現在は推奨されない記事です
  </div>
</div>
一部古い情報の可能性があります
<div class="CG2-articleNotice CG2-articleNotice--level2">
  <div class="CG2-articleNotice__head">
    <span class="CG2-icon-exclamation-circle"></span>
    一部古い情報の可能性があります
  </div>
</div>
古い記事ですが、現在も使える情報です
<div class="CG2-articleNotice CG2-articleNotice--level3">
  <div class="CG2-articleNotice__head">
    古い記事ですが、現在も使える情報です
  </div>
</div>

narrowLayout

/src/assets2/scss/codegrid-ui.scss
  • app-item-article

記事ページ用のレイアウト サイドバーに .CG2-articleSeriesNav 利用する

目次など
本文領域 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum est vitae risus congue, quis cursus lectus mattis. Maecenas mattis tempus mauris ultrices viverra. Donec eget justo ante. Aliquam accumsan leo egestas venenatis faucibus. Aliquam sed massa hendrerit, suscipit ipsum vel, lobortis quam. Aliquam mauris elit, eleifend eu porta vel, sodales at augue. Praesent cursus, nulla sit amet suscipit fringilla, nibh velit efficitur ligula, a feugiat turpis massa ac nunc. Cras consequat nibh in nulla faucibus eleifend. Ut mattis velit dui, sed tristique felis laoreet vitae. Donec placerat ante vel elit pellentesque, sit amet vulputate nisi consequat. Pellentesque efficitur euismod commodo. Vivamus ac maximus eros, sit amet porttitor libero. Praesent eu vehicula tortor. Vestibulum eu magna finibus, viverra diam nec, pulvinar velit. Praesent in mi sit amet nisi suscipit dictum. Proin sit amet diam tincidunt, tristique tortor ac, luctus est. Vivamus venenatis orci non lacinia ultricies. Duis posuere sit amet elit nec pretium. Suspendisse eget efficitur arcu. Proin porttitor turpis ipsum, ac venenatis odio fermentum ut.
<div class="CG2-narrowLayout">
  <div class="CG2-narrowLayout__main">
    目次など
  </div>
  <div class="CG2-narrowLayout__sub">
 
    <div class="CG2-articleSeriesNav">
      <div class="CG2-articleSeriesNav__inner">
        <ul>
          <li><a href="#">第1回「 仕様を知る 1 」</a></li>
          <li><a href="#">第2回「 仕様を知る 2 」</a></li>
        </ul>
      </div>
    </div>
 
  </div>
  <div class="CG2-narrowLayout__main">
    本文領域
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum est vitae risus congue, quis cursus lectus mattis. Maecenas mattis tempus mauris ultrices viverra. Donec eget justo ante. Aliquam accumsan leo egestas venenatis faucibus. Aliquam sed massa hendrerit, suscipit ipsum vel, lobortis quam. Aliquam mauris elit, eleifend eu porta vel, sodales at augue. Praesent cursus, nulla sit amet suscipit fringilla, nibh velit efficitur ligula, a feugiat turpis massa ac nunc. Cras consequat nibh in nulla faucibus eleifend.
    Ut mattis velit dui, sed tristique felis laoreet vitae. Donec placerat ante vel elit pellentesque, sit amet vulputate nisi consequat. Pellentesque efficitur euismod commodo. Vivamus ac maximus eros, sit amet porttitor libero. Praesent eu vehicula tortor. Vestibulum eu magna finibus, viverra diam nec, pulvinar velit. Praesent in mi sit amet nisi suscipit dictum. Proin sit amet diam tincidunt, tristique tortor ac, luctus est. Vivamus venenatis orci non lacinia ultricies. Duis posuere sit amet elit nec pretium. Suspendisse eget efficitur arcu. Proin porttitor turpis ipsum, ac venenatis odio fermentum ut.
  </div>
</div>