私的おすすめcssフレームワーク「Bulma」その2

CSSフレームワーク「bulma」

前回に引き続き、Bulmaの魅力を紹介します!

公式サイト:https://bulma.io/
公式ドキュメント:https://bulma.io/documentation/overview/start/

レスポンシブ

Bulmaはレスポンシブ対応のCSSフレームワークです。
何も考えずに、組んでいってもモバイルに最適化されたデザインが出来上がります。

もちろん独自カスタマイズもできます。
Bulmaをダウンロードすると、sassファイルが付属しており、sass/utilities/initial-variables.sass に各変数が記述されています。

各ブレイクポイント

  • mobile: up to 768px
  • tablet: from 769px
  • desktop: from 1024px
  • widescreen: from 1216px
  • fullhd: from 1408px

Bulma-レスポンシブ_ブレークポイント:https://bulma.io/documentation/overview/responsiveness/

ヒーローセクション

今流行りのレイアウトですね。
Bulmaではhero、hero-body、titleなどのタグを書くだけで、簡単にヒーローセクションを作れます。

コード

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary title
      </h1>
      <h2 class="subtitle">
        Primary subtitle
      </h2>
    </div>
  </div>
</section>

 

結果

カード

これも今流行りのレイアウトですね。
この「とんよー。ブログ」のブログ記事の一覧表示もこのカードで組まれています。
2018/05時点でブログのテーマを「SANGO」に変えました!

今風でとてもかっこいいレイアウトを簡単に作れます!

コード

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>

    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Phasellus nec iaculis mauris. <a>@bulmaio</a>.
      <a href="#">#css</a> <a href="#">#responsive</a>
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
</div>

結果

フォーム

サイトを作る際に、何かと面倒なのがフォームです。
でもご心配なく。Bulmaには、<input>から<select>まできれいなデザインが揃っています。

以下はメール、パスワード、ボタンのコード例です。

コード

<div class="field">
  <p class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Email">
    <span class="icon is-small is-left"> <i class="fas fa-envelope"></i> </span>
    <span class="icon is-small is-right"> <i class="fas fa-check"></i> </span>
  </p>
</div>
<div class="field">
  <p class="control has-icons-left">
    <input class="input" type="password" placeholder="Password">
    <span class="icon is-small is-left"> <i class="fas fa-lock"></i> </span>
  </p>
</div>
<div class="field">
  <p class="control">
  <button class="button is-success"> Login </button>
  </p>
</div>

結果

Bulmaいいよ!Bulma

Bulmaには、この他にも「メディアオブジェクト」「タイルレイアウト」などのデザインも簡単に生成できるように組まれています。

学習コストも導入コストも少ないBulma。
サイト制作に使ってみてはいかがでしょうか。


知っておくと少し幸せになれるBulmaを使い方6選
さらに知っておくと少し幸せになれるBulmaを使い方+5選
という記事も書いてみました。
実際にBulmaを使っている方にはこの記事をオススメします。

Adobe XDでBulmaのUIキットを作りました【無料配布】

Bulma好きが高じて、Adobe XDでBulmaのUIキットを作ってしまいました。
無料で配布しますので、ぜひ使ってみてくださいませ!
ファイルは下記のページよりダウンロードできます。
※ダウンロード前にページ内の「注意事項」をお読みください。

Adobe XDでBulmaのUIキットを作りました!