CodeGrid UI

Category

Tag

All Colors

articleNotice

/src/assets2/scss/_components.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>

リンクあり

新しいバージョンに対応したシリーズがあります。
<div class="CG2-articleNotice CG2-articleNotice--level2">
  <div class="CG2-articleNotice__head">
    <span class="CG2-icon-exclamation-circle"></span>
    新しいバージョンに対応した<a href="">シリーズ</a>があります。
  </div>
</div>

narrowLayout

/src/assets2/scss/_components.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>
          <li><a href="#">第12回「 仕様を知る 2.4 」</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>

articleBeforeLogin

/src/assets2/scss/_components.scss
  • app-item-article
この記事を読むには
購読の手続きが必要です
<div class="CG2-articleBeforeLogin">
  <div class="CG2-articleBeforeLogin__lead">この記事を読むには<br>購読の手続きが必要です</div>
  <div class="CG2-articleBeforeLogin__sub"></div>
  <div class="CG2-articleBeforeLogin__buttonContainer">
    <ul>
      <li><a class="CG2-button CG2-button--primary" href="#">購読の手続きへ</a></li>
      <li><a class="CG2-button" href="#">購読済みの方はログイン</a></li>
    </ul>
  </div>
</div>

articleTOC

/src/assets2/scss/_components.scss
  • app-item-article
<section class="CG2-articleTOC">
  <header class="CG2-articleTOC__header">
    <h1>目次</h1>
  </header>
  <div class="CG2-articleTOC__body">
    <div class="CG2-articleTOC__list">
      <ul>
        <li><a href="#">はじめに</a></li>
        <li><a href="#">flex-growとflex-shrink</a></li>
        <li><a href="#">利用可能な余白を計算する</a></li>
        <li><a href="#">まとめ</a></li>
      </ul>
    </div>
  </div>
</section>

articleSeriesNav

/src/assets2/scss/_components.scss
  • app-item
  • app-item-article

記事ページ .CG2-narrowLayout のサイドバー内で利用する

<div class="CG2-articleSeriesNav">
  <div class="CG2-articleSeriesNav__inner">
    <ul>
      <li><a href="#">第1回「 仕様を知る 1 」</a></li>
      <li class="CG2-articleSeriesNav__item--current"><a href="#">第2回「 仕様を知る 2 」</a></li>
      <li><a href="#">第3回「 Flexboxを実践する 1 」</a></li>
      <li><a href="#">第4回「 Flexboxを実践する 2 」</a></li>
      <li><a href="#">5こまではいる、長いと切れる長いと切れる長いと切れる</a></li>
    </ul>
    <ul>
      <li><a href="#">6こ目は次のUL</a></li>
      <li><a href="#">7こ目</a></li>
      <li><a href="#">8こ目</a></li>
      <li><a href="#">9こ目</a></li>
      <li><a href="#">10こ目</a></li>
    </ul>
  </div>
</div>

article

/src/assets2/scss/_components.scss
  • app-item
  • app-item-article

記事本文、markdownから変換されることを前提

h2みだし

テキストリンクてきすとcodeテキストてきすとテキストてきすと

h3みだし

テキストリンクてきすとcodeテキストてきすとテキストてきすと

h4みだし

テキストリンクてきすとcodeテキストてきすとテキストてきすと

  • リストりすと
  • リストりすと
  1. リストりすと
  2. リストりすと
見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル
見出しセル データセル データセル
見出しセル データセル データセル

コラムタイトル

テキストリンクてきすとcodeテキストてきすとテキストてきすと

テキストリンクてきすとcodeテキストてきすとテキストてきすと

<article class="CG2-article">

  <h2>h2みだし</h2>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>

  <h3>h3みだし</h3>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>

  <h4>h4みだし</h4>

  <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>

  <ul>
    <li>リストりすと</li>
    <li>リストりすと</li>
  </ul>

  <ol>
    <li>リストりすと</li>
    <li>リストりすと</li>
  </ol>

  <table>
    <tbody>
      <tr>
        <th>見出しセル</th>
        <th>見出しセル</th>
        <th>見出しセル</th>
      </tr>
      <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
      <tr>
        <td>データセル</td>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
    </tbody></table>
    <table>
      <tbody><tr>
        <th>見出しセル</th>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
      <tr>
        <th>見出しセル</th>
        <td>データセル</td>
        <td>データセル</td>
      </tr>
    </tbody>
  </table>

  <aside>
    <h1>*注:Autoprefixer</h1>
    <p>Autoprefixerに関しては、次の記事を参照してください。<br><a href="#">「ビルドツールアラカルト」</a>シリーズ</p>
  </aside>

  <div class="Column">
    <h1>コラムタイトル</h1>
    <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
    <p><img src="http://img.pxgrid.net/1000x200"></p>
    <p>テキスト<a href="#">リンク</a>てきすと<code>code</code>テキストてきすとテキストてきすと</p>
  </div>

</article>

articlePagination

/src/assets2/scss/_components.scss
  • app-item
  • app-item-article
<div class="CG2-articlePagination">
  <ul>
    <li class="CG2-articlePagination__prev"><a href="#">第1回 仕様を知る 1</a></li>
    <li class="CG2-articlePagination__next"><a href="#">第3回 Flexboxを実践する 1</a></li>
  </ul>
</div>

articleUtil

/src/assets2/scss/_components.scss
  • app-item
  • app-item-article
<div class="CG2-articleUtil">
  <ul>
    <li><button class="CG2-button CG2-button--action" data-socialitems-append><span class="CG2-icon-facebook"></span><span class="CG2-icon-twitter"></span><span class="CG2-icon-gplus"></span> シェアする</button></li>
    <li><button class="CG2-button CG2-button--action"><span class="CG2-icon-star"></span> お気に入りに登録</button></li>
  </ul>
  <div class="CG2-articleUtil__socialItems"></div>
  <script src="https://platform.twitter.com/widgets.js" async></script>
</div>

livecode

/src/assets2/scss/_components.scss
  • app-item
  • app-item-article

ソースコードを埋め込むことができる

index.html
<div class="flex">
  <div class="flexitem-1">Item1</div>
  <div class="flexitem-2">Item2</div>
  <div class="flex__item-3">Item3</div>
</div>
<section class="CG2-livecode">
  <header class="CG2-livecode__header">
    <div class="CG2-livecode__label">
      index.html
    </div>
    <div class="CG2-livecode__nav">
      <ul>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 全文選択
        </a></li>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 新規タブで開く
        </a></li>
      </ul>
    </div>
  </header>
  <div class="CG2-livecode__body">
    <pre class="language-markup line-numbers"><code>&lt;div class="flex"&gt;
  &lt;div class="flex__item-1"&gt;Item1&lt;/div&gt;
  &lt;div class="flex__item-2"&gt;Item2&lt;/div&gt;
  &lt;div class="flex__item-3"&gt;Item3&lt;/div&gt;
&lt;/div&gt;</code></pre>
  </div>
</section>

動く demo として、iframe を埋め込むことができる

iframeには、

  • CG2-livecode__frame--small
  • CG2-livecode__frame--large

を追加クラスとして明示することも可能。その場合それぞれ、iframeの高さが190px、590pxとなる。

<section class="CG2-livecode">
  <h1>埋め込みデモのタイトル</h1>
  <header class="CG2-livecode__header">
    <div class="CG2-livecode__nav">
      <ul>
        <li><a href="#">
          ソースコード:flex-basis/2
        </a></li>
        <li><a href="#">
          <span class="CG2-icon-tool"></span> 新規タブで開く
        </a></li>
      </ul>
    </div>
  </header>
  <div class="CG2-livecode__body">
    <iframe src="https://s3-ap-northeast-1.amazonaws.com/codegrid/2015-css-flexiblebox/demo/2/flex-basis/1/index.html"></iframe>
  </div>
</section>

profileSimple

/src/assets2/scss/_components.scss
  • app-item
  • app-item-article

記事ページの下部等、バイオグラフィー自体がメインではないコンテンツ用

ピクセル グリオ
フロントエンジニア

株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。

<div class="CG2-profileSimple">
  <div class="CG2-profileSimple__image">
    <img src="http://img.pxgrid.net/120x120" alt="">
  </div>
  <div class="CG2-profileSimple__main">
    <div class="CG2-profileSimple__header">
      <div class="CG2-profileSimple__name">ピクセル グリオ</div>
      <div class="CG2-profileSimple__title">フロントエンジニア</div>
    </div>
    <div class="CG2-profileSimple__text">
      <p>株式会社ピクセルグリッドの社員。2010年4月にTwitterに登録したがあまり活躍していない。</p>
    </div>
  </div>
</div>