You are here

Home » API reference » GridStack 8.2

gridstack.static.css in GridStack 8.2

Provides basic static layout for GridStack JS layout, Outlayer Isotope, etc.

This is not needed by native CSS Grid, nor CSS Bootstrap/Foundation. This file is also loaded at admin UI pages, so beware to not break it. This file can be loaded along with gridstack.library.css, or if using Outlayer Isotope to support both native CSS Grid and dynamic sortable layout.

At most cases, no need to re-touch this file.

See also

css/gridstack.css for details

File

css/gridstack.static.css
View source 
  1. /**

  2.  * @file

  3.  * Provides basic static layout for GridStack JS layout, Outlayer Isotope, etc.

  4.  *

  5.  * This is not needed by native CSS Grid, nor CSS Bootstrap/Foundation.

  6.  * This file is also loaded at admin UI pages, so beware to not break it.

  7.  * This file can be loaded along with gridstack.library.css, or if using

  8.  * Outlayer Isotope to support both native CSS Grid and dynamic sortable layout.

  9.  *

  10.  * At most cases, no need to re-touch this file.

  11.  *

  12.  * @see css/gridstack.css for details

  13.  */

  14. 

  15. .is-gs-layout .box {

  16.   left: 0;

  17. }

  18. 

  19. .is-gs-enabled.is-gs-layout > .box {

  20.   padding: 0;

  21.   position: absolute;

  22. }

  23. 

  24. .is-gs-enabled.is-gs-layout > .box,

  25. .is-gs-enabled.is-gs-layout > .box[data-gs-width='12'] {

  26.   width: 100%;

  27. }

  28. 

  29. /** @todo use mediaqueries to avoid !important rule somewhere. */

  30. .is-gs-enabled.is-gs-layout > .box[data-gs-width='1'] {

  31.   width: 8.3333333333%;

  32. }

  33. 

  34. .is-gs-enabled.is-gs-layout > .box[data-gs-width='2'] {

  35.   width: 16.6666666667%;

  36. }

  37. 

  38. .is-gs-enabled.is-gs-layout > .box[data-gs-width='3'] {

  39.   width: 25%;

  40. }

  41. 

  42. .is-gs-enabled.is-gs-layout > .box[data-gs-width='4'] {

  43.   width: 33.3333333333%;

  44. }

  45. 

  46. .is-gs-enabled.is-gs-layout > .box[data-gs-width='5'] {

  47.   width: 41.6666666667%;

  48. }

  49. 

  50. .is-gs-enabled.is-gs-layout > .box[data-gs-width='6'] {

  51.   width: 50%;

  52. }

  53. 

  54. .is-gs-enabled.is-gs-layout > .box[data-gs-width='7'] {

  55.   width: 58.3333333333%;

  56. }

  57. 

  58. .is-gs-enabled.is-gs-layout > .box[data-gs-width='8'] {

  59.   width: 66.6666666667%;

  60. }

  61. 

  62. .is-gs-enabled.is-gs-layout > .box[data-gs-width='9'] {

  63.   width: 75%;

  64. }

  65. 

  66. .is-gs-enabled.is-gs-layout > .box[data-gs-width='10'] {

  67.   width: 83.3333333333%;

  68. }

  69. 

  70. .is-gs-enabled.is-gs-layout > .box[data-gs-width='11'] {

  71.   width: 91.6666666667%;

  72. }

  73. 

  74. /**

  75.  * The following rules are front-end only, note the .gridstack--gs class.

  76.  * The above rules are also affecting admin UI pages.

  77.  * Gridstack is disabled by default at 768.

  78.  * @todo remove once the library stops outputting inline styles.

  79.  * @todo remove if JS fixes do address it all.

  80.  */

  81. .gridstack--gs.is-gs-disabled {

  82.   /* Also to fix ungridstack with Masonry/ Packery layout inline styles. */

  83.   height: auto !important; /* csslint allow: known-properties, important */

  84. }

  85. 

  86. /* @todo re-enable here if JS fixes don't address it all, yet. */

  87. /* Needed !important to override JS inline styles, or unexpected overrides. */

  88. /* Also to fix ungridstack with Masonry/ Packery layout inline styles. */

  89. /* Masonry/ Packery during resizing.

  90. .gridstack--gs.is-gs-disabled > .box {

  91.   float: none;

  92.   height: auto !important;

  93.   position: relative !important;

  94.   left: auto !important;

  95.   top: auto !important;

  96.   margin-bottom: 0;

  97.   width: 100% !important;

  98.   transform: none !important;

  99. }

  100. */