Inline

A series of classes that properly align adjacent elements together with consideration for overflow. These classes help ensure that UI elements have adequete spacing, even in situations where the layout forces the items to wrap.

Install

npm install seed-inline --save

Dependencies


Example

To inline items next to each other, wrap everything in a parent selector of .o-inline, and each child selector in .o-inline__item.

Filter:
and
<div class="o-inline">
  <div class="o-inline__item">
    ...
  </div>
  <div class="o-inline__item">
    ...
  </div>
</div>

Working with dynamic content

.o-inline is great at inlining smaller pieces of UI elements next to each other — such as icons, buttons, and inputs. However, if you have textual content (especially longer content), it is better to use seed-flexy instead.

Desired UI

Let’s pretend the UI you would like is similar to what we have below. An icon on the left, textual content in the middle, and a button on the right.

That's *Mr.* Evil Dr. Porkchop to you.

Using .o-inline (👎)

If there is a lot of text, the UI will no longer look like what we had before. That is because .o-inline__item doesn’t constrain it’s inner content for layout purposes. It only tries to align items next to each other (when possible).

Hamm teleports the Potato Heads, the aliens, and Slinky onto his ship. He also pushes a button reading, "Death by Monkeys," trapping our heroes with a flood of plastic red monkeys. As Mr. Potato Head reaches toward a button activating a destructive ray, the scene suddenly cuts to Andy's bedroom. The whole scene actually took place in Andy's imagination, as he plays with the toys and a cardboard spaceship

Using .o-flexy (👍)

On the other hand, .o-flexy from the seed-flexy object pack does respect layout!

Hamm teleports the Potato Heads, the aliens, and Slinky onto his ship. He also pushes a button reading, "Death by Monkeys," trapping our heroes with a flood of plastic red monkeys. As Mr. Potato Head reaches toward a button activating a destructive ray, the scene suddenly cuts to Andy's bedroom. The whole scene actually took place in Andy's imagination, as he plays with the toys and a cardboard spaceship

Sizes

The various sizes will adjust the spacing to the right and below each .o-inline__item.

Modifier class Margin adjustment
.o-inline--xs 4px
.o-inline--sm 8px
.o-inline--md 16px
.o-inline--lg 24px
Inline item
Inline item
Inline item
Inline item
Inline item
Inline item
Inline item
Inline item
Inline item
Inline item
Inline item
Inline item
<div class="o-inline o-inline--sm">
  ...
</div>

Configurations

Below are the default Sass configuration variables for seed-inline. The variables can be found in the pack’s _config.scss file.

seed-inline/_config.scss
// Namespaces
$seed-inline-namespace: o-inline !default;
$seed-inline-item-namespace: #{$seed-inline-namespace}__item !default;

// Config
$seed-inline-spacing: 4px !default;

// Sizes
$seed-inline-sizes: (
  xs: 4px,
  sm: 8px,
  md: 16px,
  lg: 24px,
) !default;