HxUI - A health care focused UI Library

Let's start simple

      
<p>To build a grid, just:
<ol>
  <li>Add a <code>hx-columns</code> container</li>
  <li>Add as many <code>hx-column</code> elements as you want</li>
</ol>
<p>Each column will have an equal width, no matter the number of columns.</p>
<br>
<div class="hx-columns">
  <div class="hx-column has-text-centered">
    <p class="hx-bg-primary pa-5">First column</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-primary pa-5">Second column</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-primary pa-5">Third column</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-primary pa-5">Fourth column</p>
  </div>
</div>

To build a grid, just:

Add a hx-columns container
Add as many hx-column elements as you want

Each column will have an equal width, no matter the number of columns.

First column

Second column

Third column

Fourth column

Column sizes

      
<p>If you want to change the size of a single column, you can use one the following classes:</p>
<ul>
  <li><code>is-three-quarters</code></li>
  <li><code>is-two-thirds</code></li>
  <li><code>is-half</code></li>
  <li><code>is-one-third</code></li>
  <li><code>is-one-quarter</code></li>
</ul>
<p>The other columns will fill up the remaining space automatically.</p>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-three-quarters">
    <p class="hx-bg-primary pa-5">.is-three-quarters</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-two-thirds">
    <p class="hx-bg-primary pa-5">.is-two-thirds</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-half">
    <p class="hx-bg-primary pa-5">.is-half</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-one-third">
    <p class="hx-bg-primary pa-5">.is-one-third</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-one-quarter">
    <p class="hx-bg-primary pa-5">.is-one-quarter</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Auto</p>
  </div>
</div>

If you want to change the size of a single column, you can use one the following classes:

is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter

The other columns will fill up the remaining space automatically.

.is-three-quarters

Auto

.is-two-thirds

Auto

.is-half

Auto

.is-one-third

Auto

.is-one-quarter

Auto

12 columns

      
<p>As the grid can be divided into <strong>12 columns</strong>, there are size classes for each division:</p>
<ul>
  <li><code>is-1</code></li>
  <li><code>is-2</code></li>
  <li><code>is-3</code></li>
  <li><code>is-4</code></li>
  <li><code>is-5</code></li>
  <li><code>is-6</code></li>
  <li><code>is-7</code></li>
  <li><code>is-8</code></li>
  <li><code>is-9</code></li>
  <li><code>is-10</code></li>
  <li><code>is-11</code></li>
</ul>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-2">
    <p class="hx-bg-primary pa-5">.is-2</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-3">
    <p class="hx-bg-primary pa-5">.is-3</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-4">
    <p class="hx-bg-primary pa-5">.is-4</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-5">
    <p class="hx-bg-primary pa-5">.is-5</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-6">
    <p class="hx-bg-primary pa-5">.is-6</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-7">
    <p class="hx-bg-primary pa-5">.is-7</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-8">
    <p class="hx-bg-primary pa-5">.is-8</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-9">
    <p class="hx-bg-primary pa-5">.is-9</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-10">
    <p class="hx-bg-primary pa-5">.is-10</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column has-text-centered is-11">
    <p class="hx-bg-primary pa-5">.is-11</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">1</p>
  </div>
</div>

As the grid can be divided into 12 columns, there are size classes for each division:

is-1
is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11

.is-2

1

.is-3

1

.is-4

1

.is-5

1

.is-6

1

.is-7

1

.is-8

1

.is-9

1

.is-10

1

.is-11

1

Offsetting columns

      
<p>While you can use empty columns (like <code>&lt;div class="hx-column"&gt;&lt;/div&gt;</code>)
  to create horizontal space around <code>.hx-column</code> elements, you can also use
  <strong>offset modifiers</strong> like <code>.is-offset-x</code>:</p>
<br />
<div class="hx-columns">
  <div class="hx-column is-half is-offset-one-quarter">
    <p class="hx-bg-primary pa-5">.is-half .is-offset-one-quarter</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column is-3 is-offset-7">
    <p class="hx-bg-primary pa-5">.is-3 .is-offset-7</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column is-5 is-offset-2">
    <p class="hx-bg-primary pa-5">.is-5 .is-offset-2</p>
  </div>
</div>
<div class="hx-columns">
  <div class="hx-column is-11 is-offset-1">
    <p class="hx-bg-primary pa-5">.is-11 .is-offset-1</p>
  </div>
</div>

While you can use empty columns (like <div class="hx-column"></div>) to create horizontal space around .hx-column elements, you can also use offset modifiers like .is-offset-x:

.is-half .is-offset-one-quarter

.is-3 .is-offset-7

.is-5 .is-offset-2

.is-11 .is-offset-1

Nesting columns

      
<p>You can <strong>nest columns</strong> to have more flexibility in your design.
  You only need to follow this structure:</p>
<ul>
  <li><code>.hx-columns</code> Top-level (First level) columns container</li>
  <ul>
  <li><code>.hx-column</code> A column for the First level columns</li>
    <ul>
      <li><code>.hx-columns</code> Nested columns (Second level) columns container</li>
      <ul>
        <li><code>.hx-column</code> A column for the Second level columns</li>
      </ul>
    </ul>
  </ul>
</ul>
<div class="hx-columns">
  <div class="hx-column has-text-centered">
    <p class="hx-bg-primary pa-5">1st level - First column</p>
    <div class="hx-columns">
      <div class="hx-column has-text-centered">
        <p class="hx-bg-warning pa-5">2nd level - Nested column</p>
      </div>
      <div class="hx-column has-text-centered">
        <p class="hx-bg-warning pa-5">2nd level - Nested column</p>
      </div>
    </div>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-primary pa-5">1st level - Second column</p>
    <div class="hx-columns">
      <div class="hx-column has-text-centered">
        <p class="hx-bg-warning pa-5">2nd level</p>
      </div>
      <div class="hx-column has-text-centered">
        <div class="hx-columns">
          <div class="hx-column has-text-centered">
            <p class="hx-bg-danger pa-5">3rd level</p>
          </div>
          <div class="hx-column has-text-centered">
            <p class="hx-bg-danger pa-5">3rd level</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

You can nest columns to have more flexibility in your design. You only need to follow this structure:

.hx-columns Top-level (First level) columns container

.hx-column A column for the First level columns

.hx-columns Nested columns (Second level) columns container

.hx-column A column for the Second level columns

1st level - First column

2nd level - Nested column

1st level - Second column

2nd level

3rd level

Gapless columns

      
<p>If you want to <strong>remove the space between the columns</strong>, add the
  <code>is-gapless</code> modifier on the columns container:</p>
<div class="hx-columns is-gapless">
  <div class="hx-column has-text-centered">
    <p class="hx-bg-primary pa-5">First column</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-warning pa-5">Second column</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-info pa-5">Third column</p>
  </div>
  <div class="hx-column has-text-centered">
    <p class="hx-bg-danger pa-5">Fourth column</p>
  </div>
</div>
<br />
<p>You can even combine it with <strong>nested columns</strong>:</p>
<div class="hx-columns is-gapless">
  <div class="hx-column has-text-centered">
    <p class="hx-bg-primary pa-5">1st level - First column</p>
    <div class="hx-columns is-gapless">
      <div class="hx-column has-text-centered">
        <p class="hx-bg-warning pa-5">2nd level - Nested column</p>
      </div>
      <div class="hx-column has-text-centered">
        <p class="hx-bg-danger pa-5">2nd level - Nested column</p>
      </div>
    </div>
  </div>
</div>

If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

First column

Second column

Third column

Fourth column

You can even combine it with nested columns:

1st level - First column

2nd level - Nested column

Columns responsiveness

      
<div class="hx-alert is-inverse">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    Resize your browser and see when the columns are stacked and when they are horizontally distributed.
  </span>
</div>

<h5 class="mb-2">Mobile columns</h5>
<p>By default, columns are only activated from <strong>tablet</strong> onwards. Columns will be stacked on top of each other when displayed on <strong>mobile</strong>. If you want columns to work on mobile, simply just add the <code>is-mobile</code> modifier on the columns container.</p>
<div class="hx-columns is-mobile">
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">1</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">2</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">3</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">4</div>
    </div>
  </div>
</div>

<h5 class="mb-2">Desktop columns</h5>
<p>If you only want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the columns container.</p>
<div class="hx-columns is-desktop">
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">1</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">2</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">3</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">4</div>
    </div>
  </div>
</div>

Resize your browser and see when the columns are stacked and when they are horizontally distributed.

Mobile columns

By default, columns are only activated from tablet onwards. Columns will be stacked on top of each other when displayed on mobile. If you want columns to work on mobile, simply just add the is-mobile modifier on the columns container.

1

2

3

4

Desktop columns

If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container.

1

2

3

4

Different column sizes per breakpoint

      
<div class="hx-alert is-inverse">
  <span class="hx-icon-control mr-2">
    <i class="hx-icon is-medium icon-information"></i>
  </span>
  <span class="hx-flex-1">
    Resize your browser and see when the columns are stacked and when they are horizontally distributed.
  </span>
</div>

<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: <strong>mobile</strong>, <strong>tablet</strong>, and <strong>desktop</strong>.</p>
<div class="hx-columns is-mobile">
  <div class="hx-column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">
        <code>is-three-quarters-mobile</code><br />
        <code>is-two-thirds-tablet</code><br />
        <code>is-half-desktop</code><br />
        <code>is-one-third-widescreen</code><br />
        <code>is-one-quarter-fullhd</code>
      </div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">1</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">1</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">1</div>
    </div>
  </div>
  <div class="hx-column">
    <div class="hx-card hx-bg-teal lighten-5">
      <div class="hx-card-content has-text-centered">1</div>
    </div>
  </div>
</div>

Resize your browser and see when the columns are stacked and when they are horizontally distributed.

You can define a column size for each viewport size: mobile, tablet, and desktop.

is-three-quarters-mobile
is-two-thirds-tablet
is-half-desktop
is-one-third-widescreen
is-one-quarter-fullhd

1

Grid

A simple way to build responsive columns

Let's start simple

Column sizes

12 columns

Offsetting columns

Nesting columns

Gapless columns

Columns responsiveness

Mobile columns

Desktop columns

Different column sizes per breakpoint