{"id":16989475,"url":"https://github.com/khou22/tile-layout-web","last_synced_at":"2026-05-06T02:34:14.995Z","repository":{"id":85046879,"uuid":"87869610","full_name":"khou22/Tile-Layout-Web","owner":"khou22","description":"A useful grid view for both static and dynamic websites. For tiles with text, there is a title, subtitle, description, and category (label and color). When the user hovers over the tile, the display will darken and the description will slide up. For tiles that do not rely on text (referred to as Photo Tiles), it will zoom the image in the tile. Demo:","archived":false,"fork":false,"pushed_at":"2018-09-26T13:17:41.000Z","size":15742,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-02T22:07:23.901Z","etag":null,"topics":["es6","node","npm","react","ui-components","web"],"latest_commit_sha":null,"homepage":"http://khou22.com/photography","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/khou22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-11T00:18:48.000Z","updated_at":"2021-01-11T08:28:35.000Z","dependencies_parsed_at":"2023-03-07T09:01:11.841Z","dependency_job_id":null,"html_url":"https://github.com/khou22/Tile-Layout-Web","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khou22%2FTile-Layout-Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khou22%2FTile-Layout-Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khou22%2FTile-Layout-Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khou22%2FTile-Layout-Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/khou22","download_url":"https://codeload.github.com/khou22/Tile-Layout-Web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898446,"owners_count":20528341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","node","npm","react","ui-components","web"],"created_at":"2024-10-14T03:06:35.373Z","updated_at":"2025-10-06T04:06:15.479Z","avatar_url":"https://github.com/khou22.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tile-Layout-Web Library\n### Author: Kevin Hou\n#### Description:\n\nA useful grid view for both static and dynamic websites. For tiles with text, there is a title, subtitle, description, and category (label and color). When the user hovers over the tile, the display will darken and the description will slide up. For tiles that do not rely on text (referred to as Photo Tiles), it will zoom the image in the tile. If you click on a photo tile, it will display a modal — like a gallery. There is also lazy loading so no images should appear black while the content loads. This is especially useful for pages with hundreds of tiles. Here are two examples of the hovering animation:\n\n**Tile**\u003cbr\u003e\n\u003cimg src=\"tile-demo.gif\" width=\"250\" /\u003e\n\n**Photo Tile**\u003cbr\u003e\n\u003cimg src=\"photo-tile-demo.gif\" width=\"250\" /\u003e\n\n## Installation\n``` bash\n$ npm install --save git+https://git@github.com/khou22/tile-layout-web.git#releasetag\n```\n\n## Development\n1. Install NPM dependencies\n``` bash\n$ npm install\n```\n2. Create ESLint config file\n``` bash\n./node_modules/.bin/eslint --init\n```\n\n3. Run the demo\n``` bash\n$ open demo/index.html\n```\n\n## Building\nFor production: ``` $ npm run build-prod ```\n\nFor the demo product (watches/rebuilds on file changes): ``` $ npm run build-demo ```\n\n## Usage in Compiled Website\n1. Include the TileGrid component:\n    ``` javascript\n    import TileGrid from 'tile-layout-web';\n    ```\n\n2. Write and declare the gridData object variable\u003cbr\u003e\n    **For tiles with text:**\n    ``` javascript\n    // data.js\n    var gridData = { // Must name it this\n        columns: 3, // Number of columns\n        textColor: \"white\", // Color of text\n        openNewWindow: true, // Whether clicking on a tile will open a new window\n        data: [\n            {\n              title: \"Title\",\n              subtitle: \"Subtitle\",\n              description: \"Lorem ipsum dolor...\",\n              image: \"placeholder.png\",\n              link: \"#\",\n              size: \"2\", // Number of horizontal columns it will take up\n              category: { // Category tag (see image)\n                label: \"Category\",\n                color: \"orange\"\n              }\n            },\n            ...\n        ]\n    }\n    ```\n\n    **For tiles with just photos:**\n    ``` javascript\n    var gridData = {\n        columns: 3,\n        modal: true, // This is unique to photos, it can open a modal with a larger photo\n        openNewWindow: true,\n        data: [\n            {\n                image: \"...\",\n                link: \"#\",\n                size: 1,\n            },\n            ...\n        ]\n    }\n    ```\n\n3. Include the necessary props\n    ``` html\n    \u003cGridView\n        gridID=\"grid\"               - ID for the grid (purely cosmetic)\n        data={gridData}             - Grid data from step 2\n        columns=3                   - Number of columns\n        textColor=\"white\"           - Color of text\n        openNewWindow=true          - Whether to open new window when click\n    /\u003e\n    ```\n\n## Usage in Static Website\n1. Write and declare the gridData object variable (see step 2 above)\n\n2. Include in HTML\n\n    *The order is imperative.*\n    ``` html\n    \u003cdiv id='grid' class=\"main-div\"\u003e\u003c/div\u003e\n    \u003cscript src=\"data.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"index_bundle.js\"\u003e\u003c/script\u003e\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhou22%2Ftile-layout-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhou22%2Ftile-layout-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhou22%2Ftile-layout-web/lists"}