Menu Close
  1. SIS Lab
  2. >
  3. Blog
  4. >
  5. AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

更新日:2020.03.31 作成日:2019.10.06

ミニマルCSSフレームワーク「A Responsive CSS Grid for AMP | 1BX」を試してみました。

TL;DR

  • Hugoで作成するようなブログにおいては1BXで十分構成可能
  • サイズが小さくても、グリッドレイアウトを利用可能
  • 2文字クラス名を多用しているため、HugoのSyntax Highlighting(Chroma)のクラス名と衝突するが、Inlineオプションを利用することで回避可能

AMP用のCSSフレームワークに求められること

AMP(Accelerated Mobile Pages)の仕様に準拠するためにはCSSをインライン化する必要があります。そのため、Hugoで以下の通り、style.cssに定義したCSSをインライン化しています。

<style amp-custom>
{{ replaceRE " +" " " (replaceRE "\n" "" (partial "styles.css" .)) | safeCSS }}
</style>

ここで問題なのは、AMPの制限で、インライン化するコードは50KB以内に収めなければならない点です。

小さくしなければならないとはいえ、一から全て自分で書くのは辛いので、何らかのCSSフレームワークをベースにするのですが、AMP向けのCSSフレームワークに以外とシンプルなものがありませんでした。

1BXとは

  • Mobile First
    • The responsive layout provides mobile styling before larger screens to improve loading times on smaller devices.
  • Lightweight
    • Being less than 10k in size, 1BX can be positioned inline without adding to the time it takes to load a page.
  • Built for AMP
    • We love AMP and wanted to contribute to the project which is why we created this framework to work seamlessly with it.

モバイルファースト、軽量、AMP向けを狙っているだけあって、AMPサイトを小さく使い始めるのに便利でした。

作成者のサイトでももちろん使われているため、実装時の参考にさせていただきました。

User-First AMP Website Development | UK | Unumbox Ltd

通常グリッドデザインだと、row, columnなどをクラス名に指定している場合が多いですが、1BXではrw, rr, rcなどかなり省略されたクラス名を利用しているので、覚えるまで(慣れるまで)はちょっと時間がかかります。

とはいえ、全体が小さいのですぐなれます。

ハマった点

Syntax Highlighting用のCSSクラス名と、1BXで利用するクラス名が衝突して、デザインが崩れる。

解決方法

pygmentsOptionsnoclasses=trueを指定し、Syntax Highlightingをインライン化する。

pygmentsUseClasses = true
pygmentsStyle = "monokailight"
pygmentsOptions = "noclasses=true"

こうすることで、CSSにSyntax Highlighting用のCSSを書く必要がないので、1BXとクラス名が衝突しなくなる。

Syntax Highlighting | Hugo

参考

スポンサーリンク

Related contents

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

TECH

2020.03.13

npm-run-allでローカルAPI serverとHugo serverを同時に実行する

TECH

2020.02.02

HugoでAMP対応のブログカードを作る

TECH

2017.12.22

はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました

TECH

2017.10.07

HugoのRelated Contentを利用して関連記事を表示する

TECH

2017.01.08

静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する

TECH

2016.09.08

Circle CIでテストを定期実行する

TECH

2019.12.03

Homebrewで過去バージョンのパッケージをインストールする方法