Bootstrapを使ってデザインする

Bootstrapとは？

デザインを簡単にできるフレームワーク！
CSSにこだわる時間を省きたいときに使うと便利。
カスタムもできるため、好みにも変えられる。

公式ドキュメント：

インストール方法

1.公式ドキュメントのダウンロードページを参照する。

　今回はPHPで実装するため、composerを使ってrequireする。

Docker

   docker-compose exec app composer require twbs/bootstrap:5.3.0

2.エディタに戻り、vendor/twds/bootstrapがあることを確認。

　詳しいファイル構成は公式ドキュメントのコンテンツを確認。↓

こうなっているみたい。（自分のエディタでも確認。）

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──content/
│      └── docs/
│          └── 5.3/
│              └── examples/
├── js/
└── scss

3.Bootstrapを適用させたいファイルに以下のコードを追記。

<link rel="stylesheet" href="../vendor/twbs/bootstrap/dist/css/bootstrap.css">

4.ページをリロードするとBootstrapが適用されている！

Sassを使ってBootstrapをカスタマイズする

1.Sassをインストール

公式ドキュメント：

今回はComposerを使ってインストールしたい。
しかし、公式ドキュメントにはComposerを使ったインストール方法がない...

GitHubで"php scss"と調べる！
SCSSのコンパイラーを見つける。↓

インストール方法を調べる。↓

Dockerでrequireする。

Docker

docker-compose exec app composer require scssphp/scssphp

エディタに戻り、vendorの下にscssphpが入っているか確認。

2.BootstrapをSassでカスタマイズする

公式ドキュメントで確認。↓

方法としては、新しくファイルを用意し、インポートする。
→インポート定義の前に新しく変数定義して（カスタマイズ定義）上書きとなる。
みたいなので、まずは 新しいファイル を作成。

私はsrc/companies/ stylesheets/scs/app.scss を作成しました。

app.scssに、以下を追記。

SCSS

@import '/var/www/html/vendor/twbs/bootstrap/scss/bootstrap';

3.カスタマイズしたSassをCSSにコンパイルする

公式ドキュメントを確認。

↓該当箇所

一旦appコンテナに入り、

Docker

docker-compose exec app /bin/bash

公式ドキュメント通りに、自分のコンパイルしたいファイルへコンパイルする。

Docker

vendor/scssphp/scssphp/bin/pscss < companies/stylesheets/scss/app.scss

Bootstrapのscssファイルを読み込んで、CSSに変換されたものがコマンドに表示されたらOK!

今はターミナルに出力されているため、ファイルに置き換えて保存する。
ファイル名 （> companies/stylesheets/css/app.css） を付け足してコマンドを実行！

Docker

vendor/scssphp/scssphp/bin/pscss < companies/stylesheets/scss/app.scss > companies/stylesheets/css/app.css

4.コンパイルしたCSSをHTMLで読み込む

該当ファイルのhref=を変更する。

<link rel="stylesheet" href="stylesheets/css/app.css">

完了！