Masonry Grid Layout
Relevant source files
The following files were used as context for generating this wiki page:
The Vandore Heritage website utilizes a dynamic, filterable masonry grid layout to display real estate listings. This system is primarily implemented on the properties.html page, providing users with an interactive way to browse and filter properties. The layout is powered by the Isotope.js library, which handles the arrangement and filtering of grid items.
The core functionality revolves around a set of client-side scripts and data attributes embedded in the HTML. Property data is defined by a structured model, and CSS provides styling for a responsive user experience across different devices.
Architecture Overview
The masonry grid system is a client-side feature composed of several key parts: an HTML structure for the grid and filters, a data model defining property attributes, a JavaScript library for layout and filtering, and CSS for styling and responsiveness.
The following diagram illustrates the high-level architecture of the feature.
This diagram shows that the Property data model defined in stackbit.config.ts provides the data structure for the properties rendered in properties.html. The Isotope library, along with custom JavaScript, provides the dynamic filtering and layout behavior, while css/custom.css styles the components.
Sources: properties.html, css/custom.css, stackbit.config.ts, about.html:610, contact.html:606
Data Model
The data for each property displayed in the grid is structured according to the Property model defined in the Stackbit configuration file. This model specifies the fields available for each property listing.
Sources: stackbit.config.ts:85-100
Property Model Fields
The table below details the fields defined for the Property data model. This structure is used to populate the property cards in the grid.
| Field | Type | Required | Description |
|---|---|---|---|
title | string | Yes | The main title of the property. |
price | string | Yes | The listing price of the property. |
address | string | Yes | The physical address of the property. |
description | text | Yes | A detailed description of the property. |
image | string | Yes | URL for the primary image of the property. |
url | string | Yes | The URL path to the property details page. |
bedrooms | number | No | The number of bedrooms. |
bathrooms | number | No | The number of bathrooms. |
area | number | No | The total area of the property. |
floors | number | No | The number of floors in the property. |
Sources: stackbit.config.ts:85-100
UI Components
The user interface for the masonry grid is defined in properties.html. It consists of the filter controls, the grid container itself, and a state for when no results are found.
Component Breakdown
| Component | HTML Element ID/Class | Description |
|---|---|---|
| Filter Bar | .filter-bar | A container for all filter inputs, including location, price range, and bedrooms. Visible on desktop. |
| Filter Drawer | #filter-drawer | An off-canvas version of the filter bar for mobile devices, toggled by a button. |
| Property Grid | #property-grid | The main container for all property cards. Isotope.js acts on this element. |
| Property Card | .col.mb-4 | Individual grid items representing a single property. Contains data-* attributes for filtering. |
| Active Filters | #filter-chips | A container to display the currently applied filters as "chips". |
| Property Count | #property-count | A span element to display the number of properties currently visible. |
| Empty State | #empty-state | A message block that is shown when no properties match the current filter criteria. |
Sources: properties.html:200-400, css/custom.css:1, css/custom.css:83
Property Card Structure
Each property in the grid is rendered as a card with specific data-* attributes that the filtering logic uses to match against user selections.
<!-- Source: properties.html:298-323 -->
<div class="col mb-4" data-location="riga heritage lane" data-price="950000" data-bedrooms="4">
<div class="card h-100">
<img src="image/dummy-img-900x700.jpg" class="card-img-top" alt="Sample Property" style="aspect-ratio: 3/2; object-fit: cover;">
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-2">
<h5 class="card-title mb-0">Sample Property</h5>
<h6 class="text-accent fw-bold">$950,000</h6>
</div>
<div class="d-flex align-items-center mb-2">
<i class="rtmicon rtmicon-location me-2"></i>
<span class="text-muted">123 Heritage Lane, Riga</span>
</div>
<p class="card-text flex-grow-1">Elegant historic residence with modern amenities and refined finishes.</p>
<div class="d-flex justify-content-between align-items-center mt-auto">
<div class="d-flex gap-3">
<span class="badge bg-light text-dark">4 bed</span>
<span class="badge bg-light text-dark">3 bath</span>
</div>
<a href="property_details.html" class="btn btn-accent btn-sm">
<span>View Details</span>
<i class="rtmicon rtmicon-arrow-up-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
The data-location, data-price, and data-bedrooms attributes are critical for the client-side filtering functionality.
Sources: properties.html:298-400
Filtering Logic
The filtering logic is handled client-side, presumably by js/custom.js (which is loaded but not provided), in conjunction with the Isotope library. The user's interactions with the filter bar trigger a script that filters the items within the #property-grid.
The filtering process can be visualized as follows:
This flowchart shows that when a user applies a filter, the script checks each property card's data- attributes against the selected criteria. Isotope then animates the grid to show only the matching items.
Sources: properties.html:230-296, properties.html:298-300
Styling and Responsiveness
The visual appearance and responsive behavior of the filter components and grid are managed by css/custom.css.
Key styling rules include:
.filter-bar: Defines the look of the main filter container, including background, padding, and borders..filter-bar .btn.active: Styles the active bedroom filter button with a distinct background and text color.#empty-state: Initially hidden (display: none;) and shown by JavaScript when no properties are found.- Media Queries: CSS media queries are used to handle responsiveness. For screens narrower than 1023px, a mobile-friendly "filter drawer" is shown, while the standard filter bar is hidden.
/* Source: css/custom.css:1-10 */
.filter-bar {
background-color: #ffffff;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid rgba(175, 164, 149, 0.4);
font-family: 'Ping Fang SC', sans-serif;
}
/* Source: css/custom.css:91-97 */
@media (max-width: 767px) {
.filter-drawer {
display: block;
}
.filter-bar {
display: none;
}
}
These styles ensure a consistent and usable experience on both desktop and mobile devices.
Sources: css/custom.css:1-10, css/custom.css:32-36, css/custom.css:83-87, css/custom.css:91-97
Dependencies and Setup
The masonry grid functionality depends on several JavaScript files loaded in the HTML.
Script Loading
The following scripts, included at the bottom of the page, are essential for the feature to work:
js/vendor/jquery.min.js: A dependency for other scripts.js/vendor/bootstrap.bundle.min.js: Used for UI components like the filter drawer.js/vendor/isotope.pkgd.min.js: The core library for the masonry layout and filtering.js/custom.js: The file assumed to contain the custom initialization and event handling logic for Isotope and the filters.
<!-- Source: properties.html:538-545 -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
<script src="js/vendor/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
<script src="js/swiper-script.js"></script>
<script src="js/submit-form.js"></script>
<script src="js/vendor/isotope.pkgd.min.js"></script>
<script src="js/video_embedded.js"></script>
<script src="js/vendor/fslightbox.js"></script>
<script src="js/custom.js"></script>
These files are served by a simple Node.js static server defined in server.js, which maps file extensions to the correct MIME types.
Sources: properties.html:538-545, about.html:604-611, contact.html:600-607, server.js:8-19
Summary
The masonry grid layout is a central feature of the Vandore Heritage website's property listing page. It leverages the Isotope.js library to create a responsive, filterable grid of properties. The system is built on a foundation of structured HTML with data- attributes, a well-defined data model from Stackbit, and custom CSS for styling and mobile-friendliness. This client-side implementation provides a fast and interactive browsing experience for users.