{"id":14243201,"url":"https://github.com/zumerlab/orbit","last_synced_at":"2025-05-15T03:02:58.522Z","repository":{"id":249556702,"uuid":"607167827","full_name":"zumerlab/orbit","owner":"zumerlab","description":"💫 Orbit is a general-purpose CSS framework designed for building any kind of radial UI.","archived":false,"fork":false,"pushed_at":"2025-03-25T11:41:55.000Z","size":2129,"stargazers_count":583,"open_issues_count":3,"forks_count":9,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-13T12:18:52.539Z","etag":null,"topics":["composer","css","css-framework","design-system","hacktoberfest","html","radial","scss","ui","ux","webcomponents"],"latest_commit_sha":null,"homepage":"https://zumerlab.github.io/orbit-docs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zumerlab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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,"zenodo":null},"funding":{"github":"tinchox5","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2023-02-27T13:06:33.000Z","updated_at":"2025-05-12T05:17:07.000Z","dependencies_parsed_at":"2024-07-21T20:44:44.119Z","dependency_job_id":"afa6a4ad-776d-4d29-93b4-30cef5b69897","html_url":"https://github.com/zumerlab/orbit","commit_stats":{"total_commits":419,"total_committers":2,"mean_commits":209.5,"dds":0.2959427207637232,"last_synced_commit":"b226da50fefb031ec7505f8fe534ae743a5810e8"},"previous_names":["zumerlab/orbit"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Forbit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Forbit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Forbit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Forbit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zumerlab","download_url":"https://codeload.github.com/zumerlab/orbit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253939207,"owners_count":21987412,"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":["composer","css","css-framework","design-system","hacktoberfest","html","radial","scss","ui","ux","webcomponents"],"created_at":"2024-08-21T13:01:15.029Z","updated_at":"2025-05-15T03:02:58.484Z","avatar_url":"https://github.com/zumerlab.png","language":"JavaScript","readme":"\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://zumerlab.github.io/orbit-docs\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/zumerlab/orbit-docs/main/public/images/orbithero.gif\" width=\"100%\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://zumerlab.github.io/orbit-docs\" target=\"_blank\"\u003e\u003cb\u003e📚 Docs\u003c/b\u003e\u003c/a\u003e •\n  \u003ca href=\"https://github.com/zumerlab/orbit/discussions\" target=\"_blank\"\u003e\u003cb\u003e💬 Github discussions\u003c/b\u003e\u003c/a\u003e •\n  \u003ca href=\"https://t.me/ZumlyCommunity\" target=\"_blank\"\u003e\u003cb\u003e🧑‍💻 Telegram group\u003c/b\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eUse Orbit to create amazing radial UIs using CSS only!\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@zumer/orbit\"\u003e\u003cimg src=\"https://img.shields.io/github/package-json/v/zumerlab/orbit\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#stay-in-orbit\"\u003e\u003cb\u003eGet involved\u003c/b\u003e\u003c/a\u003e, \nplace your ⭐ in Orbit! \u003ca href=\"https://github.com/zumerlab/orbit/stargazers\"\u003e \u003cimg src=\"https://img.shields.io/github/stars/zumerlab/orbit.svg?label=%E2%98%85%20Stars\u0026logo=-\u0026style=social\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Orbit CSS overview\n\n**Orbit** is a CSS framework designed for creating radial layouts. It offers simplicity, effectiveness, ease of use, and tremendous versatility for crafting compelling designs. It offers extensive customization options and supports nesting for building intricate designs tailored to your requirements.\n\n## Why Orbit?\n\nCreating radial UIs generally involves using JavaScript or other programming languages to calculate angles, radii, distances, and more. **Orbit** saves you time and effort by enabling you to build these UIs with just CSS.\n\n## Features\n\nWith **Orbit**, you can:\n\n- Build any kind of radial UI using predefined CSS classes that do the heavy lifting.  \n- Easily compose simple or complex radial designs by combining **Orbit** elements.  \n- Use **Orbit** alongside other traditional CSS frameworks.  \n- Get started quickly with our detailed documentation, examples, and guides.  \n\n## Documentation\n\nLearn all about **Orbit** in our [doc site](https://zumerlab.github.io/orbit-docs)!\n\n## What is radial UI?\n\nRadial UI refers to a design paradigm where elements are organized in a circular or radial pattern, diverging from traditional grid-based or linear layouts. This design approach is particularly effective for applications that involve:\n\n- **Circular data visualization:** progress bars, pie charts, multi-level pies, gauges, knobs  \n- **Navigation menus and controls:** radial or pie menus, circular scrolling  \n- **Dashboards:** smart-home interfaces, car dashboards, infotainment systems  \n- **Calendars:** circular layouts for scheduling and event tracking  \n- **Creative art and structures:** mandalas, sci-fi-inspired art, chemical structures  \n- **Interactive interfaces:** watch faces, dynamic controls for games or tools  \n\n**Characteristics:**\n\n- **Circular layout:** elements are arranged in a circular or curved pattern.  \n- **Center-focused:** the center often serves as a focal point.  \n- **Symmetry:** radial UIs frequently exhibit symmetry, fostering a sense of balance.  \n- **Angular relationships:** elements are positioned at specific angles relative to one another.  \n\n**Benefits:**\n\n- **Aesthetics:** radial designs are visually striking and engaging.  \n- **Intuitive navigation:** circular layouts simplify navigation and reduce cognitive load.  \n- **Space efficiency:** radial UIs make efficient use of available screen, ideal for both compact and expansive interfaces.  \n\n## Installation\n\n**Orbit** comes with just two files: `orbit.css` (or `orbit.min.css`) and `orbit.js` (or `orbit.min.js`).\n\n### Obtaining the Orbit files\n\nYou can get **Orbit** files in three ways:  \n\n#### 1. Download the files\n\n- Download the **CSS file:** [orbit.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.css) or [orbit.min.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css).  \n- Download the **JS file:** [orbit.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.js) or [orbit.min.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js).  \n\n#### 2. Use a CDN\n\n- **CSS:**  \n  Uncompressed: [orbit.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.css)  \n  Minified: [orbit.min.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css)  \n\n- **JS:**  \n  Uncompressed: [orbit.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.js)  \n  Minified: [orbit.min.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js)  \n\n#### 3. Install via npm or yarn\n\n```sh\nnpm install @zumer/orbit\n```\n\nor\n\n```sh\nyarn add @zumer/orbit\n```\n\n### Adding Orbit to your project\n\nInclude the files in your project as follows:\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"path/to/orbit.css\"\u003e\n  \u003cscript src=\"path/to/orbit.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nOr via CDN:\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@zumer/orbit@latest/dist/orbit.css\"\u003e\n  \u003cscript src=\"https://unpkg.com/@zumer/orbit@latest/dist/orbit.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n## 🏁 Quick start\n\n```html\n\u003cdiv class=\"bigbang\"\u003e\n  \u003cdiv class=\"gravity-spot\"\u003e\n    \u003cdiv class=\"orbit-2 range-180 from-180\"\u003e\n      \u003co-arc shape=\"circle\" class=\"shrink-50\"\u003e\u003c/o-arc\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"orbit-3 range-270 \"\u003e\n      \u003co-arc shape=\"circle\" class=\"shrink-50\"\u003e\u003c/o-arc\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Examples\n\n- **A dashboard**  \n  ![demo1](https://raw.githubusercontent.com/zumerlab/orbit-docs/main/public/images/demo1.png)  \n\n- **A watch**  \n  ![demo3](https://raw.githubusercontent.com/zumerlab/orbit-docs/main/public/images/demo3.png)  \n\nExplore more examples in our [doc site](https://zumerlab.github.io/orbit-docs/examples/progress).\n\n## Stay in Orbit\n\nThere are many ways to **contribute** to **Orbit** development:\n\n- [**Contribution guidelines**](https://github.com/zumerlab/orbit/blob/main/CONTRIBUTING.md): This guide outlines how you can contribute to Orbit, help us test and improve it, and share your experiences with the community.\n- [**GitHub discussions**](https://github.com/zumerlab/orbit/discussions): Engage with other contributors, ask questions, and share your experiences.\n- [**Telegram group**](https://t.me/ZumlyCommunity): Join our Telegram group for real-time discussions and updates.\n\n## Special thanks to our contributors\n\n\u003ca href=\"https://github.com/zumerlab/orbit-docs/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=zumerlab/orbit-docs\" /\u003e\n\u003c/a\u003e\n\n## License \n\n[MIT](https://github.com/zumerlab/orbit/blob/main/LICENSE)\n","funding_links":["https://github.com/sponsors/tinchox5"],"categories":["JavaScript","SCSS","Specialized"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzumerlab%2Forbit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzumerlab%2Forbit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzumerlab%2Forbit/lists"}