Mason-it v1.0.1 - Stability & Performance Boost

🚀 Mason-it v1.0.1 is here, bringing key stability improvements and smoother performance! 🚀

This patch release addresses issues encountered with dynamic content and refines the layout refresh mechanism for a much more fluid user experience.

Key Changes in v1.0.1:

• 🐛 Bug Fix: Accurate Layout with Hidden Items:
  • The core masonItArrange function now correctly identifies and ignores hidden items (display: none) during layout calculations. This resolves issues where removing or hiding grid items could lead to incorrect positioning or the entire grid shifting unexpectedly.
• ✨ Performance Enhancement: Smoother Updates with requestAnimationFrame:
  • All layout arrangement calls (initialization, refresh, mutation observation, resize events) are now scheduled using window.requestAnimationFrame.
  • This ensures that DOM reads and writes are batched and synchronized with the browser's repaint cycle, significantly reducing layout jank and "flash of intermediate layout" when items are added, removed, or the grid is refreshed. Updates are now much smoother!
• 🔧 Internal Refinements:
  • Introduced a pending queue (MasonItArrangePending) to prevent redundant layout calculations for the same element within a single animation frame.
  • Minor improvements to element validity checks before performing layout operations.

Why Upgrade?

If you're dynamically changing the visibility of items in your masonry grid or have noticed occasional layout shifts during updates, this version is highly recommended. The move to requestAnimationFrame also provides a generally more robust and performant experience.

Assets:

• dist.zip: Contains the distributable files from the dist/ directory for v1.0.1:
  • mason-it.min.js (minified UMD version)
  • mason-it.js (unminified UMD version)
  • mason-it.esm.js (ES module version)
• src.zip: Contains the full source code from the src/ directory for v1.0.1.

(GitHub will also automatically provide "Source code (zip)" and "Source code (tar.gz)" links containing the entire repository contents for the v1.0.1 tag.)

Getting Started & Documentation:

Refer to the updated README.md for full installation, usage, and API details.

Mason-it v1.0.0 - Initial Release

🎉 Mason-it v1.0.0 - The First Official Release! 🎉

This marks the initial public release of mason-it, a lightweight, dependency-free JavaScript library designed to transform your standard CSS Grid layouts into beautiful, responsive masonry arrangements with minimal effort.

What is Mason-it?

Tired of wrestling with complex masonry libraries that ignore your CSS Grid? mason-it respects your existing grid setup (grid-template-columns, gap) and simply adds the masonry magic on top.

Key Features in v1.0.0:

• 🧱 True CSS Grid Based: Works with your existing CSS Grid, doesn't fight it.
• 🚀 Zero Dependencies: Lightweight and won't bloat your project.
• ✨ Simple API:
  • Automatic initialization with the data-mason-it attribute.
  • JavaScript API for more control: MasonIt.init(), MasonIt.refresh(), MasonIt.destroy().
• ⚙️ Configurable:
  • Set initial layout delay (mason-delay).
  • Set polling interval for content changes (mason-poll-interval).
• 👀 Dynamic Content Ready: Includes MutationObserver support to automatically update the layout when child elements are added or removed.
• 📏 Responsive: Handles window resize events gracefully to recalculate and adjust the layout.
• 🐞 Debug Mode: MasonIt.debug(true) for console insights.
• ℹ️ Version & Count: MasonIt.version() and MasonIt.count() utility functions.

Assets:

• dist.zip: Contains the distributable files from the dist/ directory:
  • mason-it.min.js (minified UMD version)
  • mason-it.js (unminified UMD version)
  • mason-it.esm.js (ES module version)
• src.zip: Contains the full source code from the src/ directory for this version.

Getting Started:

Check out the README.md for full installation and usage instructions.

---