app-item-articlelist

seriesWeekHeader

/src/assets2/scss/codegrid-ui.scss
  • app-item
  • app-item-articlelist
<div class="CG2-seriesWeekHeader">
  <div class="CG2-seriesWeekHeader__inner">
    <div class="CG2-seriesWeekHeader__prev">
      <div class="CG2-seriesWeekHeader__prevInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">前号</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text"></span>
          <span class="CG2-seriesWeekHeader__number">1</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
    <div class="CG2-seriesWeekHeader__current">
      <div class="CG2-seriesWeekHeader__currentInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">最新号</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text"></span>
          <span class="CG2-seriesWeekHeader__number">7</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
    <div class="CG2-seriesWeekHeader__next">
      <div class="CG2-seriesWeekHeader__nextInner">
        <a href="#">
          <span class="CG2-seriesWeekHeader__label">次号予告</span>
          <span class="CG2-seriesWeekHeader__number">10</span>
          <span class="CG2-seriesWeekHeader__text"></span>
          <span class="CG2-seriesWeekHeader__number">14</span>
          <span class="CG2-seriesWeekHeader__text">日発行</span>
        </a>
      </div>
    </div>
  </div>
</div>

seriesListHeader

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

内部で別コンポーネント CG2-compactNav を利用

<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__articleLength">
    <span class="CG2-seriesListHeader__label">記事数</span>
    <span class="CG2-seriesListHeader__number">500</span>
    <span class="CG2-seriesListHeader__unit"></span>
  </div>
  <div class="CG2-seriesListHeader__nav">
 
    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
        <li><a href="#">おすすめ順</a></li>
        <li><a href="#">お気に入り</a></li>
        <li><a href="#">無料公開</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>
 
  </div>
</div>
<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__nav">
 
    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
        <li><a href="#">おすすめ順</a></li>
        <li><a href="#">お気に入り</a></li>
        <li><a href="#">無料公開</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>
 
  </div>
</div>

タブ切り替え(表示toggle)の挙動の付与 (JSとの連携、以下で挙動確認可能)

  • data-cg2-tab-buttonを明示する
  • コンテンツ部は[data-cg2-tab-content]でグループ化した[data-cg2-tab-pane]を用意する
項目Aのコンテンツ
項目Bのコンテンツ
<div class="CG2-seriesListHeader">
  <div class="CG2-seriesListHeader__nav">
 
    <div class="CG2-compactNav">
      <ul>
        <li class="CG2-compactNav__item--current"><a href="#itemA" data-cg2-tab-button>項目A</a></li>
        <li><a href="#itemB" data-cg2-tab-button>項目B</a></li>
      </ul>
      <div class="CG2-compactNav__navOpener"></div>
    </div>
 
  </div>
</div>
 
 
<div data-cg2-tab-content>
 
  <div id="itemA" data-cg2-tab-pane="current">
    項目Aのコンテンツ
  </div>
 
  <div id="itemB" data-cg2-tab-pane>
    項目Bのコンテンツ
  </div>
 
</div>

compactNav

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

別コンポーネント CG2-seriesListHeader 内で利用。利用方法は CG2-seriesListHeader を参照

<div class="CG2-compactNav">
  <ul>
    <li class="CG2-compactNav__item--current"><a href="#">最新順</a></li>
    <li><a href="#">おすすめ順</a></li>
    <li><a href="#">お気に入り</a></li>
    <li><a href="#">無料公開</a></li>
  </ul>
  <div class="CG2-compactNav__navOpener"></div>
</div>

seriesList

/src/assets2/scss/codegrid-ui.scss
  • app-item
  • app-item-articlelist
  • www-item
  • 未読記事にはCG2-seriesList__article--unread追加する
  • 有料時のカギアイコンは<span class="CG2-icon-lock"></span>を使う。CG2-icon--coloredは付与しない

通常

<div class="CG2-seriesList">
  <div class="CG2-seriesList__inner">
 
    <div class="CG2-seriesList__item">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href="#"><span class="CG2-icon-cat-architecture"></span></a>
        </div>
        <div class="CG2-seriesList__itemTitle">
          <a href="javascript:alert( 'シリーズ一覧へ' );">
            <div class="CG2-seriesList__itemTitleText">Web Fonts 自由自在</div>
          </a>
        </div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href="#"><span class="CG2-icon-list"></span></a></li>
            <li><button class="CG2-seriesList__itemUtilButton--favAdded" onclick="javascript:alert('added to fav list');"><span class="CG2-icon-star"></span></button></li>
          </ul>
        </div>
      </div>
      <div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article CG2-seriesList__article--unread">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>
            <div class="CG2-seriesList__articleDate">4/16</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第2回</div>
            <div class="CG2-seriesList__articleTitle">gulpで生成を自動化</div>
            <div class="CG2-seriesList__articleDate">4/9</div>
          </a>
        </div>
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第1回</div>
            <div class="CG2-seriesList__articleTitle">Webアプリの利用</div>
            <div class="CG2-seriesList__articleDate">4/2</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>
 
    <!-- .CG2-seriesList__item 繰り返し -->
 
    <div class="CG2-seriesList__itemMore"><a href="#">more</a></div>
 
  </div>
</div>

full width

<div class="CG2-seriesList">
  <div class="CG2-seriesList__inner">
 
    <div class="CG2-seriesList__item CG2-seriesList__item--fullWidth">
      <div class="CG2-seriesList__itemHeader">
        <div class="CG2-seriesList__itemCategory">
          <a href="#"><span class="CG2-icon-cat-architecture"></span>実践</a>
        </div>
        <div class="CG2-seriesList__itemTitle">Web Fonts 自由自在</div>
        <div class="CG2-seriesList__itemUtil">
          <ul>
            <li><a href="#"><span class="CG2-icon-list"></span></a></li>
            <li><button class="CG2-seriesList__itemUtilButton--favAdded" onclick="javascript:alert('added to fav list');"><span class="CG2-icon-star"></span></button></li>
          </ul>
        </div>
      </div>
      <div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
      <div class="CG2-seriesList__articles">
        <div class="CG2-seriesList__article">
          <a href="#">
            <div class="CG2-seriesList__articleIcon">
              <span class="CG2-icon-unlock CG2-icon--colored"></span>
            </div>
            <div class="CG2-seriesList__articleOrder">第3回</div>
            <div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>
            <div class="CG2-seriesList__articleDate">4/16</div>
          </a>
        </div>
      </div>
      <div class="CG2-seriesList__authors">
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
        <a href="#">
          <div class="CG2-seriesList__author">
            <div class="CG2-seriesList__authorPic">
              <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
            </div>
            <div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
          </div>
        </a>
      </div>
    </div>
 
    <!-- .CG2-seriesList__item.CG2-seriesList__item--fullWidth 繰り返し -->
 
    <div class="CG2-seriesList__itemMore"><a href="#">more</a></div>
 
  </div>
</div>

seriesHeader

/src/assets2/scss/codegrid-ui.scss
  • app-item
  • app-item-articlelist
カテゴリー名
Vue.jsを使いこなす
8
<div class="CG2-seriesHeader">
  <div class="CG2-seriesHeader__inner">
    <div class="CG2-seriesHeader__category">
      <div class="CG2-seriesHeader__categoryIcon">
        <span class="CG2-icon-cat-architecture"></span>
      </div>
      <div class="CG2-seriesHeader__categoryName">カテゴリー名</div>
    </div>
    <div class="CG2-seriesHeader__main">
      <div class="CG2-seriesHeader__mainInner">
        <div class="CG2-seriesHeader__title">Vue.jsを使いこなす</div>
        <div class="CG2-seriesHeader__length">
          全<span class="CG2-seriesHeader__value">8</span>
        </div>
      </div>
    </div>
    <div class="CG2-seriesHeader__utils">
      <button class="CG2-transparencyButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button>
    </div>
  </div>
  <div class="CG2-seriesHeader__bg" style="background-image: url( './img/_01.jpg' )"></div>
</div>

series

/src/assets2/scss/codegrid-ui.scss
  • app-item
  • app-item-articlelist
  • 未読時はCG2-series__item--unreadを追加する
  • 有料記事のアイコンは<span class="CG2-icon-lock"></span>を利用する。このときCG2-icon--coloredは不要

双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。

高津戸 壮 | フロントエンド・エンジニア

双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。

高津戸 壮 | フロントエンド・エンジニア
...
...
 
<div class="CG2-series">
  <div class="CG2-series__item">
    <div class="CG2-series__itemHeader">
      <a href="#">
        <div class="CG2-series__itemIcon">
          <span class="CG2-icon-unlock CG2-icon--colored"></span>
        </div>
        <div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>
        <div class="CG2-series__itemPubdate">2015/04/23</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
        </div>
        <div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
      </div>
    </div>
  </div>
 
  <div class="CG2-series__item CG2-series__item--unread">
    <div class="CG2-series__itemHeader">
      <a href="#">
        <div class="CG2-series__itemIcon">
          <span class="CG2-icon-unlock CG2-icon--colored"></span>
        </div>
        <div class="CG2-series__itemTitle">第1回 Vue.jsとは</div>
        <div class="CG2-series__itemPubdate">2015/04/23</div>
      </a>
    </div>
    <div class="CG2-series__itemBody">
      <p>双方向データバインディングに特化したVue.jsは、シンプルで学習コストも低いといわれます。第1回目はVue.jsがフレームワークとして、どんな強みをもっているのか、その特徴をコードから概観します。</p>
    </div>
    <div class="CG2-series__authors">
      <div class="CG2-series__author">
        <div class="CG2-series__authorPic">
          <img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
        </div>
        <div class="CG2-series__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
      </div>
    </div>
  </div>
 
  <div class="CG2-series__item">
    ...
  </div>
 
  <div class="CG2-series__item">
    ...
  </div>
 
</div>

articleHeader

/src/assets2/scss/codegrid-ui.scss
  • app-item
  • app-item-articlelist
入門
第2回 仕様を知る 2

フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。

2015年 5月14日発行
<div class="CG2-articleHeader">
  <div class="CG2-articleHeader__inner">
    <div class="CG2-articleHeader__category">
      <div class="CG2-articleHeader__categoryIcon">
        <span class="CG2-icon-cat-elementary"></span>
      </div>
      <div class="CG2-articleHeader__categoryName">入門</div>
    </div>
 
    <div class="CG2-articleHeader__main">
      <div class="CG2-articleHeader__mainInner">
        <div class="CG2-articleHeader__series">
          <a href="javascript:alert( 'シリーズ一覧へ' );">
            そこが知りたい、 Flexible Box
          </a>
        </div>
        <div class="CG2-articleHeader__title">第2回 仕様を知る 2</div>
        <div class="CG2-articleHeader__abstract">
          <p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>
        </div>
        <div class="CG2-articleHeader__pubDate">2015年 5月14日発行</div>
      </div>
    </div>
 
    <div class="CG2-articleHeader__pagenation">
      <ul>
        <li class="CG2-articleHeader__pagenationPrev"><a href="#">前回</a></li>
        <li class="CG2-articleHeader__pagenationNext"><a href="#">次回</a></li>
      </ul>
    </div>
 
    <div class="CG2-articleHeader__utils">
      <ul>
        <li><a href="#" class="CG2-transparencyButton"><span class="CG2-icon-list"></span>このシリーズの記事一覧をみる</a></li>
        <li><button class="CG2-transparencyButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button></li>
        <li><button class="CG2-transparencyButton">未読にする</button></li>
      </ul>
    </div>
 
  </div>
  <div class="CG2-articleHeader__bg" style="background-image: url( './img/_01.jpg' )"></div>
</div>