CSSフレームワーク「Bootstarp」と「Bluma」でログイン画面を作ってみた


#作成したログイン画面
・Bootstrap
![スクリーンショット 2018-07-12 22.31.49.png](https://qiita-image-store.s3.amazonaws.com/0/158352/9ab263a7-bca3-cad8-75cd-67a2aca5c8a0.png)

・Bluma
![スクリーンショット 2018-07-12 22.31.56.png](https://qiita-image-store.s3.amazonaws.com/0/158352/82268852-5f75-2439-f88e-0d5c0a5c938e.png)

##経緯
ずっとBootstrapばかりで実装していたので、他のフレームワークを使って比較してみようと思いました。

#読み込み
- Bootstrap

```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
```
```
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
```

- Bluma

```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
```

Bootstrapはjsファイルの読み込みや、jqueryが必要ですが、BlumaはCSSのみとなります。

#nav

- Bootstrap

```
<nav class="navbar navbar-light bg-warning">
	<a class="navbar-brand" href="#">
		<img src="../img/logo.png"alt="logo" width="112" height="28">
	</a>
</nav>
```

- Bluma

```
<nav class="navbar is-warning">
	<div class="navbar-brand">
		<a class="navbar-item" href="/">
			<img src="../img/logo.png" alt="logo" width="112" height="28">
		</a>
	</div>
</nav>
```
Bootstrapの方ではdivタグに指定しているclassを、Blumaではaタグに指定できスッキリしています。


#フォーム部分

- Bootstrap

```
<form action="">
	<div class="card-header">
		<p class="card-header-title ">
			LOGIN
		</p>
	</div>
	<div class="card-content">
		<div class="field">
			<label class="label">ID</label>
			<div class="control">
				<input class="input" type="text" placeholder="test@test.com" name="email" id="email">
			</div>
		</div>
		<div class="field">
			<label class="label">PASSWORD</label>
			<div class="control">
				<input class="input" type="password" placeholder="password" name="password" id="password">
			</div>
		</div>
		<div class="column is-12">
			<a class="is-pulled-right">パスワード忘れ</a>
		</div>
	</div>
	<div class="card-footer">
		<div class="column has-text-centered">
			<button class="button is-medium is-link block is-outlined">
				LOGIN
			</button>
		</div>
	</div>
</form>
```

- Bluma

```
<form action="">
	<div class="card-header bg-transparent font-weight-bold">
		LOGIN
	</div>
	<div class="card-body">
		<div class="form-label-group">
			<label class="label">ID</label>
			<input class="input form-control" type="text" placeholder="test@test.com" name="email" id="email">
		</div>
		<div class="form-label-group">
			<label class="label">PASSWORD</label>
			<input class="form-control" type="password" placeholder="password" name="password" id="password">
			<div class="text-right mt-md-3">
				<a class="text-right mt-md-3" href="">パスワード忘れ</a>
			</div>
		</div>
		<div class="card-footer bg-transparent text-center">
			<button class="btn btn-outline-info  btn-lg">
					LOGIN
			</button>
		</div>
	</div>
</form>
```

組み方にもよるのでしょうが、Bootstrapの方がコードが長くなっています。

クラスの指定がそれぞれ固有のものを設定することになります。
普段Bootstrapを使っていることから、Blumaでも同じような機能ないかな、と調べてみるとあったりするので、今回のような簡単なフォーム画面を作成するくらいなら、大体同じ感覚で組める感じです。

Bootstrapのライブラリは豊富ですが、そういうものをBlumaで実現しようとしたときに存在するのかな？というのは、更に調査必要そうです。

#結論
簡単な画面では、組むのにそれほど差がない。
個人的にはデフォルトのカラーはBlumaのほうが好み。
もう少し複雑な画面を作ったら、また投稿します。