{"id":18795176,"url":"https://github.com/r3wt/ez-framework","last_synced_at":"2026-05-10T02:43:31.084Z","repository":{"id":78781048,"uuid":"78377845","full_name":"r3wt/ez-framework","owner":"r3wt","description":"a rethought approach to responsive web design","archived":false,"fork":false,"pushed_at":"2017-03-09T21:57:47.000Z","size":26,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-29T16:42:45.118Z","etag":null,"topics":["css","css-framework","ez-framework","js","responsive-design","sass"],"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/r3wt.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-08T23:37:52.000Z","updated_at":"2023-03-05T02:04:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"8d003c7e-3d30-4f6a-8e49-ef201e771502","html_url":"https://github.com/r3wt/ez-framework","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/r3wt%2Fez-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3wt%2Fez-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3wt%2Fez-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3wt%2Fez-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/r3wt","download_url":"https://codeload.github.com/r3wt/ez-framework/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239719651,"owners_count":19685979,"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":["css","css-framework","ez-framework","js","responsive-design","sass"],"created_at":"2024-11-07T21:32:49.848Z","updated_at":"2025-12-30T02:30:13.990Z","avatar_url":"https://github.com/r3wt.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"### ez-framework\n\n# abstract\n-----\n- to provide as small as possible file size.\n- deliver an extensible responsive framework in a single javascript file.\n- instead of using media queries, use a simple concept of device type:\n\t- mobile\n\t- tablet\n\t- desktop\n- needs to render fast\n- no screen flicker\n- no dependencies; PERIOD!\n- familiar 12 column layout concept\n- to be easily customizeable and extendable\n\t1. drop in sass dependencies\n\t2. edit sass\n\t3. edit js\n\t4. recompile\n\n# notes\n-----\n1. ez automatically pulls in roboto font and material design icons from googlefonts.\n2. ez has a throttled window listener to check body sizes.\n3. the device detection is basic at this time, and the logical precendence is important for the detection to work. you can see explanation in src/ez.js `getSize()` function.\n\n\t\n# roadmap\n-----\n1. ~~grid~~\n2. ~~basic size selection~~\n3. ~~improve device size selection~~\n4. ~~basic typography~~\n5. scaling typography\n6. list \u0026 menu components (including navbar)\n7. form components \n8. ~~animated loading indicator~~\n\t\n# building\n-----\n1. clone repo\n2. install dependencies with `npm install`\n3. build with gulp `gulp`\n\t\n# usage\n-----\n```html\n\u003c!-- its really this simple --\u003e\n\u003cscript src=\"dist/ez.min.js\"\u003e\u003c/script\u003e\n```\n\n# js documentation\n-----\nnone yet.\n\t\n# css documentation\n-----\n\n1. `.row` - a row of columns\n2. `.container(.fluid)` - a container element with max width of 1200px. add `.fluid` class for full width.\n3. `.col` - a column element. default width 100%, so in case of element having class `.col.m-12` width will be 100% since no selector other than `.col` will match. \n4. `.col.m-{1-11}` m stands for **mobile**. width of element is 100 / number (in percent), same as bootstrap and foundation.\n5. `.col.t-{1-11}` t stands for **tablet**. width of element is 100 / number (in percent), same as bootstrap and foundation.\n6. `.col.d-{1-11}` m stands for **desktop**. width of element is 100 / number (in percent), same as bootstrap and foundation.\n8. `.loading(.hide-contents)` attaching this class will overlay an element with an loading indicator animation. add `.hide-contents` to hide all other children of the element.\n9. `.input` works on textarea,select,and inputs. \n10. `.btn` to be used on buttons, links, and input[type=\"button\"] extra classes coming soon.\n11. `.form-group` provides a bottom margin to a group of form inputs. identical to the same concept in bootstrap.\n12. `.checkbox` coming soon\n13. `.radio` coming soon\n14. `.switch` coming soon\n15. `.slider` coming soon","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr3wt%2Fez-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr3wt%2Fez-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr3wt%2Fez-framework/lists"}