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

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

更新日:2023.05.05 作成日:2019.10.06
#Web Design #Blog #AMP #Hugo

ミニマル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で利用するクラス名が衝突して、デザインが崩れる。

解決方法

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

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

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

Syntax Highlighting | Hugo

参考

Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)
Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)
インプレスR&D
AmazonKindle楽天市場Yahoo!ショッピング

Related contents