I was reading about shoes.rb and, while scanning the book and walkthrough, I discovered a pattern that caught my attention for its power and simplicity.

The combination of “stacks” and “flows” allows you to build complex layouts, like the following example in Ruby:

Shoes.app do
  background "#EFC"
  border("#BE8", strokewidth: 6)

  stack(margin: 12) do
    para "Enter your name"
    flow do
      edit_line
      button "OK"
    end
  end
end

What are a stacks and a flows?

1. A stack places one thing on top of another, similar to blocks in HTML.
2. A flow arranges items next to each other on a horizontal line, like inline blocks in HTML.

With CSS, you can implement them like this:

.stack {
  display: flex;
  gap: 1em;
  flex-direction: column;
  justify-content: flex-start;
}

.flow {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
  flex-wrap: wrap;
}

Here’s a pen with some examples from the walkthrough to help you visualize how you can combine these two CSS rules:

View CodePen Example

See the Pen Untitled by Benito Serna (@bhserna) on CodePen.

Personal testing of the idea

I have been using a slightly modified version of these CSS classes in a personal project where I am also using open-props.

These are the CSS classes that I am using:

.stack {
  display: flex;
  gap: var(--size-3);
  flex-direction: column;
  justify-content: flex-start;

  &.sm {
    gap: var(--size-1);
  }

  &.lg {
    gap: var(--size-7);
  }
}

.flow {
  display: flex;
  gap: var(--size-2);
  align-items: baseline;
  flex-wrap: wrap;

  &.centered {
    align-items: center;
  }

  &.justify-between {
    justify-content: space-between;
  }

  &.sm {
    gap: var(--size-1);
  }

  &.lg {
    gap: var(--size-3);
  }
}

I don’t have enough experience with them to be sure that you should adopt these classes in all your projects, but I think you should at least test them in your personal projects and play around with them.

If you use something like Tailwind CSS, maybe you can write a partial or component to introduce this abstraction.

Maybe this names can break your UI kit

The names “stack” and “flow” are used as UI elements by some HTML or native UI kits.

So, if you are testing them, check if these classes are not already used in your project.

Related articles

• Styler and tachyons examples
• Styler, a tool to compose css classes with ruby