{"id":17498324,"url":"https://github.com/simonepri/css-viewport-units-cross-browser","last_synced_at":"2025-03-29T17:22:11.022Z","repository":{"id":66098949,"uuid":"39328594","full_name":"simonepri/css-viewport-units-cross-browser","owner":"simonepri","description":"Cross-Browser CSS3 Viewport Units: (vh, vw, vmin, vmax)","archived":false,"fork":false,"pushed_at":"2015-07-22T07:42:53.000Z","size":396,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-04T18:23:14.968Z","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":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonepri.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}},"created_at":"2015-07-19T09:20:56.000Z","updated_at":"2017-10-05T17:19:37.000Z","dependencies_parsed_at":"2023-02-19T22:30:47.578Z","dependency_job_id":null,"html_url":"https://github.com/simonepri/css-viewport-units-cross-browser","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/simonepri%2Fcss-viewport-units-cross-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonepri%2Fcss-viewport-units-cross-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonepri%2Fcss-viewport-units-cross-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonepri%2Fcss-viewport-units-cross-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonepri","download_url":"https://codeload.github.com/simonepri/css-viewport-units-cross-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246216536,"owners_count":20742003,"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-19T16:27:29.945Z","updated_at":"2025-03-29T17:22:10.985Z","avatar_url":"https://github.com/simonepri.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## DESCRIPTION\nThis library is designed to allow the use of ``viewport unit`` also on browsers that do not interpret them.\nSupports the use of all units ``(vh | vw | vmin | vmax)`` combined with all the properties of ``CSS3`` that supports them``(height | width | font-size | padding | etc. ..) ``.\n\nTo use it, simply add the following attribute to div interested:\n\n``A-B=\"X\"``\n\nWhere:\n  * ``A`` can be one of the four viewport unit. ``(Vh | vw | vmin | vmax)``\n  * ``B`` can be any property of ``CSS3`` supported. ``(Height | width | font-size | padding | etc ...)``\n  * ``X`` can be any numerical value that indicates the percentage of the unit above. ``(10 | 20 | 50 | 100 | etc ...)``\n\nExample:\n```html\n\u003cdiv vh-height=\"100\" vw-width=\"100\"\u003e\n  This div fills the screen both in width and in height.\n\u003c/div\u003e\n```\nTo do this, the library uses the ``native support`` of ``viewport unit`` when the browser allows it, and when not available uses ``Javascript`` to adapt the units to the screen size.\nDue to time, the ``Javascript`` code of the library uses some ``API`` from ``jQuery`` library (Any version of ``jQuery`` is supported).\n\n``When and if I have time, I will write a version of the library in pure Javascript.``\n\n## CUSTOMIZATION\nSince the properties that support ``viewport unit`` are relatively many, I created a program in ``C++11`` that allows you to select the properties and the units that serves to your project to create a lighter ``ad-hoc`` version of the library.\n\nTo do this simply open the file ``\"viewport-generator.cpp\" `` and remove/add the ``property`` and the ``viewport unit`` from ``property`` and ``viewtype`` and ``recompile`` the source.\nAre then generated four files ``\"viewport.css\"``, ``\"viewport.js\"``,``\"viewport.min.css\"`` and ``\"viewport.min.js\"`` ready to be used in your project.\n\n## INCLUSION LIBRARY\nAdd the following code inside the ``\u003chead\u003e\u003c/head\u003e`` tag:\n```html\n\u003clink rel=\"stylesheet\" href=\"viewport.min.css\"\u003e\n\u003cscript src=\"viewport.min.js\"\u003e\u003c/script\u003e\n```\nor:\n```html\n\u003clink rel=\"stylesheet\" href=\"viewport.css\"\u003e\n\u003cscript src=\"viewport.js\"\u003e\u003c/script\u003e\n```\t\n## EXAMPLE OF INCLUSION OF THE LIBRARY IN A PAGE\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml class=\"no-viewport\"\u003e\n\u003chead\u003e\n\t\u003ctitle\u003eViewport Test\u003c/title\u003e\n\t\u003clink rel=\"stylesheet\" href=\"./css/viewport.min.css\"\u003e\n\t\u003cscript src=\"https://code.jquery.com/jquery-2.1.4.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"./js/viewport.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody style=\"margin: 0;padding: 0;border: 0;\"\u003e\n\t\u003cdiv vh-height=\"100\" vw-width=\"100\" style=\"background-color:#ff0000;\"\u003e\n\t\tThis red div fills the screen both in width and height.\n\t\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonepri%2Fcss-viewport-units-cross-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonepri%2Fcss-viewport-units-cross-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonepri%2Fcss-viewport-units-cross-browser/lists"}