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

更新日:2021.01.30 作成日:2019.10.06

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

TL;DR

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

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フレームワークに以外とシンプルなものがありませんでした。

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サイトを小さく使い始めるのに便利でした。

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

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

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

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

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

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

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

インプレスR&D