Hakumi :: Rails ViewComponents

Basic Grid

From the stack to the horizontal arrangement.

col-24

col-12

col-8

col-6

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true)) do %>
  <%= render(Hakumi::Grid::Row::Component.new) do %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 24)) { content_tag(:div, "col-24", style: "background: #0092ff; padding: 16px 0; text-align: center; color: #fff;") } %>
  <% end %>
  <%= render(Hakumi::Grid::Row::Component.new) do %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 12)) { content_tag(:div, "col-12", style: "background: #0092ff; padding: 16px 0; text-align: center; color: #fff;") } %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 12)) { content_tag(:div, "col-12", style: "background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;") } %>
  <% end %>
  <%= render(Hakumi::Grid::Row::Component.new) do %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 8)) { content_tag(:div, "col-8", style: "background: #0092ff; padding: 16px 0; text-align: center; color: #fff;") } %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 8)) { content_tag(:div, "col-8", style: "background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;") } %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 8)) { content_tag(:div, "col-8", style: "background: #0092ff; padding: 16px 0; text-align: center; color: #fff;") } %>
  <% end %>
  <%= render(Hakumi::Grid::Row::Component.new) do %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6)) { content_tag(:div, "col-6", style: "background: #0092ff; padding: 16px 0; text-align: center; color: #fff;") } %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6)) { content_tag(:div, "col-6", style: "background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;") } %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6)) { content_tag(:div, "col-6", style: "background: #0092ff; padding: 16px 0; text-align: center; color: #fff;") } %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6)) { content_tag(:div, "col-6", style: "background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;") } %>
  <% end %>
<% end %>

Grid Gutter

You can use the gutter property of Row as grid spacing.

col-6

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true)) do %>
  <%= render(Hakumi::Grid::Row::Component.new(gutter: 16)) do %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6)) do %>
      <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">col-6</div>
    <% end %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6)) do %>
      <div style="background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;">col-6</div>
    <% end %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6)) do %>
      <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">col-6</div>
    <% end %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6)) do %>
      <div style="background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;">col-6</div>
    <% end %>
  <% end %>

  <%= render(Hakumi::Grid::Row::Component.new(gutter: [16, 24])) do %>
    <% 8.times do %>
      <%= render(Hakumi::Grid::Col::Component.new(span: 6)) do %>
        <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">col-6</div>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Column Offset

Offset a column.

col-8

col-8 offset-8

col-6 offset-6

col-12 offset-6

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true)) do %>
  <%= render(Hakumi::Grid::Row::Component.new) do %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 8)) do %>
      <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">col-8</div>
    <% end %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 8, offset: 8)) do %>
      <div style="background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;">col-8 offset-8</div>
    <% end %>
  <% end %>

  <%= render(Hakumi::Grid::Row::Component.new) do %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6, offset: 6)) do %>
      <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">col-6 offset-6</div>
    <% end %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 6, offset: 6)) do %>
      <div style="background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;">col-6 offset-6</div>
    <% end %>
  <% end %>

  <%= render(Hakumi::Grid::Row::Component.new) do %>
    <%= render(Hakumi::Grid::Col::Component.new(span: 12, offset: 6)) do %>
      <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">col-12 offset-6</div>
    <% end %>
  <% end %>
<% end %>

Grid Sort

By using push and pull class you can easily change column order.

1 col-order-4

2 col-order-3

3 col-order-2

4 col-order-1

Code

<%= render(Hakumi::Grid::Row::Component.new) do %>
  <%= render(Hakumi::Grid::Col::Component.new(span: 6, order: 4)) do %>
    <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">1 col-order-4</div>
  <% end %>
  <%= render(Hakumi::Grid::Col::Component.new(span: 6, order: 3)) do %>
    <div style="background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;">2 col-order-3</div>
  <% end %>
  <%= render(Hakumi::Grid::Col::Component.new(span: 6, order: 2)) do %>
    <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">3 col-order-2</div>
  <% end %>
  <%= render(Hakumi::Grid::Col::Component.new(span: 6, order: 1)) do %>
    <div style="background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;">4 col-order-1</div>
  <% end %>
<% end %>

Responsive

Responsive grid.

Col

Code

<%= render(Hakumi::Grid::Row::Component.new(gutter: 10)) do %>
  <%= render(Hakumi::Grid::Col::Component.new(xs: 24, sm: 12, md: 8, lg: 6, xl: 4)) do %>
    <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">Col</div>
  <% end %>
  <%= render(Hakumi::Grid::Col::Component.new(xs: 24, sm: 12, md: 8, lg: 6, xl: 4)) do %>
    <div style="background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;">Col</div>
  <% end %>
  <%= render(Hakumi::Grid::Col::Component.new(xs: 24, sm: 12, md: 8, lg: 6, xl: 4)) do %>
    <div style="background: #0092ff; padding: 16px 0; text-align: center; color: #fff;">Col</div>
  <% end %>
  <%= render(Hakumi::Grid::Col::Component.new(xs: 24, sm: 12, md: 8, lg: 6, xl: 4)) do %>
    <div style="background: #69c0ff; padding: 16px 0; text-align: center; color: #fff;">Col</div>
  <% end %>
<% end %>

Grid Row API

Prop	Type	Default	Description
`gutter`	`Numeric or [Numeric, Numeric]`	`0`	Horizontal/vertical spacing between columns.
`justify`	`:start \| :end \| :center or :space-around \| :space-between`	`:start`	Horizontal alignment of columns.
`align`	`:top \| :middle or :bottom`	`:top`	Vertical alignment of columns.
`wrap`	`Boolean`	`true`	Allow columns to wrap onto multiple lines.
`component`	`Symbol`	`:div`	Tag used for the row wrapper.
`content slot`	`Slot`	`-`	Grid columns.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the row. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

Grid Col API

Prop	Type	Default	Description
`span`	`Integer`	`-`	Number of grid columns to occupy (out of 24).
`offset`	`Integer`	`-`	Number of columns to skip to the left.
`order`	`Integer`	`-`	Flex order for re-sorting columns.
`pull`	`Integer`	`-`	Push column to the left.
`push`	`Integer`	`-`	Push column to the right.
`flex`	`String or Integer`	`-`	Custom flex style (e.g., 'auto', 'none', 1).
`xs / sm / md / lg / xl / xxl`	`Integer or Hash`	`-`	Responsive props per breakpoint (span/offset/order/etc.).
`component`	`Symbol`	`:div`	Tag used for the column wrapper.
`content slot`	`Slot`	`-`	Column content.
`**html_options`	`Keyword args`	`-`	Attributes merged into the column element. Pass as kwargs (e.g., `class:`, `style:`, `data:`).