Simply point the endpoint to your API, and the Metro tiles populate dynamically without refreshing the page.
function loadMetroData(endpoint, tileId) fetch(endpoint) .then(response => response.json()) .then(data => document.getElementById(tileId).innerHTML = `<div class="metro-tile-content"> <h3>$data.sales</h3> <span>$data.percentage% vs last week</span> </div>`; );
falcon/ ├── src/ │ ├── scss/ (Metro custom variables) │ ├── js/ (chart-init.js, metro-tile-drag.js) │ └── partials/ (header, sidebar, footer) ├── dist/ (Minified production files) └── documentation/
The defining feature of Falgun is its visual style. Unlike the ubiquitous "flat" or "material" designs that rely heavily on drop shadows and floating action buttons, Falgun adopts the Metro philosophy:
Simply point the endpoint to your API, and the Metro tiles populate dynamically without refreshing the page.
function loadMetroData(endpoint, tileId) fetch(endpoint) .then(response => response.json()) .then(data => document.getElementById(tileId).innerHTML = `<div class="metro-tile-content"> <h3>$data.sales</h3> <span>$data.percentage% vs last week</span> </div>`; ); Simply point the endpoint to your API, and
falcon/ ├── src/ │ ├── scss/ (Metro custom variables) │ ├── js/ (chart-init.js, metro-tile-drag.js) │ └── partials/ (header, sidebar, footer) ├── dist/ (Minified production files) └── documentation/ tileId) fetch(endpoint) .then(response =>
The defining feature of Falgun is its visual style. Unlike the ubiquitous "flat" or "material" designs that rely heavily on drop shadows and floating action buttons, Falgun adopts the Metro philosophy: response.json()) .then(data =>