{"id":25076225,"url":"https://github.com/zeixcom/anzeixer","last_synced_at":"2025-04-15T01:44:39.785Z","repository":{"id":10343113,"uuid":"12477736","full_name":"zeixcom/Anzeixer","owner":"zeixcom","description":"Toolkit to Streamline View Definitions for Responsive Web Design","archived":false,"fork":false,"pushed_at":"2024-01-10T13:32:49.000Z","size":333,"stargazers_count":60,"open_issues_count":9,"forks_count":7,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-07T03:09:09.517Z","etag":null,"topics":["breakpoints","css","customevent","javascript","responsive"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"asLody/VirtualApp","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeixcom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2013-08-30T04:07:14.000Z","updated_at":"2023-03-02T20:18:35.000Z","dependencies_parsed_at":"2025-02-07T01:45:00.233Z","dependency_job_id":null,"html_url":"https://github.com/zeixcom/Anzeixer","commit_stats":{"total_commits":39,"total_committers":5,"mean_commits":7.8,"dds":0.6153846153846154,"last_synced_commit":"cce4b21020474780514998aa21c97b2b8daf9631"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeixcom%2FAnzeixer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeixcom%2FAnzeixer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeixcom%2FAnzeixer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeixcom%2FAnzeixer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeixcom","download_url":"https://codeload.github.com/zeixcom/Anzeixer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991531,"owners_count":21194893,"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":["breakpoints","css","customevent","javascript","responsive"],"created_at":"2025-02-07T01:34:50.926Z","updated_at":"2025-04-15T01:44:39.764Z","avatar_url":"https://github.com/zeixcom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Anzeixer \u003cimg src=\"badge@2x.png\" width=\"130\" height=\"30\"\u003e\n========\n\nToolkit to Streamline View Definitions for Responsive Web Design\n\n\nWhat Is Anzeixer?\n-----------------\n\nAnzeixer is a set of CSS and JavaScript snippets that lets you define threshold values of views once, saving time and reducing errors.\n\n\nHow to Use Anzeixer?\n--------------------\n\n### Define Views in CSS with @media Rules\nDefine views that use media queries to apply CSS rules at specific breakpoints and give the views descriptive names. In addition to distinct views for different device widths, you can also create views for portrait and landscape orientations and for various pixel densities.\n\n```css\n/**\n * Medium\n */\n@media screen and (min-width: 768px) and (max-width: 999px) {\n\n  body:after {\n    content: 'm';\n    background: #ffe6a0;\n  }\n\n}\n\n@media screen and (min-width: 768px) and (max-width: 999px) and (orientation: portrait) {\n  body:after { content: 'm portrait'; }\n}\n\n@media screen and (min-width: 768px) and (max-width: 999px) and (orientation: landscape) {\n  body:after { content: 'm landscape'; }\n}\n```\n\n### Show the Current View During Development\nDuring development, you need to know that the correct CSS rules are being applied and that the correct JavaScript is being run. Add the \"dev\" class to the \u0026lt;body\u0026gt; tag to enable an indicator at the bottom left corner which displays the name of the current view.\n\n```html\n  \u003cbody class=\"dev\"\u003e\n```\n\n### Query the Current View with JavaScript\nYou probably need for certain user interface behavior to change depending on the view. For example, you might replace tabs with an accordion on very narrow screens. By using JavaScript to query the current view from CSS instead of defining the threshold values a second time in JavaScript, you reduce complexity and the likelihood of errors.\n\n```js\nAnzeixer.getView();      // returns string -- CSS content property of body:after\nAnzeixer.getSizeIndex(); // returns integer -- index of current view size\n\nAnzeixer.isXSmall();     // returns boolean -- target smallest devices only (xs)\nAnzeixer.isSmall();      // returns boolean -- target all small devices (xs and s)\nAnzeixer.isMedium();     // returns boolean -- target medium devices only (m)\nAnzeixer.isLarge();      // returns boolean -- target all large devices (l and xl)\nAnzeixer.isXLarge();     // returns boolean -- target largest devices only (xl)\n\nAnzeixer.isPortrait();   // returns boolean -- target portrait orientation\nAnzeixer.isLandscape();  // returns boolean -- target landscape orientation\n```\n\n### Improve Performance with Unified View Change Events\nOn pages with a lot of JavaScript, having each script listen for the browser's \"resize\" events individually can impose a significant performance penalty. Many scripts don't need to know the specific viewport size, only which view is in use. Anzeixer can help by triggering a \"viewchange\" event only when a breakpoint threshold is crossed, letting your scripts ignore \"resize\" events they don't need.\n\n```js\n/**\n * listen to viewchange event\n */\ndocument.addEventListener('viewchange', function(e){\n  console.log(e.detail.originalView + ' -\u003e ' + e.detail.currentView);\n}, false);\n```\n\n\nWho's behind Anzeixer?\n----------------------\n\nAnzeixer is being developed by Zeix's user interface development team.\n\nAnzeixer may be freely used under the MIT license.\n\nContact: Esther Brunner \u003cesther.brunner@zeix.com\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeixcom%2Fanzeixer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeixcom%2Fanzeixer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeixcom%2Fanzeixer/lists"}