{"id":22479903,"url":"https://github.com/edumigueis/photo-galleries","last_synced_at":"2025-08-02T14:32:33.430Z","repository":{"id":39026456,"uuid":"281421341","full_name":"edumigueis/photo-galleries","owner":"edumigueis","description":"An experiment with  galleries design and CSS properties. Made using VUEJS and CSS.","archived":false,"fork":false,"pushed_at":"2022-12-13T12:22:06.000Z","size":53447,"stargazers_count":4,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-07T22:53:49.126Z","etag":null,"topics":["css","css-gallery","css-grid","css-layouts","css-masonry-layouts","css3","gallery","gallery-images","vue","vue-router","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edumigueis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-21T14:32:28.000Z","updated_at":"2023-02-24T07:08:20.000Z","dependencies_parsed_at":"2022-09-11T23:52:24.175Z","dependency_job_id":null,"html_url":"https://github.com/edumigueis/photo-galleries","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edumigueis%2Fphoto-galleries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edumigueis%2Fphoto-galleries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edumigueis%2Fphoto-galleries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edumigueis%2Fphoto-galleries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edumigueis","download_url":"https://codeload.github.com/edumigueis/photo-galleries/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228483540,"owners_count":17927363,"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":["css","css-gallery","css-grid","css-layouts","css-masonry-layouts","css3","gallery","gallery-images","vue","vue-router","vuejs"],"created_at":"2024-12-06T15:17:57.663Z","updated_at":"2024-12-06T15:17:58.409Z","avatar_url":"https://github.com/edumigueis.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Photo Galleries\n\n\u003e A collection of pure CSS3 galleries. Made using VueJS and CSS, the galleries in this project are:\n\n- Masonry\n- No Gutter Masonry\n- Grid\n- No Gutter Grid\n- Hexagon Grid\n- Row Masonry\n\nAll the galleries in this project can be coppied, but the copyright notice in all the files must be maintained, as states the LICENSE. All images provided by Unsplash. Check out pictures of the project:\n\n## Row Masonry\n\n![](./src/assets/images/row-masonry.png)\n\n## Masonry:\n\n![](./src/assets/images/masonry.png)\n\n## Grid:\n\n![](./src/assets/images/grid.png)\n\n## No Gutter Masonry\n\n![](./src/assets/images/masonry-no-gutter.png)\n\n## Using\n\nIf you don't want to download the project, you can access the files through GitHub and copy the css inside the style tag. The html is inside the \u003ctemplate\u003e tag. Just remove the v-for and the :key attributes from the inner tag of the gallery wrapper and copy that tag many times. Like so:\n\n```html\n\u003cdiv class=\"grid-wrapper\"\u003e\n  \u003cdiv class=\"grid\"\u003e\n    \u003cdiv class=\"block\"\u003e\n      \u003cdiv class=\"image-mask\"\u003e\n        \u003cimg\n          src=\"https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=crop\u0026w=708\u0026q=80\"\n          alt=\"\"\n        /\u003e\n      \u003c/div\u003e\n      \u003cp class=\"description\"\u003eBeautiful Image\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"block\"\u003e\n      \u003cdiv class=\"image-mask\"\u003e\n        \u003cimg\n          src=\"https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjEyMDd9\u0026auto=format\u0026fit=crop\u0026w=708\u0026q=80\"\n          alt=\"\"\n        /\u003e\n      \u003c/div\u003e\n      \u003cp class=\"description\"\u003eBeautiful Image\u003c/p\u003e\n    \u003c/div\u003e\n    ...\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf you want to download the entire project. Follow the following steps. After downloading the project, you can go into a console and cd the main project folder. Then, you have to install the dependencies:\n\n```sh\ncd photo-galleries\nnpm install\n```\n\nAnd, then run like so:\n\n```sh\nnpm run dev\n```\n\n## Meta\n\nCreator: Eduardo Migueis\n\nDistributed under the APACHE 2.0 LICENSE. See `LICENSE` for more informaton.\n\n[https://github.com/edumigueis/photo-galleries](https://github.com/edumigueis)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedumigueis%2Fphoto-galleries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedumigueis%2Fphoto-galleries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedumigueis%2Fphoto-galleries/lists"}