Helpers | Romo

Borders

Use style classes to add borders.

.romo-border

<div class="romo-border">...</div>

Use numbered classes, 0 through 2, to set specific pixel width.

.romo-border0

.romo-border1

.romo-border (alias of .romo-border1)

.romo-border2

<div class="romo-border0">...</div>
<div class="romo-border1">...</div>
<div class="romo-border" >...</div>
<div class="romo-border2">...</div>

Or, add borders to specific sides.

.romo-border-top

.romo-border-bottom

.romo-border-left.romo-border-right

<div class="romo-border-top">...</div>
<div class="romo-border-bottom">...</div>
<div class="romo-border-left romo-border-right">...</div>

Remove from just specific sides.

.romo-rm-border-top

.romo-rm-border-right

.romo-rm-border-left

.romo-rm-border-bottom

<div class="romo-border romo-rm-border-top">...</div>
<div class="romo-border romo-rm-border-right">...</div>
<div class="romo-border romo-rm-border-left">...</div>
<div class="romo-border romo-rm-border-bottom">...</div>

Change style on any border configuration

.romo-border-solid

.romo-border-dashed

.romo-border-dotted

.romo-border-double

.romo-border-groove

.romo-border-inset

.romo-border-hidden

.romo-border-none

<div class="romo-border-solid">...</div>
<div class="romo-border-dashed">...</div>
<div class="romo-border-dotted">...</div>
<div class="romo-border-double">...</div>
<div class="romo-border-groove">...</div>
<div class="romo-border-inset">...</div>
<div class="romo-border-hidden">...</div>
<div class="romo-border-none">...</div>

Add color emphasis to any border configuration

.romo-border-muted

.romo-border-warning

.romo-border-error

.romo-border-info

.romo-border-success

.romo-border-inverse

<div class="romo-border-muted">...</div>
<div class="romo-border-warning">...</div>
<div class="romo-border-error">...</div>
<div class="romo-border-info">...</div>
<div class="romo-border-success">...</div>
<div class="romo-border-inverse">...</div>

Add border radius.

.romo-border0-radius

.romo-border1-radius

.romo-border-radius (alias of .romo-border1-radius)

.romo-border2-radius

.romo-border2-top-left-radius

.romo-border2-top-right-radius

.romo-border2-bottom-left-radius

.romo-border2-bottom-right-radius

<div class="romo-border3 romo-border0-radius">...</div>
<div class="romo-border1 romo-border1-radius">...</div>
<div class="romo-border romo-border-radius">...</div>
<div class="romo-border2 romo-border2-radius">...</div>
<div class="romo-border2 romo-border2-top-left-radius">...</div>
<div class="romo-border2 romo-border2-top-right-radius">...</div>
<div class="romo-border2 romo-border2-bottom-left-radius">...</div>
<div class="romo-border2 romo-border2-bottom-right-radius">...</div>

Spacing

Use style classes to control how elements are spaced (margin/padding).

.romo-push

.romo-pad

.romo-push.romo-pad

<div class="romo-border">
  <div class="romo-border romo-push">...</div>
  <div class="romo-border romo-pad">...</div>
  <div class="romo-border romo-push romo-pad">...</div>
</div>

Use numbered classes, 0 through 2, to set specific spacing size.

.romo-push0.romo-pad0

.romo-push1.romo-pad1

.romo-push.romo-pad (alias of 1)

.romo-push2.romo-pad2

<div class="romo-border">
  <div class="romo-border romo-push0 romo-pad0">...</div>
  <div class="romo-border romo-push1 romo-pad1">...</div>
  <div class="romo-border romo-push  romo-pad ">...</div>
  <div class="romo-border romo-push2 romo-pad2">...</div>
</div>

Add to just specific sides.

.romo-push-top.romo-pad-top

.romo-push-right.romo-pad-right

.romo-push-left.romo-pad-left

.romo-push-bottom.romo-pad-bottom

<div class="romo-border">
  <div class="romo-border romo-push-top romo-pad-top">...</div>
  <div class="romo-border romo-push-right romo-pad-right">...</div>
  <div class="romo-border romo-push-left romo-pad-left">...</div>
  <div class="romo-border romo-push-bottom romo-pad-bottom">...</div>
</div>

Remove from just specific sides.

.romo-rm-push-top.romo-rm-pad-top

.romo-rm-push-right.romo-rm-pad-right

.romo-rm-push-left.romo-rm-pad-left

.romo-rm-push-bottom.romo-rm-pad-bottom

<div class="romo-border">
  <div class="romo-border romo-push romo-pad romo-rm-push-top romo-rm-pad-top">...</div>
  <div class="romo-border romo-push romo-pad romo-rm-push-right romo-rm-pad-right">...</div>
  <div class="romo-border romo-push romo-pad romo-rm-push-left romo-rm-pad-left">...</div>
  <div class="romo-border romo-push romo-pad romo-rm-push-bottom romo-rm-pad-bottom">...</div>
</div>

Display

Use style classes to set specific display values.

-.romo-inline-

-.romo-inline-block-

-.romo-block-

<div class="romo-inline">...</div>
<div class="romo-inline-block">...</div>
<div class="romo-block">...</div>

Position

Use style classes to set specific position values.

-.romo-relative-

-.romo-absolute-

<div class="romo-relative romo-border">
  <div>...</div>
  <div>...</div>
  <div class="romo-absolute" style="top: 0; right: 0">...</div>
</div>

Or, use romo-fixed to position as fixed.

Floating

Use style classes to float elements.

-.romo-float-left-

-.romo-float-right-

-.romo-pull-left-

-.romo-pull-right-

<div class="romo-border romo-clearfix">
  <div class="romo-float-left">...</div>
  <div class="romo-float-right">...</div>
  <div class="romo-pull-left">...</div>
  <div class="romo-pull-right">...</div>
</div>

Overflow

Use style classes to handle common overflow cases.

.romo-nowrap: content that will overflow

.romo-crop: content that will overflow

.romo-crop-ellipsis: content that will overflow

<div style="width: 150px" class="romo-border romo-inline-block romo-nowrap">...</div>
<div></div>
<div style="width: 150px" class="romo-border romo-inline-block romo-crop">...</div>
<div></div>
<div style="width: 150px" class="romo-border romo-inline-block romo-crop-ellipsis">...</div>