masonry-snap-grid-layout 1.0.19 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/esm/index.css +15 -1
- package/dist/esm/index.css.map +1 -1
- package/dist/index.css +15 -1
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ A **performant, SSR-friendly** masonry grid layout library with smooth animation
|
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
## ✨ What's New (v1.0.
|
|
13
|
+
## ✨ What's New (v1.0.20)
|
|
14
14
|
✅ **SSR-Ready Rendering** — On the server, items are rendered as plain HTML so your grid is SEO-friendly and instantly visible.
|
|
15
15
|
✅ **Hydration Takeover** — On the client, the library recalculates and animates the masonry layout after hydration.
|
|
16
16
|
✅ **Zero Dependencies** — Written in TypeScript, works with React and Vanilla JS.
|
package/dist/esm/index.css
CHANGED
|
@@ -2,7 +2,21 @@
|
|
|
2
2
|
.masonry-snap-grid-container {
|
|
3
3
|
position: relative;
|
|
4
4
|
width: 100%;
|
|
5
|
-
|
|
5
|
+
overflow: auto;
|
|
6
|
+
}
|
|
7
|
+
.masonry-snap-grid-container::-webkit-scrollbar-track {
|
|
8
|
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
|
|
9
|
+
border-radius: 0;
|
|
10
|
+
background-color: transparent;
|
|
11
|
+
}
|
|
12
|
+
.masonry-snap-grid-container::-webkit-scrollbar {
|
|
13
|
+
width: 1px;
|
|
14
|
+
background-color: transparent;
|
|
15
|
+
}
|
|
16
|
+
.masonry-snap-grid-container::-webkit-scrollbar-thumb {
|
|
17
|
+
border-radius: 0;
|
|
18
|
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
|
|
19
|
+
background-color: transparent;
|
|
6
20
|
}
|
|
7
21
|
.masonry-snap-grid-item {
|
|
8
22
|
position: absolute;
|
package/dist/esm/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.css"],"sourcesContent":["/*\n====================================================================\nMasonrySnapGridLayout - Base Styles\n====================================================================\nThese styles define the core visual and positional behavior of the\nmasonry grid container and its items. They are minimal to allow\nflexibility for custom themes while ensuring smooth layout animations.\n====================================================================\n*/\n\n/*\nContainer styles:\n- Acts as the positioning context for masonry items (position: relative).\n- Takes full available width.\n- Smoothly animates height changes when items reflow.\n- Hides overflow to prevent content from spilling outside the layout.\n*/\n.masonry-snap-grid-container {\n position: relative;\n width: 100%;\n
|
|
1
|
+
{"version":3,"sources":["../../src/index.css"],"sourcesContent":["/*\n====================================================================\nMasonrySnapGridLayout - Base Styles\n====================================================================\nThese styles define the core visual and positional behavior of the\nmasonry grid container and its items. They are minimal to allow\nflexibility for custom themes while ensuring smooth layout animations.\n====================================================================\n*/\n\n/*\nContainer styles:\n- Acts as the positioning context for masonry items (position: relative).\n- Takes full available width.\n- Smoothly animates height changes when items reflow.\n- Hides overflow to prevent content from spilling outside the layout.\n*/\n.masonry-snap-grid-container {\n position: relative;\n width: 100%;\n overflow: auto;\n}\n\n\n\n.masonry-snap-grid-container::-webkit-scrollbar-track\n{\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);\n border-radius: 0;\n background-color: transparent;\n}\n\n.masonry-snap-grid-container::-webkit-scrollbar\n{\n width: 1px;\n background-color: transparent;\n}\n\n.masonry-snap-grid-container::-webkit-scrollbar-thumb\n{\n border-radius: 0;\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);\n background-color: transparent;\n}\n/*\nItem styles:\n- Absolutely positioned within the container.\n- Animates transform changes for smooth reordering.\n- Uses GPU-accelerated transform optimizations (`will-change`, `backface-visibility`).\n- Sets `box-sizing: border-box` for consistent sizing with padding/border.\n- `transform-origin` ensures scaling/rotation pivot from the top-left corner.\n- `perspective` enables subtle 3D rendering improvements on some browsers.\n*/\n.masonry-snap-grid-item {\n position: absolute;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n box-sizing: border-box;\n transform-origin: top left;\n backface-visibility: hidden;\n perspective: 1000px;\n}\n"],"mappings":";AAiBA,CAAC;AACG,YAAU;AACV,SAAO;AACP,YAAU;AACd;AAIA,CARC,2BAQ2B;AAExB,sBAAoB,MAAM,EAAE,EAAE,IAAI,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC;AAC7C,iBAAe;AACf,oBAAkB;AACtB;AAEA,CAfC,2BAe2B;AAExB,SAAO;AACP,oBAAkB;AACtB;AAEA,CArBC,2BAqB2B;AAExB,iBAAe;AACf,sBAAoB,MAAM,EAAE,EAAE,IAAI,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC;AAC7C,oBAAkB;AACtB;AAUA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}
|
package/dist/index.css
CHANGED
|
@@ -2,7 +2,21 @@
|
|
|
2
2
|
.masonry-snap-grid-container {
|
|
3
3
|
position: relative;
|
|
4
4
|
width: 100%;
|
|
5
|
-
|
|
5
|
+
overflow: auto;
|
|
6
|
+
}
|
|
7
|
+
.masonry-snap-grid-container::-webkit-scrollbar-track {
|
|
8
|
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
|
|
9
|
+
border-radius: 0;
|
|
10
|
+
background-color: transparent;
|
|
11
|
+
}
|
|
12
|
+
.masonry-snap-grid-container::-webkit-scrollbar {
|
|
13
|
+
width: 1px;
|
|
14
|
+
background-color: transparent;
|
|
15
|
+
}
|
|
16
|
+
.masonry-snap-grid-container::-webkit-scrollbar-thumb {
|
|
17
|
+
border-radius: 0;
|
|
18
|
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
|
|
19
|
+
background-color: transparent;
|
|
6
20
|
}
|
|
7
21
|
.masonry-snap-grid-item {
|
|
8
22
|
position: absolute;
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.css"],"sourcesContent":["/*\n====================================================================\nMasonrySnapGridLayout - Base Styles\n====================================================================\nThese styles define the core visual and positional behavior of the\nmasonry grid container and its items. They are minimal to allow\nflexibility for custom themes while ensuring smooth layout animations.\n====================================================================\n*/\n\n/*\nContainer styles:\n- Acts as the positioning context for masonry items (position: relative).\n- Takes full available width.\n- Smoothly animates height changes when items reflow.\n- Hides overflow to prevent content from spilling outside the layout.\n*/\n.masonry-snap-grid-container {\n position: relative;\n width: 100%;\n
|
|
1
|
+
{"version":3,"sources":["../src/index.css"],"sourcesContent":["/*\n====================================================================\nMasonrySnapGridLayout - Base Styles\n====================================================================\nThese styles define the core visual and positional behavior of the\nmasonry grid container and its items. They are minimal to allow\nflexibility for custom themes while ensuring smooth layout animations.\n====================================================================\n*/\n\n/*\nContainer styles:\n- Acts as the positioning context for masonry items (position: relative).\n- Takes full available width.\n- Smoothly animates height changes when items reflow.\n- Hides overflow to prevent content from spilling outside the layout.\n*/\n.masonry-snap-grid-container {\n position: relative;\n width: 100%;\n overflow: auto;\n}\n\n\n\n.masonry-snap-grid-container::-webkit-scrollbar-track\n{\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);\n border-radius: 0;\n background-color: transparent;\n}\n\n.masonry-snap-grid-container::-webkit-scrollbar\n{\n width: 1px;\n background-color: transparent;\n}\n\n.masonry-snap-grid-container::-webkit-scrollbar-thumb\n{\n border-radius: 0;\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);\n background-color: transparent;\n}\n/*\nItem styles:\n- Absolutely positioned within the container.\n- Animates transform changes for smooth reordering.\n- Uses GPU-accelerated transform optimizations (`will-change`, `backface-visibility`).\n- Sets `box-sizing: border-box` for consistent sizing with padding/border.\n- `transform-origin` ensures scaling/rotation pivot from the top-left corner.\n- `perspective` enables subtle 3D rendering improvements on some browsers.\n*/\n.masonry-snap-grid-item {\n position: absolute;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n box-sizing: border-box;\n transform-origin: top left;\n backface-visibility: hidden;\n perspective: 1000px;\n}\n"],"mappings":";AAiBA,CAAC;AACG,YAAU;AACV,SAAO;AACP,YAAU;AACd;AAIA,CARC,2BAQ2B;AAExB,sBAAoB,MAAM,EAAE,EAAE,IAAI,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC;AAC7C,iBAAe;AACf,oBAAkB;AACtB;AAEA,CAfC,2BAe2B;AAExB,SAAO;AACP,oBAAkB;AACtB;AAEA,CArBC,2BAqB2B;AAExB,iBAAe;AACf,sBAAoB,MAAM,EAAE,EAAE,IAAI,KAAK,CAAC,EAAC,CAAC,EAAC,CAAC,EAAC;AAC7C,oBAAkB;AACtB;AAUA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}
|
package/package.json
CHANGED