#作成したログイン画面
・Bootstrap
・Bluma
##経緯
ずっと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のほうが好み。
もう少し複雑な画面を作ったら、また投稿します。