ラック
Home > ブログ > 記事 > 2018年3月 > Kiribi Ususamaをまたアップデートした話

Kiribi Ususamaをまたアップデートした話

カテゴリ: ホームページ,プログラム,開発環境,Web自作

手前味噌ですが、本日また自分用のテンプレートのアップデートを行いました。

順番としては3段階で、

  1. ディレクトリ階層・ファイル名の整理
  2. jsonで管理するパラメータの整理
  3. gulp-json-to-sassを使って、ejs, js, scssの3つで共通のjsonの値を使いまわせる

ようにしました(標準ではjsに値は参照させていませんが)。

これによって何がうれしいかと言うと、主に次の2点。

  1. 色の一元管理
    • ブラウザのアドレスバーのところに色を付けるtheme-colorの値をjsonからejsに渡すのと、jsonからscssに変数で落とし込むことで一元管理し、色の変更漏れを防ぐ
  2. ヘッダナビゲーションバーの高さを共有
    • Bootstrap3ベースなので、よくナビゲーションバーのnavbar-fixed-topをよく使います。この場合、キービジュアルの高さをナビゲーションバーの高さも含めて考えるかどうかのときに、同じ値を参照できた方が修正漏れを防げます。また、ejsというかhtmlでもdata-offsetの値として参照していたりするので、多方面で流用が効くと思われます。

ということで、個人的にはやや大きめの修正だったので取り上げました。

タグ: css,javascript,jQuery,Sass(Scss),gulp,ejs,Github,Node.js

 



関連する記事一覧