diff --git a/demo/css_attributes.html b/demo/css_attributes.html new file mode 100644 index 00000000..457262c6 --- /dev/null +++ b/demo/css_attributes.html @@ -0,0 +1,59 @@ + + + + + + + CSS & attributes demo + + + + + + +
+

Demo showcasing how to use gridstack.js attributes in CSS

+

The center of the widget shows its dimensions by purely using CSS, no JavaScript involved.

+
+ Add Widget +
+

+
+
+ + + + diff --git a/demo/demo.css b/demo/demo.css index 3b27f513..b0d58103 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -74,3 +74,27 @@ h1 { background: none; inset: 0; } + +.grid-stack.show-dimensions .grid-stack-item:after { + content: '1x1'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 2px; + color: black; + background-color: white; + pointer-events: none; /* to not interfere with dragging the item */ +} + +.grid-stack.show-dimensions .grid-stack-item[gs-h]::after { + content: '1x' attr(gs-h); +} + +.grid-stack.show-dimensions .grid-stack-item[gs-w]::after { + content: attr(gs-w) 'x1'; +} + +.grid-stack.show-dimensions .grid-stack-item[gs-h][gs-w]::after { + content: attr(gs-w) 'x' attr(gs-h); +} diff --git a/demo/index.html b/demo/index.html index ec81f633..694eb9a0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,6 +12,7 @@

Demos

  • AniJS
  • Cell Height
  • Column
    • +
  • CSS & attributes
  • Float grid
  • Knockout.js