{"id":24988685,"url":"https://github.com/projetsmerlin/grillage","last_synced_at":"2025-03-29T11:19:24.086Z","repository":{"id":42647045,"uuid":"426690130","full_name":"ProjetsMerlin/Grillage","owner":"ProjetsMerlin","description":"grillage.js : ma première librairie JS","archived":false,"fork":false,"pushed_at":"2022-07-05T21:47:17.000Z","size":414,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-04T12:04:59.247Z","etag":null,"topics":["jslibrary"],"latest_commit_sha":null,"homepage":"https://projetsmerlin.github.io/Grillage/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ProjetsMerlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-10T16:11:11.000Z","updated_at":"2024-12-01T19:43:37.000Z","dependencies_parsed_at":"2022-08-31T20:51:34.382Z","dependency_job_id":null,"html_url":"https://github.com/ProjetsMerlin/Grillage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProjetsMerlin%2FGrillage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProjetsMerlin%2FGrillage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProjetsMerlin%2FGrillage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProjetsMerlin%2FGrillage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProjetsMerlin","download_url":"https://codeload.github.com/ProjetsMerlin/Grillage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246174645,"owners_count":20735425,"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":["jslibrary"],"created_at":"2025-02-04T12:05:03.316Z","updated_at":"2025-03-29T11:19:24.061Z","avatar_url":"https://github.com/ProjetsMerlin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Grillade JS\n-------\n\nGrillage js décompose une image en plusieurs éléments HTML pour lui donner un effet de grille ou de quadrillage (sur 3 lignes en hauteur). Il est ensuite possible d'appliquer une classe de son choix sur chacun des éléments pour leur attribuer un effet d'animation par exemple ou de transition lorsqu'on les survole.\n\n\n### Demo\n\nYou can preview Grillage js [there](https://projetsmerlin.github.io/Grillage/)\n\n### How TO USE\n1. Wrap your image with an html element\n2. Import jQuery\n3. Import Grillage js\n4. Aplly Grillage on your element\n5. Apply options if you want\n\n\n### Example\n\n#### CSS (no required)\n```bash\n  \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\"\u003e\n```\n\n#### SCRIPTS\n```bash\n\u003cscript src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/grillage.js\"\u003e\u003c/script\u003e\n```\n\n#### Grillage js\n\n```bash\n    $('.yourElement').grillage({\n      structure : [\n      [33.33,33.33,33.33],\n      [20,20,30,30],\n      [20,50,20,10],\n      ],\n      classe : 'grillage__item'\n      classHover: \"grillage__item--hover\",\n      borderColor: \"yellow\",\n      borderSize: 3,\n    });\n```\n\n### Settings\n\nOption | Type | Default | Description\n------ | ---- | ------- | -----------\nstructure | array | [ [15,15,50,20],[20,20,30,30],[20,70,10],] | Structure of grid. An array for each rows. Each values must be equal to 100% for a perfect design\nclasse | string | 'grillage__item' | name of your classe\nclassHover | string | 'grillage__item--hover' | Classe of animate css for hover effect\nborderColor | string | '#ffffff' | Color of borders\nborderSize | int | 3 | width of borders\n\n### Download\n\nYou can download Grillage js [there](https://github.com/ProjetsMerlin/grillage/archive/refs/heads/master.zip)\n\n\n### Credits\n\nCreated by https://lintermediaire.be - 12/2021\n\n\n### Dependencies\n\njQuery 3.6.0 - [https://jquery.com/download/](https://jquery.com/download/)\n\n\n### Related\n[animated.css](https://github.com/amitmerchant1990/markdownify-web) for a lot css animation\n\n\n### License\n\nFREE\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojetsmerlin%2Fgrillage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojetsmerlin%2Fgrillage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojetsmerlin%2Fgrillage/lists"}