Barrio Bootstrap 4 - Drupal 8/9 Theme は手強いが魅力的だ

hagi に投稿

Bootstrap 3をしばらく使い続けてきた。この記事を書いている段階ではThemeはBootstrap 3ベースである。

もうそろそろ、4にしても良いかも知れないと思ったのは随分前だが、お客様が休眠状態に入っている隙きをついてTryしてみた。まずは、改めて、https://www.drupal.org/docs/8/themes/barrio-bootstrap-4-drupal-89-theme/bootstrap-barrio-installation/installationに従って、www.ulslab.comのサイトのクローンに適用してみた。デフォルトでインストールされるSubthemeをデフォルトにセットするだけで、とりあえず使えるようになる。まず驚いたのは、Viewsの見栄えが変わることだ。狭い画面だと、優先度高でないカラムが表示されなくなる。おお、Responsiveだと感激した。一方で、毎度のことだが、h1とかh2のフォントが大きすぎるのが不快である。これを解消するには自分でカスタマイズせねばと思って、https://www.drupal.org/docs/contributed-themes/bootstrap-4-sass-barrio-starter-kit版をインストールする。Scriptベースで自前のThemeを生成してデフォルト設定すると、今までのSubthemeと挙動が変わる。今度は、Viewsの見栄えは元に戻ってしまい優先度高でないカラムも表示されてしまう。

Themeのデフォルトを切り替えながら、Chromeの「検証」機能を使って、違いを見ていく。何が上書きされるのか、@mediaがどう機能するのかとかを確認していると理屈はともかく設定変更の影響が見えてくる。理論的な背景が完璧でなければ、最初は、やってみた結果で想像するしかない。Colorsモジュールを機能させようとしてみたり、とにかくやってみると思ったより簡単に設定が進む。同時に、思ったように設定の結果が変わらないケースも多い。それでもvariables.scssとstyle.scssのどちらに何を書くのが正解なのかがだんだんイメージできるようになる。とは言え、簡単には自分の思い通りにはならない。

結局、未熟は未熟のまま公開する決断をして、https://www.ulslab.com/をリリースした。

今後は、Layout Builderとか、まだ解決していない表示問題にも取り組みながら、機能的にも追加していこうと思う。

約10年前は東証一部上場企業の取締役だったが、今は、一人会社の代表。両方の視点を大事にしながら、情報発信に努めたいと思っている。

タグ