最近、blog の AMP 表示テーマを作り始めました。
1から作るのは大変そうなので、 AMP Start、レスポンシブウェブデザインのAMPサイトを簡単に構築できるテンプレートを公開 | 海外SEO情報ブログ BLOG 記事向けのテンプレートをダウンロードして、編集、作成しています。

ソースを見ていて、内部で使用してるcss が気になったのでそのことを記載します。


AMP start の BLOG テンプレートのcss の抜粋

css 定義の最上部の抜粋になります。

  <style amp-custom="">/*! Bassplate | MIT License | http://github.com/basscss/bassplate */

Bassplate という ボイラープレート を 使っているようです。
このボイラープレートは、Basscss
いうCSS フレームワークを使っていました。


少し触ってみて、気づいたこと

  • *Basscss にカスタマイズが加えられている * Basscssカスタマイズを加えたものらしく、ページングのスタイルを使おうとしたのですが、使えません。
    代わりに ampstart始まる css 定義が使えます。
    幅調整など基本的な定義は、Basscss定義をそのまま使用可能でした。

  • code highlight は含まれていない
    特に技術ブログ用途ではないので、code highlight は含まれていません。
    Pygments を使って css を生成して組み込みました。


AMP Start の サイト上の説明

AMP Start - How it works Normalize.css と、Basscss を使ってると記載があります。
結構な頻度で、新しいテンプレートが、AMP Start - Templates追加されていますが、基本的に、全て Basscss を使用しているようです。

以上です。

コメント