{"id":13440677,"url":"https://github.com/zircleUI/zircleUI","last_synced_at":"2025-03-20T10:32:04.493Z","repository":{"id":41131176,"uuid":"100559691","full_name":"zircleUI/zircleUI","owner":"zircleUI","description":"🚀 zircle-ui is a frontend library to develop zoomable user interfaces.","archived":false,"fork":false,"pushed_at":"2024-06-27T10:37:12.000Z","size":5746,"stargazers_count":937,"open_issues_count":0,"forks_count":63,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-07-16T18:12:56.734Z","etag":null,"topics":["css","design","experimental","frontend-library","html","javascript","ui-components","uikit","vue","zircle-ui"],"latest_commit_sha":null,"homepage":"https://zircleui.github.io/docs/","language":"Vue","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/zircleUI.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"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}},"created_at":"2017-08-17T04:00:41.000Z","updated_at":"2024-05-29T18:32:48.000Z","dependencies_parsed_at":"2023-01-21T18:00:40.281Z","dependency_job_id":"f03daf5e-9ca3-4b2c-a334-eee888034461","html_url":"https://github.com/zircleUI/zircleUI","commit_stats":null,"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zircleUI%2FzircleUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zircleUI%2FzircleUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zircleUI%2FzircleUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zircleUI%2FzircleUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zircleUI","download_url":"https://codeload.github.com/zircleUI/zircleUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213299302,"owners_count":15566599,"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","design","experimental","frontend-library","html","javascript","ui-components","uikit","vue","zircle-ui"],"created_at":"2024-07-31T03:01:25.049Z","updated_at":"2024-10-28T00:30:28.251Z","avatar_url":"https://github.com/zircleUI.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://zircle.io\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/zircleUI/docs/gh-pages/zircle-ui-blue.png\" width=\"200\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  A frontend library to develop zoomable user interfaces.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/zircle\"\u003e\u003cimg src=\"https://img.shields.io/github/package-json/v/zircleui/zircleui\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://vuejs.org/\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/badge/vue-2.x-brightgreen.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/zircle\"\u003e\u003cimg alt=\"downloads\" src=\"https://img.shields.io/npm/dm/zircle.svg?style=flat\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.codacy.com/gh/zircleUI/zircleUI/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=zircleUI/zircleUI\u0026amp;utm_campaign=Badge_Grade\"\u003e\u003cimg src=\"https://app.codacy.com/project/badge/Grade/88ef4dd3011f43f4ae54eaf69f071dd4\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Like it? Get involved, fork it or leave a star. \u003ca href=\"https://github.com/zircleUI/zircleUI/stargazers\"\u003e \u003cimg src=\"https://img.shields.io/github/stars/zircleUI/zircleUI.svg?label=%E2%98%85%20Stars\u0026logo=-\u0026style=social\"\u003e\u003c/a\u003e\n  \n\u003c/p\u003e\n\n## Status\n\n👇👇👇👇\n\n**Zircle** was split into two independent projects:\n\n- [**Zumly**](https://github.com/zumerlab/zumly), as a zoomable engine library.\n- [**Orbit**](https://github.com/zumerlab/orbit) as a CSS framework for composing radial designs and UIs. \n\nThey can be used together as well. Both Orbit and Zumly are lightweight and don't depend on other tools like Vue. \n\n \n## What is zircle-ui?\n\n**Zircle-ui** is an experimental frontend library to develop [zoomable user interfaces (ZUI)](https://en.wikipedia.org/wiki/Zooming_user_interface). It is based on [vue.js](https://vuejs.org/) and JavaScript and comes with a set of components to create unconventional user interfaces.\n\n\u003cimg src=\"https://raw.githubusercontent.com/zircleUI/docs/gh-pages/final.gif\" width=\"100%\" style=\"border-radius: 6px;\" alt=\"demo\"\u003e\n\n## Features\n\n- **Zoomable UI/UX:** Enjoy a different UI/UX with the built-in zoomable navigation.\n\n- **Circles everywhere:** Breaking away from the conventional UI with a circular UI Kit.\n\n- **Responsive:** zircle-ui works pretty well on mobile devices and big screens. \n\n- **Customizable themes:** Aren't the integrated color themes enough? No problem, it is easy to create new ones.\n\n- **Zero-conf routes:** Using Vue-router? Let **zircle-ui** handles the routes for you.\n\n## When to use zircle-ui?\n\nYou can try **zircle-ui** to develop a wide range of applications, such as: dashboards, health/fitness trackers, IOT hubs or controllers, contact management, information and entertainment, interactive menus, etc.\n\nIn general, using **zircle-ui** should be fine if your application is highly interactive and you need to intuitively view and control information without loosing the user’s attention. \n\n## Using Vue 3?\nCheck out  [zircleui/vue3 branch](https://github.com/zircleUI/zircleUI/tree/vue3)\n\n## About zircle-ui\n**Zircle-ui** is the first [Open Source Project](https://opensource.guide/starting-a-project/) I've made and it was possible thanks to the Open Source community, specially the [Vue](https://vuejs.org) community. In retribution, I've created a project of the highest quality I could within my limitations since I'm not a professional developer. \n\n**Zircle-ui** intends to promote a different approach in the universe of UIs. My main motivation is believing there is room for a new UI/UX not constrained to grid layouts or to squared shapes. \n\n**Zircle-ui** was inspired by the idea underneath some really awesome projects and articles like [prezi](https://www.prezi.com), [impress.js](https://github.com/impress/impress.js), [tizen](https://www.tizen.org/), [zoomooz](http://jaukia.github.io/zoomooz/), [creativebloq's article](https://www.creativebloq.com/create-zoomable-user-interface-css-transforms-9114269), [google maps](http://maps.google.com), [bootstrap](https://getbootstrap.com/), [UIKit](https://getuikit.com/) and [bulma](https://bulma.io) among others. \n\n---\n## Table of contents\n- [Documentation, examples and tutorial](#documentation-examples-and-tutorial)\n- [Installation](#installation)\n  * [Direct download](#--direct-download)\n  * [Content delivery networks (CDN)](#--content-delivery-networks-cdn)\n  * [NPM or Yarn](#--npm-or-yarn)\n- [Quick Start](#quick-start)\n  * [Code Sandbox](#--code-sandbox)\n  * [Browser](#--browser)\n  * [Single File Components and vue-cli](#--single-file-components-and-vue-cli)\n- [Contributing](#contributing)\n- [License](#license)\n\n---\n\n## Documentation, examples and tutorial\nPlease checkout [**https://zircleui.github.io/docs/**](https://zircleui.github.io/docs/) to learn how to use **zircle-ui**. For early **zircle-ui** users a **easy-to-follow migration guide** [is available here](https://zircleui.github.io/docs/guide/migration.html)\n\n## Installation\n\n### - Direct download \nJust download **zircle-ui** from [Github](https://github.com/zircleUI/zircleUI/tree/master/dist). You need to download the zircle.umd.js or the zircle.umd.min.js file along with the zircle.css file.\n\n### - Content delivery networks (CDN)\nInclude `https://unpkg.com/zircle` in your project with `\u003cscript\u003e` tag. With CDN you will have the latest version of **zircle-ui** as soon as it is published to NPM. You can also browse the source of the npm package at [https://unpkg.com/zircle/](https://unpkg.com/zircle/) \n\n### - NPM or Yarn\nNPM or Yarn are the recommended installation method for **zircle-ui**, if you are building medium to large scale applications. \n\nCreate a project folder and inside it run:\n\n```bash \nnpm install zircle\n# OR\nyarn add zircle\n```\n\n\u003e - [Install Vue.js](https://vuejs.org/v2/guide/installation.html) before **zircle-ui**.\n\u003e - For small applications or prototyping you can directly use **zircle-ui** into a browser and for more complex apps you can use **zircle-ui** with [Single File Components (SFC)](https://vuejs.org/v2/guide/single-file-components.html). \n\n\n## Quick Start\nThere are several options to setup and start using **zircle-ui**.\n\n### - Code Sandbox \nThe easiest way to try and start using **zircle-ui** is using [JSFiddle](https://jsfiddle.net/tinchox5/37mr5324/) or [Codepen](https://codepen.io/zircle/pen/ypZdWZ). For **zircle-ui** projects based on vue-cli 3 you can try [CodeSandbox](https://codesandbox.io/s/y26p3q79k9)\n\n### - Browser\nAfter you have installed **zicle ui** using [direct download](#--direct-download) or [CDN](#--content-delivery-networks-cdn), the following starter template creates a Vue Instance and provides `\u003cz-canvas\u003e` component to start the development of your **zircle-ui** application.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n  \u003c!-- Vue.js --\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n \n  \u003c!-- Zircle from CDN--\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/zircle\"\u003e\u003c/script\u003e\n  \u003clink href=\"https://unpkg.com/zircle/dist/zircle.css\" rel=\"stylesheet\"\u003e\n\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cz-canvas :views=\"$options.components\"\u003e\u003c/z-canvas\u003e\n  \u003c/div\u003e\n\n  \u003cscript\u003e\n    const home = {\n      template: `\u003cz-view\u003e Hello World! \u003c/z-view\u003e`\n    }\n    new Vue({\n      el: '#app',\n      components: {\n        home\n      },\n      mounted () {\n        this.$zircle.setView('home')\n      }\n    })\n  \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### - Single File Components and vue-cli\nAs Vue documentation explains, with the previous setup you can work very well for small to medium-sized projects. However, in more complex projects it is better to use [Single File Components (SFC)](https://vuejs.org/v2/guide/single-file-components.html).\n\nVue-cli is a powerful tool to develop complex projects. So, after you have installed and run vue-cli as it is described in the [official Vue cli docs](https://cli.vuejs.org/guide/installation.html), you can install **zircle-ui** with [NPM or Yarn](#--npm-or-yarn) and add the following code to your vue-cli project:\n\nIn the `main.js` file add this code:\n```js{3-5}\nimport Vue from 'vue'\nimport App from './App'\nimport zircle from 'zircle'\nimport 'zircle/dist/zircle.css'\nVue.use(zircle)\nnew Vue({\n  render: h =\u003e h(App)\n}).$mount('#app')\n```\n\nIn the `App.vue` file add this code:\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cz-canvas :views=\"$options.components\"\u003e\u003c/z-canvas\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import home from './components/home'\n  export default {\n    components: {\n      home\n    },\n    mounted () {\n      this.$zircle.setView('home')\n    }\n  }\n\u003c/script\u003e\n```\n\nCreate the `home.vue` view in the **/components** folder:\n```vue\n\u003ctemplate\u003e\n  \u003cz-view\u003e\n    This screen was zirclelized!\n  \u003c/z-view\u003e\n\u003c/template\u003e\n```\n\n## Contributing\nMany things could be improved and enriched with you collaboration no matter if you are a developer or not. [Here you will find](https://zircleui.github.io/docs/contribute/) some guidelines for inspiration.\n\n## Dedication\nIn memory of my dad Néstor\n\n## License\n[MIT Licensed | Copyright © 2017 - present | Juan Martín Muda](https://raw.githubusercontent.com/zircleUI/zircleUI/master/LICENSE)\n","funding_links":[],"categories":["Vue","Frameworks [🔝](#readme)","Components \u0026 Libraries","Frameworks"],"sub_categories":["Frameworks","Responsive"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FzircleUI%2FzircleUI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FzircleUI%2FzircleUI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FzircleUI%2FzircleUI/lists"}