index.html

---
layout: default
route: index
---

<section class="hero is-medium has-text-centered">
  <div class="hero-head">
    <div class="container">
      {% include header.html %}
    </div>
  </div>

  <div class="hero-body">
    <div class="container">
      <p id="b">
        {% include svg/bulma-icon.svg %}
        {% include svg/bulma-icon.svg %}
      </p>
      <h1 id="bulma" class="title">
        Bulma
      </h1>
      <h2 id="modern-framework" class="subtitle">
        A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong>
      </h2>
      <pre id="npm"><code>npm install bulma</code></pre>
      <div id="ghbtns" class="block">
        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
      </div>
      {% include carbon.html %}
      <p id="download" class="hero-buttons">
        <a class="button is-primary is-large" href="{{ site.download }}">
          <span class="icon">
            <i class="fa fa-download"></i>
          </span>
          <span>Download</span>
          <small>v{{ site.version }}</small>
        </a>
        <a class="button is-large" href="{{ site.documentation }}">
          View docs
        </a>
      </p>
    </div>
  </div>
</section>

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <nav class="columns">
        <a class="column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
          <span class="icon is-large" style="margin-right: -15px;">
            <i class="fa fa-mobile"></i>
          </span>
          <span class="icon is-large">
            <i class="fa fa-tablet"></i>
          </span>
          <span class="icon is-large" style="margin-right: 10px;">
            <i class="fa fa-desktop"></i>
          </span>
          <p class="title is-4"><strong>Responsive</strong></p>
          <p class="subtitle">Designed for <strong>mobile</strong>-first</p>
        </a>
        <a class="column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
          <span class="icon is-large">
            <i class="fa fa-cubes"></i>
          </span>
          <p class="title is-4"><strong>Modular</strong></p>
          <p class="subtitle">Just import what you <strong>need</strong></p>
        </a>
        <a class="column has-text-centered" href="{{ site.url }}/documentation/grid/columns/">
          <span class="icon is-large">
            <i class="fa fa-css3"></i>
          </span>
          <p class="title is-4"><strong>Modern</strong></p>
          <p class="subtitle">Built with <strong>Flexbox</strong></p>
        </a>
        <a class="column has-text-centered" href="{{ site.github }}">
          <span class="icon is-large">
            <i class="fa fa-github"></i>
          </span>
          <p class="title is-4"><strong>Free</strong></p>
          <p class="subtitle">Open source on <strong>GitHub</strong></p>
        </a>
      </nav>
    </div>
  </div>
</section>

<section class="section is-medium">
  <div class="container">
    <h3 class="title is-2">
      <a href="{{ site.url }}/documentation/grid/columns">
        <span class="icon is-medium">
          <i class="fa fa-pause"></i>
        </span>
        Simple <strong>columns</strong>
      </a>
    </h3>
    <h4 class="subtitle is-4">Just add columns, they will resize themselves</h4>
    <div id="grid" class="columns">
      <div class="column">
        <div class="notification is-primary has-text-centered">
          <p class="title">1</p>
        </div>
      </div>
      <div class="column">
        <div class="notification is-info has-text-centered">
          <p class="title">2</p>
        </div>
      </div>
      <div class="column">
        <div class="notification is-success has-text-centered">
          <p class="title">3</p>
        </div>
      </div>
      <div class="column">
        <div class="notification is-warning has-text-centered">
          <p class="title">4</p>
        </div>
      </div>
      <div class="column">
        <div class="notification is-danger has-text-centered">
          <p class="title">5</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-primary has-text-centered">
          <p class="title">6</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-info has-text-centered">
          <p class="title">7</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-success has-text-centered">
          <p class="title">8</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-warning has-text-centered">
          <p class="title">9</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-danger has-text-centered">
          <p class="title">10</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-primary has-text-centered">
          <p class="title">11</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-info has-text-centered">
          <p class="title">12</p>
        </div>
      </div>
    </div>
    <div class="field has-addons has-addons-centered">
      <p class="control">
        <a id="add" class="button is-unselectable">Add column</a>
      </p>
      <p class="control">
        <a id="remove" class="button is-unselectable">Remove column</a>
      </p>
    </div>
    <div id="message" class="message is-info">
      <p class="message-header">Info</p>
      <p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
      If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
    </div>
    <div id="markup">
{% highlight html %}
<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>
{% endhighlight %}
    </div>
  </div>
</section>

<hr class="is-marginless">

<section class="section is-medium">
  <div class="container">
    <h3 class="title is-2">
      <a href="{{ site.url }}/documentation/grid/tiles">
        <span class="icon is-medium">
          <i class="fa fa-th-large"></i>
        </span>
        Magic <strong>tiles</strong>
      </a>
    </h3>
    <h4 class="subtitle is-4">A single element for a Metro UI CSS grid</h4>
    <div class="tile is-ancestor">
      <div class="tile is-vertical is-8">
        <div class="tile">
          <div class="tile is-parent is-vertical">
            <article class="tile is-child notification is-primary">
              <p class="title">Vertical...</p>
              <p class="subtitle">Top tile</p>
            </article>
            <article class="tile is-child notification is-warning">
              <p class="title">...tiles</p>
              <p class="subtitle">Bottom tile</p>
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child notification is-info">
              <p class="title">Middle tile</p>
              <p class="subtitle">With an image</p>
              <figure class="image is-4by3">
                <img src="{{site.url}}/images/placeholders/640x480.png">
              </figure>
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child notification is-danger">
            <p class="title">Wide tile</p>
            <p class="subtitle">Aligned with the right tile</p>
            <div class="content">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
            </div>
          </article>
        </div>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child notification is-success">
          <p class="title">Tall tile</p>
          <p class="subtitle">With even more content</p>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
            <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
            <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
          </div>
        </article>
      </div>
    </div>
{% highlight html %}
<div class="tile is-ancestor">
  <div class="tile is-vertical is-8">
    <div class="tile">
      <div class="tile is-parent is-vertical">
        <article class="tile is-child">
          <!-- Any content you want here -->
        </article>
        <article class="tile is-child">
          <!-- Any content you want here -->
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child">
          <!-- Any content you want here -->
        </article>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child">
        <!-- Any content you want here -->
      </article>
    </div>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child">
      <!-- Any content you want here -->
    </article>
  </div>
</div>
{% endhighlight %}
  </div>
</section>

<hr class="is-marginless">

<section class="section is-medium">
  <div class="container">
    <h3 class="title is-2">
      <a href="{{ site.url }}/documentation/components/level/">
        <span class="icon is-medium">
          <i class="fa fa-arrows-h"></i>
        </span>
        Flexible <strong>horizontal level</strong>
      </a>
    </h3>
    <h4 class="subtitle is-4">Include any type of element, they will remain vertically centered</h4>
    <nav class="level">
      <div class="level-left">
        <div class="level-item">
          <p class="title is-4">
            <strong>123</strong> posts
          </p>
        </div>
        <p class="level-item">
          <a class="button is-primary">
            New
          </a>
        </p>
        <div class="level-item">
          <div class="field has-addons">
            <p class="control">
              <input class="input" type="text" placeholder="Filter">
            </p>
            <p class="control">
              <button class="button">
                Search
              </button>
            </p>
          </div>
        </div>
      </div>
      <div class="level-right">
        <div class="level-item">
          Show:
        </div>
        <p class="level-item">
          <strong>All</strong>
        </p>
        <p class="level-item">
          <a href="#">Published</a>
        </p>
        <p class="level-item">
          <a href="#">Drafts</a>
        </p>
        <div class="level-item">
          Sort:
        </div>
        <div class="level-item">
          <span class="select">
            <select>
              <option>Date created</option>
            </select>
          </span>
        </div>
      </div>
    </nav>
  </div>
</section>

<hr class="is-marginless">

<section class="section is-medium">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <h3 class="title is-2">
          <a href="{{ site.url }}/documentation/components/media-object/">
            <span class="icon is-medium">
              <i class="fa fa-magic"></i>
            </span>
            Versatile <strong>media object</strong>
          </a>
        </h3>
        <h4 class="subtitle is-4">A simple block with an image that will solve 90% of your UI problems</h4>
      </div>

      <div class="column">
        <div class="box">
          <article class="media">
            <div class="media-left">
              <figure class="image is-64x64">
                <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
              </figure>
            </div>
            <div class="media-content">
              <div class="content">
                <p>
                  <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
                  <br>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
                </p>
              </div>
              <nav class="level is-mobile">
                <div class="level-left">
                  <a class="level-item">
                    <span class="icon is-small"><i class="fa fa-reply"></i></span>
                  </a>
                  <a class="level-item">
                    <span class="icon is-small"><i class="fa fa-retweet"></i></span>
                  </a>
                  <a class="level-item">
                    <span class="icon is-small"><i class="fa fa-heart"></i></span>
                  </a>
                </div>
              </nav>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="hero is-fullheight is-primary">
  <div class="hero-head">
    <div class="container">
      <div class="tabs is-centered">
        <ul>
          <li><a>This is always at the top</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="hero-body">
    <div class="container has-text-centered">
      <h3 class="title is-2">
        <a href="{{ site.url }}/documentation/layout/hero/">
          <span class="icon is-medium">
            <i class="fa fa-arrows-v"></i>
          </span>
          Easy <strong>vertical centering</strong> in <strong>fullscreen</strong>
        </a>
      </h3>
      <h4 class="subtitle is-4">Include any content you want, it's always centered</h4>
    </div>
  </div>

  <div class="hero-foot">
    <div class="container">
      <div class="tabs is-centered">
        <ul>
          <li><a>And this at the bottom</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="section is-medium">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <h3 class="title is-2">
          <a href="{{ site.url }}/documentation/modifiers/syntax/">
            <span class="icon is-medium">
              <i class="fa fa-cogs"></i>
            </span>
            Compose your element with <strong>modifier</strong> classes
          </a>
        </h3>
        <h4 class="subtitle is-4">Add and combine <code>is-*</code> CSS classes to quickly alter styles</h4>
      </div>
      <div class="column">
        <div class="block">
          <div class="field">
            <p class="control">
              <code>button</code>
            </p>
          </div>
          <a class="button">Button</a>
        </div>
        <div class="block">
          <div class="field">
            <p class="control">
              <code>button is-primary</code>
            </p>
          </div>
          <a class="button is-primary">Button</a>
        </div>
        <div class="block">
          <div class="field">
            <p class="control">
              <code>button is-primary is-large</code>
            </p>
          </div>
          <a class="button is-primary is-large">Button</a>
        </div>
        <div class="block">
          <div class="field">
            <p class="control">
              <code>button is-primary is-large is-loading</code>
            </p>
          </div>
          <a class="button is-primary is-large is-loading">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>

<hr class="is-marginless">

<section class="section is-medium">
  <div class="container">
    <h3 class="title is-2">
      <a href="{{ site.url }}/documentation/elements/box/">
        <span class="icon is-medium">
          <i class="fa fa-asterisk"></i>
        </span>
        And all the usual <strong>elements</strong>
      </a>
    </h3>
    <h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4>

    <div class="columns">
      <div class="column is-one-third">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
                </figure>
              </div>
              <div class="media-content">
                <p class="title is-4">Card</p>
                <p class="subtitle is-6">Subtitle</p>
              </div>
            </div>

            <div class="content">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
              <br>
              <small>11:09 PM - 1 Jan 2016</small>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <p class="title">Title</p>
        <p class="subtitle">Subtitle</p>
        <div class="field is-grouped">
          <p class="control">
            <span class="select">
              <select>
                <option>Dropdown</option>
              </select>
            </span>
          </p>
          <p class="control is-expanded">
            <input class="input" type="text" placeholder="Text input">
          </p>
        </div>
        <div class="field">
          <p class="control">
            <label class="checkbox">
              <input type="checkbox">
              Checkbox
            </label>
          </p>
        </div>
        <div class="field">
          <p class="control">
            <label class="radio">
              <input type="radio" name="question">
              Radio
            </label>
            <label class="radio">
              <input type="radio" name="question">
              Buttons
            </label>
          </p>
        </div>
        <div class="field">
          <p class="control">
            <a class="button is-primary">Button</a>
          </p>
        </div>
        <div class="tabs is-boxed">
          <ul>
            <li class="is-active">
              <a>
                <span class="icon is-small"><i class="fa fa-inbox"></i></span>
                <span>Inbox</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-user"></i></span>
                <span>Profile</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-comments-o"></i></span>
                <span>Comments</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-cog"></i></span>
                <span>Settings</span>
              </a>
            </li>
          </ul>
        </div>
        <p class="block">
          <span class="tag is-dark">Tag<a class="delete is-small"></a></span>
          <span class="tag is-info">Two<a class="delete is-small"></a></span>
          <span class="tag is-danger">Three<a class="delete is-small"></a></span>
        </p>
        <div class="message is-warning">
          <div class="message-header">
            Hello world
          </div>
          <div class="message-body">
            Message
          </div>
        </div>
        <div class="notification is-success">
          <a class="delete"></a>
          Success!
        </div>
      </div>
    </div>
  </div>
</section>

<hr class="is-marginless">

<section class="section is-medium">
  <div class="container">
    <p class="title has-text-centered">Get started</p>
    <div class="hero-buttons">
      <a class="button is-info is-large" href="{{ site.documentation }}">
        <span class="icon">
          <i class="fa fa-book"></i>
        </span>
        <span>Check the <strong>Docs</strong></span>
      </a>
      <a class="button is-black is-large" href="{{ site.github }}">
        <span class="icon">
          <i class="fa fa-github"></i>
        </span>
        <span>Contribute</span>
      </a>
    </div>
  </div>
</section>