gridstack.css in GridStack 8.2

This file is common to gridstack features: all layout engines.

The generic classes:

• .gridstack: module class to abide by its namespace, just too generic.
• .grid-stack: JS defined class, or managed by JS dynamically. Don't rely on this to avoid FOUC.

The following classes are not used for one-dimensional CSS driven layouts. Only applicable for two-dimensional: js-driven, native Grid and admin UI.

Original js-driven layouts:

• .gridstack--gs (NOT used at admin UI, safe to use)
• .is-gs-layout (Also used at admin UI, beware to not break it)

Native Grid layouts:

• .gridstack--native (NOT used at admin UI, safe to use)

Both native Grid and js-driven layouts:

• .gridstack--js
• .is-gs-disabled (when being disabled)
• .is-gs-enabled (when being enabled defined by minWidth option, or [data-gs-min-width])

Both front-end and back-end admin UI, beware to not break it:

• .is-gs-layout (NOT safe to use at front-end, see below for recommendation)
• .is-gs-enabled

Recommended front-end classes:

• .gridstack--gs for the original js-driven layouts.
• .gridstack--native for the native browser Grid Layout.
• .gridstack-wrapper to hold background image/ media configurable via Layout Builder. Not currently used due to breaking LB AJAX. Might be for more complex needs.

Unless required, avoid js-generated classes to avoid FOUC: is-gs-on, etc.

File

css/gridstack.css

/**
 * @file
 * This file is common to gridstack features: all layout engines.
 *
 * The generic classes:
 * - .gridstack: module class to abide by its namespace, just too generic.
 * - .grid-stack: JS defined class, or managed by JS dynamically. Don't rely on
 *     this to avoid FOUC.
 *
 * The following classes are not used for one-dimensional CSS driven layouts.
 * Only applicable for two-dimensional: js-driven, native Grid and admin UI.
 *
 * Original js-driven layouts:
 * - .gridstack--gs (NOT used at admin UI, safe to use)
 * - .is-gs-layout (Also used at admin UI, beware to not break it)
 *
 * Native Grid layouts:
 * - .gridstack--native (NOT used at admin UI, safe to use)
 *
 * Both native Grid and js-driven layouts:
 * - .gridstack--js
 * - .is-gs-disabled (when being disabled)
 * - .is-gs-enabled (when being enabled defined by minWidth option, or
 *      [data-gs-min-width])
 *
 * Both front-end and back-end admin UI, beware to not break it:
 * - .is-gs-layout (NOT safe to use at front-end, see below for recommendation)
 * - .is-gs-enabled
 *
 * Recommended front-end classes:
 * - .gridstack--gs for the original js-driven layouts.
 * - .gridstack--native for the native browser Grid Layout.
 * - .gridstack-wrapper to hold background image/ media configurable via Layout
 *     Builder. Not currently used due to breaking LB AJAX. Might be for more
 *     complex needs.
 *
 * Unless required, avoid js-generated classes to avoid FOUC: is-gs-on, etc.
 */

/* Ignorable, language dependent classes, original js-driven layouts. */
.grid-stack-rtl {
  direction: ltr;
}

.grid-stack-rtl > .box {
  direction: rtl;
}

/* Required for background image to work for all engines. */
.gridstack {
  position: relative;
}

/* Do not affect Bootstrap/ Foundation CSS. */
.gridstack-wrapper,
.gridstack--js {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.gridstack--js {
  min-height: 210px;
  overflow: hidden;
  transition: opacity .3s, visibility .3s;
}

/* Aspect ratio insanity. */
.gridstack--js .box,
/* Prevents overlapping bg when edge to edge (EtE) is not enabled. */
.gridstack .box__content {
  overflow: hidden;
}

/* @todo required for rounded to work, but might break js. */
.box__content.is-gs-media {
  margin-bottom: 0; /* Overrides bootstrap heading classes from making headaches. */
  position: relative;
}

/* Reveals media element (IMG, IFRAME, VIDEO) for Edge to Edge (EtE). */
.gridstack.is-gs-ete,
.gridstack .box--ete,
.gridstack .box--ete > .box__content,
.gridstack .box__content.is-gs-ete {
  overflow: visible;
}

/* Intentional specificity to not break, to look gapless, including disabled. */
/* The .b-noratio is specific for Blazy inside blocks. */
.gridstack--js .b-noratio img,
.gridstack--js .b-noratio iframe,
.gridstack--js .b-noratio video,
/* The .box__bg is specific for Media Library item via LB, non-block. */
.gridstack .box__bg img,
.gridstack .box__bg iframe,
.gridstack .box__bg video,
.gridstack .b-gs .media__overlay {
  display: block;
  height: 100%;
  left: 0;
  max-width: 100%;
  min-height: 1px;
  object-fit: cover;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

/* Background color over image needs this. */
.gridstack .b-gs .media__overlay {
  z-index: 1;
}

/* @todo in case we can make inline media (non-background) work with EtE. We do! */
.gridstack .b-gs,
.gridstack .box__animated,
.gridstack--js .b-noratio,
.gridstack--js .box__content > a {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/** Override core block.css margin which adds extra gap confusing aspect ratio. */
.gridstack .block,
.gridstack .block .content,
.gridstack .block .block__content,
.gridstack .block h2 { /* csslint allow: qualified-headings */
  margin-top: 0;
}