{"id":13760481,"url":"https://github.com/crozynski/Fluid-Squares","last_synced_at":"2025-05-10T11:30:19.294Z","repository":{"id":88851449,"uuid":"5449744","full_name":"crozynski/Fluid-Squares","owner":"crozynski","description":"A fluid grid of square units.","archived":false,"fork":false,"pushed_at":"2015-06-08T00:23:43.000Z","size":133,"stargazers_count":32,"open_issues_count":1,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-16T17:41:12.081Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/crozynski.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":"2012-08-17T08:26:42.000Z","updated_at":"2022-09-24T10:32:31.000Z","dependencies_parsed_at":"2023-03-13T18:18:06.761Z","dependency_job_id":null,"html_url":"https://github.com/crozynski/Fluid-Squares","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/crozynski%2FFluid-Squares","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crozynski%2FFluid-Squares/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crozynski%2FFluid-Squares/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crozynski%2FFluid-Squares/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crozynski","download_url":"https://codeload.github.com/crozynski/Fluid-Squares/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253409854,"owners_count":21903978,"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":[],"created_at":"2024-08-03T13:01:11.168Z","updated_at":"2025-05-10T11:30:19.041Z","avatar_url":"https://github.com/crozynski.png","language":"HTML","funding_links":[],"categories":["Boilerplates"],"sub_categories":["Other","其它"],"readme":"# Fluid-Squares\n\n## What is it?\n\nA fluid grid of square units using HTML and CSS.\n\nFluid Squares preserves a unit's square proportion within a fluid layout. The number of columns also reduce to suit browser or device width using CSS media queries.\n\nIt works on all modern desktop browsers. Media queries are written Mobile First. IE8 doesn't support media queries, so the css3-mediaqueries.js polyfill is temporarily included. \n\nSee [www.fluidsquares.com](http://www.fluidsquares.com) for more.\n\n## What problem does Fluid Squares fix?\n\nWithout a fix, the result of reducing a browser window's width squashes a fluid grid's squares into rectangles.\n\nTo fix this each unit's padding-bottom size is set to match its width in percentages. On top of that each unit is a percentage of the global container to determine how many columns there are.\n\nSetting a unit's width to 25% and padding-bottom to 25% will give you four units in a row that will remain square regardless of screen size or browser window resizing.\n\n## The ingredients\n\n### HTML\n\nThe basic structure of each unit is a div for content, which is nested in an anchor element:\n\n````\n\u003ca href=\"url\"\u003e\n\u003cdiv\u003econtent\u003c/div\u003e\n\u003c/a\u003e\n````\n\nIf you don't want the entire unit to be a link, a class has been created for that purpose. Just remove the anchor element and add class=\"category\" to the div instead.\n\n````\n\u003cdiv class=\"category\"\u003econtent\u003c/div\u003e\n````\n\n### CSS\n\nMedia queries control the number of columns displayed (1, 2, 3, and 4) on browser resize, as well as providing fine control over font sizes.\n\nIt includes a cut down CSS reset to suit this bare bones grid. Replace with a fresh [Reset](http://meyerweb.com/eric/tools/css/reset/) or [Normalize](http://necolas.github.io/normalize.css/) and customise to suit your own needs.\n\n### No wrapper?\n\nIt uses the body tag as a wrapper, but would certainly work within a standard div wrapper or HTML5 block elements.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrozynski%2FFluid-Squares","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrozynski%2FFluid-Squares","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrozynski%2FFluid-Squares/lists"}