WESEEK Tips wiki
WESEEK Tips wiki
helpdelete

GROWI における Bootstrap

GROWI は Bootstrap 3 をベースにプレミアムテンプレートである Agile Admin 1 を適応していた。
Bootstrap 4 リリースに伴い Agile Admin を廃止することを決定。
2020 年 1 月 25 日現在トピックブランチ support/apply-bootstrap42 にて Bootstrap 4 化を進行している。

方針

  • Bootstrap 3 の拡張だった Agile Admin は外す
  • まずプレーンな Bootstrap 4 のコードで大きな崩れがないようにコーディング
  • SCSS で Agile Admin に寄せたデザインに変更
  • react-bootstrap は廃止、state管理を要するコンポーネントは reactstrap を使用する
  • 共通の部品が多いため、変更箇所を/開発日記/bootstrap4化/汎用的な変更点 external_linkに追加していく。
    • 追加された部品は、追加した人がデザイン調整済みと認識し、それ以外の人はスタイル調整しないようにする
  • 汎用的な変数は _override-bootstrap-variables.scss で設定する
  • bootstrap 4 で使われてるマジックナンバー3があればそれを優先して使用する

Footnotes

  1. フラットなデザインのプレミアム管理ダッシュボードテンプレート https://wrapbootstrap.com/theme/agile-admin-dashboard-and-admin-site-WB0HT11J2 external_link ↩

  2. https://github.com/weseek/growi/tree/support/apply-bootstrap4 external_link ↩

  3. https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss external_link ↩