{"id":17497487,"url":"https://github.com/moox/sass-flex-medias","last_synced_at":"2025-07-18T12:35:44.492Z","repository":{"id":7596375,"uuid":"8953209","full_name":"MoOx/sass-flex-medias","owner":"MoOx","description":"Some helpers for responsive, intrinsic ratio medias (video, iframe, objects, images...). It also avoid browsers reflow.","archived":false,"fork":false,"pushed_at":"2014-04-22T05:54:42.000Z","size":136,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-05T20:58:08.813Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/MoOx.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":"2013-03-22T14:08:58.000Z","updated_at":"2014-04-22T05:54:38.000Z","dependencies_parsed_at":"2022-08-30T22:52:58.620Z","dependency_job_id":null,"html_url":"https://github.com/MoOx/sass-flex-medias","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/MoOx%2Fsass-flex-medias","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fsass-flex-medias/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fsass-flex-medias/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fsass-flex-medias/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoOx","download_url":"https://codeload.github.com/MoOx/sass-flex-medias/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239707798,"owners_count":19684134,"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-10-19T15:50:26.153Z","updated_at":"2025-02-19T17:45:44.874Z","avatar_url":"https://github.com/MoOx.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flex Medias\n\n## [DEPRECATED, consider [SUIT flex embed](https://github.com/suitcss/components-flex-embed/)]\n\n\u003e Flexible responsive fixed ratio medias to avoid browsers reflow.\n\nSome helpers for responsive, intrinsic ratio medias (video, iframe, objects, images...). It also avoid browsers reflow.\n\n![Fonzie approved](https://dl.dropbox.com/u/14108185/Pictures/fonzie.jpg)\n\n---\n\n**NOT TESTED \u0026 NOT PUBLISHED ON FONZIE YET**\n\n## Installation\n\n```\nfonzie install flex-medias\n```\n\n## Usage\n\n```scss\n@import \"flex-medias\";\n```\n\n### BEM style\n\n```scss\n$flex-media-selector: '.flex-media';\n$flex-media-ratios: \"3-1\" 3, \"16-9\" 16/9, \"4-3\" 4/3, \"1-1\" 1;\n@include flex-medias();\n```\n\n```html\n\u003cfigure class=\"flex-media flex-media--16-9\"\u003e\n    \u003ca href=\"#zoomOrWhatever\"\u003e\n        \u003cimg class=\"flex-media__item\" src=\"...\" alt=\"\" /\u003e\n    \u003c/a\u003e\n\u003c/figure\u003e\n```\n\n### `@extend` style\n\n```scss\n@import \"flex-media\";\n$flex-media-ratios: \"3-1\" 3, \"16-9\" 16/9, \"4-3\" 4/3, \"1-1\" 1;\n@include flex-medias();\n```\n\n```html\n\u003cfigure class=\"flex-media--16-9\"\u003e\u003c!-- flex-media--16-9 inherit from flex-media using @extend --\u003e\n    \u003ca href=\"#zoomOrWhatever\"\u003e\n        \u003cimg class=\"flex-media__item\" src=\"...\" alt=\"\" /\u003e\n    \u003c/a\u003e\n\u003c/figure\u003e\n```\n\n---\n\n## License\n\nCopyright (c) 2013 Maxime Thirouin\n\nReleased under [MIT Licence](http://moox.mit-license.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoox%2Fsass-flex-medias","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoox%2Fsass-flex-medias","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoox%2Fsass-flex-medias/lists"}