{"id":13401314,"url":"https://github.com/BMSVieira/EasyGrid","last_synced_at":"2025-03-14T07:31:29.131Z","repository":{"id":111617661,"uuid":"318362800","full_name":"BMSVieira/EasyGrid","owner":"BMSVieira","description":"EasyGrid - VanillaJS Responsive Grid","archived":false,"fork":false,"pushed_at":"2020-12-15T15:21:41.000Z","size":1080,"stargazers_count":93,"open_issues_count":0,"forks_count":4,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-16T13:11:05.846Z","etag":null,"topics":["css","dependency-free","easygrid","filter","filtering","frontend","grid","html","javascript","javascript-library","layout","library","masonry-layout","pure-javascript","responsive","responsive-design","vanillajs"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/BMSVieira.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-12-04T01:00:32.000Z","updated_at":"2024-01-06T17:18:37.000Z","dependencies_parsed_at":"2024-01-14T15:24:29.777Z","dependency_job_id":"1e2ec07d-20f7-474f-8e44-af7053b1aa3f","html_url":"https://github.com/BMSVieira/EasyGrid","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BMSVieira%2FEasyGrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BMSVieira%2FEasyGrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BMSVieira%2FEasyGrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BMSVieira%2FEasyGrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BMSVieira","download_url":"https://codeload.github.com/BMSVieira/EasyGrid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243541858,"owners_count":20307771,"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","dependency-free","easygrid","filter","filtering","frontend","grid","html","javascript","javascript-library","layout","library","masonry-layout","pure-javascript","responsive","responsive-design","vanillajs"],"created_at":"2024-07-30T19:01:01.287Z","updated_at":"2025-03-14T07:31:28.731Z","avatar_url":"https://github.com/BMSVieira.png","language":"HTML","funding_links":[],"categories":["HTML","frontend"],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"400\" src=\"https://github.com/BMSVieira/EasyGrid/blob/main/demo-template/images/easy_small.png\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\" size=\"20pt\"\u003e\u003cfont size=\"20pt\"\u003e\u003cb\u003e\u003ca href=\"https://github.com/BMSVieira/EasyGrid#%EF%B8%8F-features\"\u003eFeatures\u003c/a\u003e\u003c/b\u003e  ▪️  \u003cb\u003e\u003ca href=\"https://github.com/BMSVieira/EasyGrid#%EF%B8%8F-demo\"\u003eDemo\u003c/a\u003e\u003c/b\u003e  ▪️  \u003cb\u003e\u003ca href=\"https://github.com/BMSVieira/EasyGrid#%EF%B8%8F-installation\"\u003eInstallation\u003c/a\u003e\u003c/b\u003e   ▪️  \u003cb\u003e\u003ca href=\"https://github.com/BMSVieira/EasyGrid#%EF%B8%8F-methods\"\u003eMethods\u003c/a\u003e\u003c/b\u003e  ▪️  \u003cb\u003e\u003ca href=\"https://github.com/BMSVieira/EasyGrid#%EF%B8%8F-settings\"\u003eSettings\u003c/a\u003e\u003c/b\u003e\u003c/font\u003e\u003c/p\u003e\n\n\n◼️ Features:\n-\n- 🔧 Fully Customizable\n- 💪 No Dependencies, built with VanillaJS\n- 🌎 Tested in All Modern Browsers\n- 💻 Responsive\n- 🗂 Filtering\n- 📈 Fast \u0026 Reliable\n- 📚 Does not need CSS or any CSS Framework\n\n◼️ Demo:\n-\nhttps://bmsvieira.github.io/EasyGrid/\n\n◼️ Installation:\n-\n\n1 - Include JavaScript Source.\n```javascript\n\u003cscript src=\"path/to/easygrid.js\"\u003e\u003c/script\u003e\n```\n2 - Include Styles.\n```javascript\n\u003clink rel=\"stylesheet\" href=\"path/to/easygrid.css\"\u003e\n```\n4 - Set HTML.\n```javascript\n \u003cdiv id=\"grid\" style=\"width:100%;\"\u003e\u003c/div\u003e\n```\n3 - Initilize.\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n     var demo1 = new EasyGrid({\n       selector: \"#grid\",\n       dimensions: {\n         width: \"150\",\n         height: \"270\",\n         margin: \"5\",\n         minHeight: \"20\", // if height is \"random\"\n         maxHeight: \"40\"  // if height is \"random\"\n       },\n       animations: {\n         fadeInSpeed: \"100\",\n         addItemSpeed: \"100\"\n       },\n       style: {\n         background: \"transparent\",\n         borderRadius: \"5\"\n       }\n     });\n     \n     // Add items to Grid\n     demo1.AddItem({\n        items: \"HTML Element\"\n     });\n});\n```\n◼️ Methods:\n-\n\u003cb\u003eRefresh:\u003c/b\u003e\nRefresh Grid Positioning\n\n```javascript\ndemo1.Refresh();\n```\n\n\u003cb\u003eAddItem:\u003c/b\u003e\nAdd a new item to grid\u003cbr\u003e\nIf `filter` is enabled, it will automatically add to all classes that match the existing filters, otherwise, all filters starting with `egfilter_` will be added and available for use.\n\n| Value | Description |\n| --- | --- |\n| `String` | Add a new item |\n| `Array` / `Object` | Add multiple items at once  |\n\n```javascript\n\n// Single\nvar Elements = \"HTML Element\";\n// Array\nvar Elements = [\"HTML Element 1\", \"HTML  Element 2\", \"HTML  Element 3\", \"HTML  Element 4\"];\n// Filter\n// In this example, it will add a new item to existing \"egfilter_red\" filter and a new filter called \"egfilter_orange\" ready to be used.\nvar Elements = '\u003cdiv class=\"egfilter_red egfilter_orange\"\u003e\u003cimg style=\"width:100%;\" src=\"demo-template/images/orange.png\"\u003e\u003c/div\u003e';\n\ndemo1.AddItem({\n   items: Elements,\n   onComplete: function(){\n     console.log(\"Completed!\");\n   } \n});\n```\n\n\u003cb\u003eChange:\u003c/b\u003e\nApplies changes to current Grid\n\n```javascript\ndemo1.Change({\n     dimensions: {\n      width: \"150\",\n      height: \"random\",\n      margin: \"15\",\n      minHeight: \"100\", // if height is \"random\"\n      maxHeight: \"300\"  // if height is \"random\"\n     },\n     style: {\n       background: \"random\",\n       borderRadius: \"5\"\n     }\n});\n```\n\n\u003cb\u003eClear:\u003c/b\u003e\nRemoves all items and all columns\n\n```javascript\ndemo1.Clear();\n```\n\n\u003cb\u003eSetupEasyGrid:\u003c/b\u003e\nAdd responsive columns.\nAfter use of `SetupEasyGrid()` it can be added new items again.\n\n```javascript\ndemo1.SetupEasyGrid();\n```\n\n\u003cb\u003eFilter:\u003c/b\u003e\nFilter all elements that match specific class.\u003cbr\u003e\n\n```javascript\ndemo1.Filter();\n```\n\n◼️ Settings:\n-\n| Option | Type | Options Available | Description |\n| --- | --- | --- | --- |\n| `selector` | `String`  | `---` |  Specify ID of the element|\n| `dimensions` \u003e `width` | `Integer` | `Integer` | Width (px) of the elements|\n| `dimensions` \u003e `height` | `Integer` | `random` or `Integer` |  Height (px) of the elements|\n| `dimensions` \u003e `margin` | `Integer` | `Integer` |  Margin (px) between elements|\n| `dimensions` \u003e `minHeight` | `Integer` | `Integer` |  Min. Height (px) of the elements if height is `random`|\n| `dimensions` \u003e `maxHeight` | `Integer` | `Integer` |  Max. Height (px) of the elements if height is `random`| \n| `config` \u003e `fetchFromHTML` | `Boolean` | --- |  Fetch elements inside main div to EasyGrid|\n| `config` \u003e `filter` | `Boolean` | --- |  Enables filter, fetchFromHTML is automatically enabled when using filters|\n| `animations` \u003e `fadeInSpeed` | `Integer` | `Integer` |  Speed(ms) that the item takes to appear completely after being added|\n| `animations` \u003e `addItemSpeed` | `Integer` | `Integer` |  Speed(ms) at which each item is added|\n| `style` \u003e `background` | `String` | `random`, `shadesOfGrey`, `HEX`, `RGBA` |  Item's Background color|\n| `style` \u003e `borderRadius` | `Integer` | `Integer` |  Item's Border Radius|\n| `responsive` \u003e `breakpoint` | `Integer` | `Integer` |  Responsive breakpoint, interrupts natural flow of EasyGrid and adds desired columns|\n| `responsive` \u003e `columns` | `Integer` | `Integer` |  Number of columns after breakpoint|\n\n\u003cb\u003eFull Example:\u003c/b\u003e\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n        var demo1 = new EasyGrid({\n             selector: \"#grid\",\n             dimensions: {\n              width: \"150\",\n              height: \"270\",\n              margin: \"5\",\n              minHeight: \"20\", // if height is \"random\"\n              maxHeight: \"40\"  // if height is \"random\"\n             },\n             config: {\n              fetchFromHTML: true, // FetchFromHTML is automatically Enabled when using filters\n              filter: true\n             },\n             animations: {\n               fadeInSpeed: \"100\",\n               addItemSpeed: \"100\"\n             },\n             style: {\n               background: \"random\",\n               borderRadius: \"5\"\n             },\n             responsive: [\n                {\n                  breakpoint: 500,\n                  columns: 2\n                },\n                {\n                  breakpoint: 300,\n                  columns: 1\n                }\n            ]\n        });\n});\n```\n\n\u003cb\u003eFetchFromHTML Example:\u003c/b\u003e\u003cbr\u003e\nTo fetch elements from html, it has to be placed inside main div with a specific class called: `easygrid_fetch`\n\n```html\n\u003c!--  Main Div --\u003e\n\u003cdiv id=\"grid\" class=\"easygrid_bvgrid\"\u003e\n\n    \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n    \u003cdiv class=\"easygrid_fetch\" style=\"display:none;\"\u003e\n        \u003c!-- HTML Elements --\u003e\n    \u003c/div\u003e\n    \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n    \u003cdiv class=\"easygrid_fetch\" style=\"display:none;\"\u003e\n        \u003c!-- HTML Elements --\u003e\n    \u003c/div\u003e\n \n\u003c/div\u003e\n```\n\n\u003cb\u003eFilters Example:\u003c/b\u003e\u003cbr\u003e\nAll classes that will serve as a filter, must begin with `egfilter_`\u003cbr\u003e\nWhenever you want to show all items use `egfilter_all`, it is created automatically and contains all elements, does not need to be specified in each item.\n\n\n```html\n\u003c!--  Main Div --\u003e\n\u003cdiv id=\"grid\" class=\"easygrid_bvgrid\"\u003e \n\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_blue egfilter_red egfilter_purple\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_blue egfilter_red\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_blue\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_green egfilter_blue\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_green egfilter_blue\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_green\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_purple\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_red\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_red\"\u003e HTML CODE HERE \u003c/div\u003e\n     \u003c!-- This item will be fetched to EasyGrid and then removed --\u003e\n     \u003cdiv class=\"easygrid_fetch egfilter_red\"\u003e HTML CODE HERE \u003c/div\u003e\n\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBMSVieira%2FEasyGrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBMSVieira%2FEasyGrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBMSVieira%2FEasyGrid/lists"}