作成したログイン画面

・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のほうが好み。
もう少し複雑な画面を作ったら、また投稿します。

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

作成したログイン画面

経緯

読み込み

nav

フォーム部分

結論