# Blob decorations

How to position, scale and color decorative SVG elements.

###

Basic Usage

Blobs are provided through SVG embedded in Jumpstart's CSS and can be invoked by simply adding class `blob blob-(1-5)` to a div element.

You must add valid Bootstrap `h-##` and `w-##` utility classes to control the height and width of the blob.

Other utility classes such as `bg-*`, `opacity-##`, and positioning / transform classes can be added to further customize the blob color, shape and position. For more information, see the Utility Classes page.

    <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
        <div class="blob blob-1 w-50 h-50 bg-gradient"></div>
    </div>

`.blob`

  Add to a `<div>` to invoke a blob graphic

`.blob-(1-5)`

  Add to `<div.blob>` to select the blob style

Note: Blobs have `position: absolute;` by default

###

Colors

    <div class="row">
      <div class="col-3">
        <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
          <div class="blob blob-1 w-75 h-75 bg-gradient top left"></div>
        </div>
      </div>
      <div class="col-3">
        <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
          <div class="blob blob-2 w-75 h-75 bg-primary top right"></div>
        </div>
      </div>
      <div class="col-3">
        <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
          <div class="blob blob-3 w-75 h-75 bg-primary-2 bottom right"></div>
        </div>
      </div>
      <div class="col-3">
        <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
          <div class="blob blob-4 w-75 h-75 bg-white bottom left"></div>
        </div>
      </div>
    </div>

`.bg-primary`

  Apply to `.blob` element to color with Primary color

`.bg-primary-2`

  Apply to `.blob` element to color with Primary-2 color

`.bg-primary-3`

  Apply to `.blob` element to color with Primary-3 color

`.bg-gradient`

  Apply to `.blob` element to color with a gradient color

For a full ist of available color classes, see the Utility Classes page.

###

Position

    <div class="position-relative min-vh-30 rounded o-hidden bg-dark">
        <div class="blob blob-1 w-50 h-50 bg-gradient top left"></div>
        <div class="blob blob-2 w-50 h-50 bg-primary top right"></div>
        <div class="blob blob-3 w-50 h-50 bg-primary-2 bottom right"></div>
        <div class="blob blob-4 w-50 h-50 bg-white bottom left"></div>
    </div>

`.top`

  Apply to `.decoration` element to position at top of parent

`.bottom`

  Apply to `.decoration` element to position at bottom of parent

`.left`

  Apply to `.decoration` element to position at left of parent

`.right`

  Apply to `.decoration` element to position at right of parent

Note: The parent of `.blob` elements should have `position: relative; overflow: hidden;` to display correctly. This can be achived by adding `position-relative` and `o-hidden` classes

###

Flip

Due to CSS structure, to flip a `blob` it must be wrapped in a `position-absolute` element. The `transform-flip-(x/y)` class must be applied to that element.

In this example, the first blob is in original position, while the second and third blobs are transformed.

    <div class="row">
        <div class="col-3">
            <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
                <div class="blob blob-1 w-75 h-75 bg-primary top left"></div>
            </div>
        </div>
        <div class="col-3">
            <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
                <div class="h-100 w-100 position-absolute transform-flip-x">
                    <div class="blob blob-1 w-75 h-75 bg-primary top left"></div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
                <div class="h-100 w-100 position-absolute transform-flip-y">
                    <div class="blob blob-1 w-75 h-75 bg-primary top left"></div>
                </div>
            </div>
        </div>
    </div>

`.transform-flip-x`

  Apply to `.blob` element to flip on along its X axis

`.transform-flip-y`

  Apply to `.blob` element to flip on along its Y axis