簡易フレームワークの自作

そもそもやりたかったこと

Jekyll でサイトを構築している。

レイアウトをある程度作り込んだ後、記事の中の部品を定義していくのは面倒。ただ既存のCSSフレームワークをその段階から導入すると、作ったレイアウトが(確実に!)崩れる。それって最初の計画段階で決めておくべきもの。計画性のない自分が悪い(笑)で終了。

……なのだが。でも何か方法はないか？

試してみると、CSSフレームワークにも元のレイアウトを崩しやすいものとそうでないものがあるみたい（まあ全て試したわけじゃないけど）。じゃあ次の条件で何かいいものはないかと？

  1. 軽量でJavaScriptを使用していない.
  2. SCSS対応

比較的 Bulma がレイアウト崩れしにくかった。

ただ Bulma は Flexbox を利用している。すでに Grid Layout で作っているのでそこはパス。おおまかなレイアウトは自分でCSS書いた方が早い。また、特定のツールを深く理解して使うという学習コストをかけたくない。

ちなみにこの記事に書かれていることが妙に共感できたので参考まで。

CSS フレームワークを使いたくない
http://jinjor-labo.hatenablog.com/entry/2019/03/13/084116

なんかわかるわ〜…(^o^)

開発というほどの話じゃなくて、仕組みと規定値を決めてクラスを指定するとデザインが決まるという程度のものでいい。しかもmarkdown の中でも使える簡易なフレームワークっぽい仕組みって作れないか。記事中の表などのエレメント、フォントや色の設定を少しだけ変えられるもの。そんなことができたら markdown なのに（大嫌いなｗ）リッチテキストエディターなみじゃねーか(喜)。

というわけで、Bulma を参考にしつつ試してみた。

Markdown でクラスを指定する方法

Bulma などのCSSフレームワークは特定のクラス名を追加すると、部品スタイルをよしなに設定してくれるものが多い。Jekyll で使うためには、 ｍarkdown でクラス名を追加する必要がある。ただデフォルトの markdown の仕様にはそういう仕組みが無い。しかし markdownレンダラーの kramdown ならクラス指定などができる。ちょっとめんどうだけど。

[markdown]

Element
{:.post-elem}

こう書くとこうなる。

Element

[html]

<p class="post-elem">Element</p>

これをattribute list definitions (ALDs)と言うらしい。詳しくは kramdown のマニュアル参照。

この方法は Jekyll の記事の中で使える。

今までどうしていたかというと、記事の本文の中は見出しや文章などに直接クラス指定できないので、styles.scssなどに.post #title h2とか.post > .contents pとか テンプレートレベルで付けたIDやクラス名から contents中のタグを指定してSCSSを書いている。基本的なレイアウトやデザインはそれでいいのだけれど、記事を書きながらごく部分的にココをこうしたい！という時があり、いちいち SCSS を弄るのは面倒だし、基本のデザインに影響するのはもっとイヤ。

でもこのALDsなら、多少の(?)面倒さを差し引けば、見出しや章の区切り線などに短い名前のクラス名を付けて、統一したデザインを使ってCSS側でいじるといった目的に利用できる。自分テーマのSCSSを書いて利用したりすると便利かも。

もちろん Markdown から直接のスタイル指定もできなくはない。ただ面倒だし、あまりしないだろうけど。

[markdown]

Element
{: .post-elem}
{: style="padding: 10px 15px; border: 1px solid #ccc;"}

書き方だけど、ここでは{: xxxxx}を2行に分けて書いたけど別に1行にまとめてもいい。

Element

[html]

<p class="post-elem" style="padding: 10px 15px; border: 1px solid #ccc;">Element</p>

ただし、ブロック要素は基本ブロックの直下の行に、インライン要素は同じ行に書く必要があるようだ。分からない場合は試しながらやるしかない。

ちなみに{: #id}で ID を HTML に渡したり、{: key="value"}という形でキーと値の組を渡すこともできる。 詳しくはKramdown のマニュアルに書いてある。 キーと値の組はすでに見た{: style="xxxx;"}というCSS渡しと同じ形で、あとでCSS変数を利用するのに使える。

フレームワークファイルの読み込み方

さて、その前にフレームワークファイルをどこに置いてどう読み込むか？

いろんなやり方があるのだろうが、ここではJekyll の_sassディレクトリに_private-framework.scssというファイルをつくる。さらに同じく_sassディレクトリの中にframework-modulesというサブディレクトリを作り、そのなかに役割りを表す名前のファイルを置く。これが個別のモジュールになる。

例えば_sass/framework-modules/_font-styles.scssなどの名前のモジュール・ファイルを置く。そして_sass/_private-framework.scssに、@import "framework-modules/font-styles"などとして個別のモジュール・ファイルを読み込む。

[_sass/_private-framework.scss]

// Custom framework
@import "framework-modules/font-styles";

そしてこの_sass/_private-framework.scss をメインのassets/css/styles.scssから@importする。

[assets/css/styles.scss]

// Minimal Framework for private use
@import "private-framework";

あとは追加のモジュールを、例えば_sass/framework-modules/_table-styles.scssとか作れば、また_private-framework.scss に@importして足していけばよい。

$ cd _sass/
$ tree .
.
├── _01_common.scss
├── _02_layout.scss
├── _03_site-header.scss
├── _04_navigation.scss
  .............................
├── _private-framework.scss # <- フレームワークのモジュールを読み込むscss
└── framework-modules # <- モジュールの置き場所
    └── _font-styles.scss # <- 個別のフレームワーク・モジュール

以下この方法で私的使用のミニフレームワークを作ってみよう。

色の設定ファイル

最初に色設定ファイルを作る。

_sass/framework-modules/_color-palette.scssを作って、そこに色を表す変数を書いた。

$green: #008000;という感じで、140色WEBカラー名の変数を作る。利便性を考えて、この140色によく使うグレーの階調を13色、計153色定義してみた。また、他のファイルで使えるように、各色名をキーにした変数リストのハッシュを同じ153色分作っておく。

// List of color variables
$color-var-list: (
  'white': $white,
  'whitesmoke': $whitesmoke,
  'gainsboro': $gainsboro,
  'lightgray': $lightgray,
  'silver': $silver,
  ........
  'navy': $navy,
  'darkblue': $darkblue,
  'mediumblue': $mediumblue,
  'blue': $blue,
  'darkgreen': $darkgreen,
  'green': $green,
  ........
  };

手間がかかりそうに見えるけど、WEBカラー140色の名前なんてネットですぐ拾えるし、VSCode のマルチカーソルで矩形選択を駆使すれば簡単に出来る。