Bulmaを使ってみました

Bulmaを使ってみました

12月 16, 2018

＊Bulma とは

レスポンシブなCSSフレームワークです。
Bootstrapよりも軽量で、jQueryなどのjavascriptがなくてもCSSだけで動かすことができます。

＊参考


＊環境

  • MacOS
  • bulma 0.7.2

＊使い方

Bulma使う方法は3つありまして、npmコマンドを使ってインストール、公式サイトからダウンロード、CDNの使用、をすることで使うことができます。
今回はCDNを使ってコードに記述する方法で使ってみました。
公式ドキュメントにサンプルがたくさんのっているので、コピペするだけで実際に使えるようになっています。

公式ドキュメントに載っているサンプルを試してみます。
  • Hello Bulma
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>









  • Button
<div href="#" class="button is-success is-large">HELLO!</div>




  • Card
<div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Title
    </p>
    <a href="#" class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </a>
  </header>
  <div class="card-content">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>






  • Navber
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">Documentation</a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">More</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">About</a>
          <a class="navbar-item">Jobs</a>
          <a class="navbar-item">Contact</a>
          <hr class="navbar-divider">
          <a class="navbar-item">Report an issue</a>
        </div>
      </div>
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">Log in</a>
        </div>
      </div>
    </div>
  </div>
</nav>




  • Tab
<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>





クラスにis-boxedを追加することもできます。
<div class="tabs is-boxed">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>





クラスにis-toggleを追加すると下記のようなレイアウトになります。





  • Menu
<nav class="panel">
  <p class="panel-heading">
    repositories
  </p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input is-small" type="text" placeholder="search">
      <span class="icon is-small is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <p class="panel-tabs">
    <a class="is-active">all</a>
    <a>public</a>
    <a>private</a>
    <a>sources</a>
    <a>forks</a>
  </p>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-code-branch" aria-hidden="true"></i>
    </span>
    daniellowtw/infboard
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-code-branch" aria-hidden="true"></i>
    </span>
    mojs
  </a>
  <label class="panel-block">
    <input type="checkbox">
    remember me
  </label>
  <div class="panel-block">
    <button class="button is-link is-outlined is-fullwidth">
      reset all filters
    </button>
  </div>
</nav>













＊所感

影や色など自分でカスタマイズすることもできるので、使いやすいと感じました。また、公式ドキュメントにもサンプルがたくさん載っているので、コピペするだけで動きを確認できる点も便利でした。機会があったら実際に使ってみようと思います。



Next
« Prev Post
Previous
Next Post »
登録: コメントの投稿 (Atom)

人気の投稿

  • Docker + MySQLで開発環境用DBの作成
    開発環境のテストを自動化するため、ローカルでDBの初期データを入れたり破棄したりできるDockerを使ってMySQLの環境を作成してみました。 シェルを使ったりする方法もありましたが、今回はdocker-composeを使う方法にしました。 ＊環境 MacO...
  • gcloudコマンド一覧（自分用）
    自分用によく使うgcloudコマンドをまとめておきます。 ログイン gcloud init gcloud auth login プロジェクト一覧をする gcloud projects list アカウントを確認する gcloud auth list ...
  • Pytestの使い方
    ＊Pytestとは Pythonで書かれたテストライブラリです。 https://docs.pytest.org/en/latest/ 他にunittestなどもありますが、他のライブラリよりも失敗時のエラー表示が詳細で見やすかったり、実行時のコマンドにオプション...
  • Python + Flaskを使ったWebアプリ作成①（環境構築〜画面追加編）
    Pythonのフレームワークのひとつである Flask を使って、ブログのWebアプリケーションを作成してみました。今回の記事では「環境構築からテンプレートを使った画面の作成」までの手順です。 ＊目次 仮想環境の作成 Flaskのインストール Webサーバ...
  • Tabulator を使ってみました
    ＊Tabulator とは インタラクティブなテーブルを作成する際に便利な Javascript ライブラリで、多機能のテーブルを簡単に作成することができます。 HTMLテーブルを Tabulator に変換して表示する方法と、JSONデータを読み込んで表示する方法...
  • Python + Flask を使ったWebアプリ作成④（ログイン認証編）
    続きです。 今回はログイン認証の実装をします。 ＊参考 flask-bcrypt /公式ドキュメント flask-login /公式ドキュメント ＊環境 MacOS Python 3.6.3 Flask 1.0.2...
  • Vue.js + Chart.js でグラフを作成してみました
    Javascript のフレームワークである Vue.js でグラフを作成したいと思ってたところ、vue-chartjs という便利なライブラリがあるようだったので、実際に使って試してみました。 ＊今回作成するもの ＊参考...
  • Kerasを使って予測モデルを作成してみました
    ＊Keras とは TensorFlowやTheano上で動く、Pythonの深層学習ライブラリです。 Kerasは簡単に素早くプロトタイプを作成することを目的に作られたライブラリで、文章の自動生成や画像認識、botの作成などといったディープラーニングを簡単に実装するこ...
  • PythonでWordCloudを作成してみました
    PyLadies Advent Calendar 2018 の3日目の記事です。 Pythonで Word Cloud を使ってみたことを書きました。 ＊Word Cloud とは 文章データを可視化する手法のひとつで、文章のなかで出現頻度が高い文字を大きく...
  • Python + Flask を使ったWebアプリ作成③（DB接続〜パッケージ構成修正編）
    続きです。 SQLAlchemy を使ったDB接続処理と、パッケージ構成の修正をします。 ＊参考 Python Flask Tutorial: Full-Featured Web App Part 4 - Database with Flask-SQ...