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

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

更新日:2021.01.30 作成日:2019.10.06
ミニマルCSSフレームワーク「1BX」を試してみました

ミニマル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

参考

B! Pocket

Related contents

TECH

2019.10.11

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

TECH

2022.08.14

GitHub PagesからCloudflare Pagesへの移行

TECH

2022.06.29

AMP Service WorkerでPrefetch Linksを実現する

TECH

2020.11.01

HugoでTailwindCSSを利用しAMP Validなページを生成する

TECH

2020.09.27

AMP OptimizerによるAMPのさらなる最適化

TECH

2020.08.15

Progressive Web Appを有効にする

TECH

2020.03.13

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

TECH

2020.02.02

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