CodeGrid UI

Category

Tag

All Colors

Logo_3D

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item
フロントエンドに
関わる人々のガイド
<div class="CG2-logo3d">
  <div class="CG2-logo3d__inner">
    <div class="CG2-logo3d__overlayText">
      フロントエンドに<br class="CG2--disableLargeScreen CG2--disableMiddleScreen">関わる人々のガイド
    </div>
  </div>
</div>

three.min.js (r72)、Logo3D.jsを読み込み、new CGUI.Logo3D( document.querySelector( '.CG2-logo3d__inner' )する必要がある

howYouReceive

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item

CodeGridの配信形式は、Webアプリ × メールマガジン

フロントエンドに特化した
300本以上の技術記事が読めるWebアプリ。
Chromeアプリもご用意しています

毎週木曜日配信(月4回)。
最新記事が定期的に届くメールマガジン。
サンプルへ

<section class="CG2-howYouReceive">
  <header class="CG2-howYouReceive__header">
    <h1>CodeGridの配信形式は、Webアプリ × メールマガジン</h1>
  </header>
  <div class="CG2-howYouReceive__list">
    <div class="CG2-howYouReceive__item">
      <div class="CG2-howYouReceive__image">
        <img src="http://img.pxgrid.net/480x180" alt="" width="480" height="180">
      </div>
      <p>フロントエンドに特化した<br>300本以上の技術記事が読めるWebアプリ。<br><a href="#">Chromeアプリもご用意しています</a></p>
    </div>
    <div class="CG2-howYouReceive__item">
      <div class="CG2-howYouReceive__image">
        <img src="http://img.pxgrid.net/480x180" alt="" width="480" height="180">
      </div>
      <p>毎週木曜日配信(月4回)。<br>最新記事が定期的に届くメールマガジン。<br><a href="#">サンプルへ</a></p>
    </div>
  </div>
</section>

bookInfo

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item

CodeGridが書籍になりました

書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。

書籍について
<section class="CG2-bookInfo">
  <h1>CodeGridが書籍になりました</h1>
  <div class="CG2-bookInfo__body">
    <div class="CG2-bookInfo__images">
      <ul>
        <li><img src="http://img.pxgrid.net/100x140" alt="" width="100 height="140""></li>
        <li><img src="http://img.pxgrid.net/100x140" alt="" width="100 height="140""></li>
      </ul>
    </div>
    <div class="CG2-bookInfo__text">
      <p>書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。書籍についての説明文や、Webで同じ内容が今すぐ読めるなどのアナウンスがはいります。</p>
      <a class="CG2-button" href="#">書籍について</a>
    </div>
  </div>
</section>

circulation

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item
(最新号 2015年5月21日発行)
発行号数
151
特集
70
シリーズ
記事数
321
<div class="CG2-circulation">
  <div class="CG2-circulation__lastUpdate">(最新号 2015年5月21日発行)</div>
  <div class="CG2-circulation__dataList">
    <div class="CG2-circulation__data">
      <div class="CG2-circulation__dataLabel">発行号数</div>
      <div class="CG2-circulation__dataNumber">151</div>
      <div class="CG2-circulation__dataUnit"></div>
    </div>
    <div class="CG2-circulation__data">
      <div class="CG2-circulation__dataLabel">特集</div>
      <div class="CG2-circulation__dataNumber">70</div>
      <div class="CG2-circulation__dataUnit">シリーズ</div>
    </div>
    <div class="CG2-circulation__data">
      <div class="CG2-circulation__dataLabel">記事数</div>
      <div class="CG2-circulation__dataNumber">321</div>
      <div class="CG2-circulation__dataUnit"></div>
    </div>
  </div>
</div>

pickedup

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item

人気の特集

多くの会員の皆様がお気に入りに登録した記事
CG2-seriesList を入れる
<section class="CG2-pickedup">
  <header class="CG2-pickedup__header">
    <h1 class="CG2-pickedup__headerHeading">人気の特集</h1>
    <div class="CG2-pickedup__headerSummary">多くの会員の皆様がお気に入りに登録した記事</div>
  </header>

  <div class="CG2-seriesList">
    CG2-seriesList を入れる
  </div>

</section>

categoryIntro

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item
  • 入門
  • 実践
  • 仕様解説
  • 座談会
  • 設計
  • レポート
  • デザイン
  • 未来・次世代
  • 仕事術
  • アンケート
  • インタビュー
  • ディスカッション
<div class="CG2-categoryIntro">
  <ul>
    <li><span class="CG2-icon-cat-elementary CG2-icon--colored"></span>入門</li>
    <li><span class="CG2-icon-cat-mastering CG2-icon--colored"></span>実践</li>
    <li><span class="CG2-icon-cat-standards CG2-icon--colored"></span>仕様解説</li>
    <li><span class="CG2-icon-cat-talk CG2-icon--colored"></span>座談会</li>
    <li><span class="CG2-icon-cat-architecture CG2-icon--colored"></span>設計</li>
    <li><span class="CG2-icon-cat-report CG2-icon--colored"></span>レポート</li>
    <li><span class="CG2-icon-cat-design CG2-icon--colored"></span>デザイン</li>
    <li><span class="CG2-icon-cat-future CG2-icon--colored"></span>未来・次世代</li>
    <li><span class="CG2-icon-cat-work-style CG2-icon--colored"></span>仕事術</li>
    <li><span class="CG2-icon-cat-survey CG2-icon--colored"></span>アンケート</li>
    <li><span class="CG2-icon-cat-interview CG2-icon--colored"></span>インタビュー</li>
    <li><span class="CG2-icon-cat-discussion CG2-icon--colored"></span>ディスカッション</li>
  </ul>
</div>

customerQuotes

/src/assets2/scss/_components-www.scss
  • www-item
  • www-top-item

CodeGrid関連ツィート

<section class="CG2-customerQuotes">
  <header class="CG2-customerQuotes__header">
    <h1>CodeGrid関連ツィート</h1>
    <div class="CG2-customerQuotes__headerSub">
      <a href="https://twitter.com/codegrid">@CodeGridで最新情報を配信しています <span class="CG2-icon-twitter"></span></a>
    </div>
  </header>
  <div class="CG2-customerQuotes__body">
    <div class="CG2-customerQuotes__list">
      <ul>
        <li>
          <blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
        </li>
        <li>
          <blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
        </li>
        <li>
          <blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p lang="ja" dir="ltr">have made a caustics shader with three.js とりあえずコークティクスできた iphone でも見れるよ! <a href="https://t.co/dJMzth2PlB">https://t.co/dJMzth2PlB</a></p>&mdash; Akihiro Oyamada (@yomotsu) <a href="https://twitter.com/yomotsu/status/627256992340574209">2015, 7月 31</a></blockquote>
        </li>
      </ul>
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
    <div class="CG2-customerQuotes__timeline">
      <a class="twitter-timeline" href="https://twitter.com/hashtag/codegrid" data-widget-id="628812249822408705">#codegrid のツイート</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");</script>
    </div>
  </div>
</section>

JSでtwitterのiframe内にstyleを挿入してmax-widthを打ち消す大きさを調整する必要がある

window.addEventListener( 'load', function () {

  var i,l;
  var css = [
    '.EmbeddedTweet, .timeline {',
      'box-sizing: border-box;',
      'max-width: none !important;',
      'width: 100% !important;',
    '}',
    '.sandboxroot.env-narrow p{',
      'font-size: 12px;',
    '}'
  ].join( '' );
  var iframe = document.querySelectorAll( 'iframe[id^=twitter-widget-' );

  for ( i = 0|0, l = iframe.length|0; i < l; i = ( i + 1 )|0 ) {

    var doc  = iframe[ i ].contentWindow.document;
    var head  = doc.querySelector( 'head' );
    var style = doc.createElement( 'style' );
    style.innerText = css;
    head.appendChild( style );

  }

} );