{"id":24014989,"url":"https://github.com/humanagainstmachine/ebay-listing-grid","last_synced_at":"2026-03-01T18:33:38.641Z","repository":{"id":7463955,"uuid":"56317392","full_name":"HumanAgainstMachine/ebay-listing-grid","owner":"HumanAgainstMachine","description":"Ebay Listing Grid is a CSS grid and a micro framework for designing responsive ebay listing templates.","archived":false,"fork":false,"pushed_at":"2022-05-17T08:16:09.000Z","size":11,"stargazers_count":17,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"gh-pages","last_synced_at":"2025-02-25T17:48:54.290Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HumanAgainstMachine.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}},"created_at":"2016-04-15T12:08:57.000Z","updated_at":"2024-10-08T18:18:53.000Z","dependencies_parsed_at":"2022-07-21T11:30:37.267Z","dependency_job_id":null,"html_url":"https://github.com/HumanAgainstMachine/ebay-listing-grid","commit_stats":null,"previous_names":["humanagainstmachine/ebay-listing-grid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HumanAgainstMachine/ebay-listing-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanAgainstMachine%2Febay-listing-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanAgainstMachine%2Febay-listing-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanAgainstMachine%2Febay-listing-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanAgainstMachine%2Febay-listing-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HumanAgainstMachine","download_url":"https://codeload.github.com/HumanAgainstMachine/ebay-listing-grid/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanAgainstMachine%2Febay-listing-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29978719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T16:35:47.903Z","status":"ssl_error","status_checked_at":"2026-03-01T16:35:44.899Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2025-01-08T07:38:30.394Z","updated_at":"2026-03-01T18:33:38.623Z","avatar_url":"https://github.com/HumanAgainstMachine.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"Ebay Listing Grid\n=================\n\nEbay Listing Grid (ELG) is a CSS grid and a micro framework for designing responsive ebay listing templates, no javascript required. \n\n * tiny (**only 8 css** `property: value;`)\n * only **two classes** (`g-row` and `g-col`)\n * fluid columns with **fixed gutters**\n * mobile first\n * allows columns ordering\n * supports all major modern browsers, serving one-column mobile layout to older browsers\n\n**[Template example](http://tarqez.github.io/ebay-listing-grid)** \u0026nbsp;|\u0026nbsp; [Source](elg.css)\n\n### Basic example\n**_content with sidebar on the right_**\n\n```html\n\u003cdiv class=\"g-row\"\u003e\n\t\u003cdiv class=\"g-col g-content\"\u003e ... \u003c/div\u003e\n\t\u003cdiv class=\"g-col g-sidebar\"\u003e ... \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n@media only screen and (min-width: 48em) {\n\t.g-content {width: 66.66%;}\n\t.g-sidebar {width: 33.33%;}\n}\n```\n\n**Rows** are div elements with `g-row` class, while **cols** are div elements with `g-col` class.\n\nIn the example, we have a row with two cols that stack up in viewports up to 48em of width. Beyond 48em, cols line up with widths of 66.66% the first, 33.33% the second.\n\nELG is mobile first, therefore it provides 100%-width cols by default. We start with a one column layout and then with a multiple cols layout for larger viewport. We do this by setting widths in percentages for each media query breakpoint.\n\n\n### Column ordering example\n**_moving sidebar on the left_**\n\nWhat if we want to keep the `.g-content` on top of the `.g-sidebar` for mobile layout, while having the `.g-sidebar` on the left for larger viewport? Column ordering comes in handy and we only need to add `left:` and `right:` properties to css.\n\n```css\n@media only screen and (min-width: 48em) {\n\t.g-content {\n\t\twidth: 66.66%; \n\t\tleft: 33.33%;\n\t}\n\t.g-sidebar {\n\t\twidth: 33.33%;\n\t\tright: 66.66%\n\t}\n}\n```\n\nFor viewports beyond 48em, we push `.g-content` from the left and `.g-sidebar` from the right. We need simple math to calculate the distances in percentages.\n\n**[Ordering 3 cols example](http://tarqez.github.io/ebay-listing-grid/3cols_ordering.html)**\n\n### Responsiveness in ebay listing\n\nTemplates are embedded in ebay pages, which don't allow full control on our layout behavior. For example on a large monitor of PCs and laptops, ebay fixes page viewport width to more than 1000px, resizing the browser window doesn't resize the viewport and a horizontal scrollbar bar appears. As a consequence, the template layout doesn't adapt responsevely to the new browser window.\n\nBut, when we use the ebay app on our phones, we will see the mobile layout. \n\n##### Mobile browsers and the javascript trick\n\nUnfortunately the mobile version of the ebay website doesn't show the mobile template layout, because we don't have full control on ebay page, as said above. A trick that works in some mobile browsers is to add on top of css + HTML code the javascript\n\n```javascript\n\u003cscript\u003e\n\tvar vp = document.createElement(\"meta\");\n\tvp.setAttribute(\"name\", \"viewport\");\n\tvp.setAttribute(\"content\", \"width=device-width, initial-scale=1\");\n\tdocument.getElementsByTagName(\"head\")[0].appendChild(vp);\n\u003c/script\u003e\n```\n\nI have tested this on \n\n* Chrome mobile 49.0.x - works\n* Android 4.4.4 stock browser - works\n* Firefox mobile 45.0.x - doesn't works\n\n### Cautions\n\n1. Don't use ebay _quick listing tool_. Use the _form with more choices_ to avoid unwanted changes of template code (you don't need this caution with API and File Exchange)\n\n2. Remove all unnecessary blanks and join all lines of template code in only one line\n\n3. Use prefix for all your css _ID_ and _class_ names to avoid collitions with ebay names, like `.g-content` in the example above\n\n---\n\n### Thanks\n\nELG is a fork from [Dead Simple Grid](http://github.com/mourner/dead-simple-grid) an idea of Vladimir Agafonkin (creator of Leaflet)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanagainstmachine%2Febay-listing-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhumanagainstmachine%2Febay-listing-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanagainstmachine%2Febay-listing-grid/lists"}