CodeGrid UI

Category

Tag

All Colors

Page Header

/src/assets2/scss/_template.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">
          <form>
            <input type="search">
          </form>
        </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">
          <form>
            <input type="search">
          </form>
        </div>
      </div>
      <div class="CG2-pageHeader__user">
        <div class="CG2-pageHeader__userHeader">
          <div class="CG2-pageHeader__userName">gurio@pxgrid.example</div>
          <div class="CG2-pageHeader__userAvatar">
            <img src="__dummy__112x112" 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/_template.scss
  • Template
<footer class="CG2-pageFooter">
  <div class="CG2-pageFooter__inner">
    <div class="CG2-pageFooter__wwwNav">
      <div class="CG2-pageFooter__logo">
        <img src="__dummy__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">
            <form>
              <input type="search">
            </form>
          </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-architecture"></span>設計</a></li>
          <li><a href="#"><span class="CG2-icon-cat-future"></span>未来・次世代</a></li>
          <li><a href="#"><span class="CG2-icon-cat-talk"></span>座談会</a></li>
          <li><a href="#"><span class="CG2-icon-cat-mastering"></span>実践</a></li>
          <li><a href="#"><span class="CG2-icon-cat-elementary"></span>入門</a></li>
          <li><a href="#"><span class="CG2-icon-cat-standards"></span>仕様解説</a></li>
          <li><a href="#"><span class="CG2-icon-cat-work-style"></span>仕事術</a></li>
          <li><a href="#"><span class="CG2-icon-cat-report"></span>レポート</a></li>
          <li><a href="#"><span class="CG2-icon-cat-design"></span>デザイン</a></li>
          <li><a href="#"><span class="CG2-icon-cat-discussion"></span>ディスカッション</a></li>
          <li><a href="#"><span class="CG2-icon-cat-interview"></span>インタビュー</a></li>
          <li><a href="#"><span class="CG2-icon-cat-survey"></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="PixelGrid" 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="PixelGrid" width="128" height="32"></div>
    </div>
  </div>
<!-- /.CG2-pageFooter --></footer>

Drawer

/src/assets2/scss/_template.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="__dummy__112x112" alt="" width="56" height="56">
            </div>
            <div class="CG2-drawerBody__userName">gurio@pxgrid.example</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">
              <form>
                <input type="search">
              </form>
            </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/_template.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>