A frontend library to develop zoomable user interfaces
npm install zircle
A frontend library to develop zoomable user interfaces.
Like it? Get involved, fork it or leave a star.
> I've been working on a new zooming engine.
>
> Give Zumly a try and joing our community at https://zumly.org!
Zircle-ui is an experimental frontend library to develop zoomable user interfaces (ZUI). It is based on vue.js and JavaScript and comes with a set of components to create unconventional user interfaces.

- Zoomable UI/UX: Enjoy a different UI/UX with the built-in zoomable navigation.
- Circles everywhere: Breaking away from the conventional UI with a circular UI Kit.
- Responsive: zircle-ui works pretty well on mobile devices and big screens.
- Customizable themes: Aren't the integrated color themes enough? No problem, it is easy to create new ones.
- Zero-conf routes: Using Vue-router? Let zircle-ui handles the routes for you.
You 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.
In 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.
Zircle-ui intends to promote 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.
Zircle-ui was inspired by the idea underneath some really awesome projects and articles like prezi, impress.js, tizen, zoomooz, creativebloq's article, google maps, bootstrap, UIKit and bulma among others.
---
---
https://unpkg.com/zircle in your project with 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/ Create a project folder and inside it run:
``bash `
npm install zircleOR
yarn add zircle
> - Install Vue.js before zircle-ui.
> - 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).
component to start the development of your zircle-ui application.`html
`$3
As 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).Vue-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, you can install zircle-ui with NPM or Yarn and add the following code to your vue-cli project:
In the
main.js file add this code:
`js{3-5}
import Vue from 'vue'
import App from './App'
import zircle from 'zircle'
import 'zircle/dist/zircle.css'
Vue.use(zircle)
new Vue({
render: h => h(App)
}).$mount('#app')
`In the
App.vue file add this code:
`vue
`Create the
home.vue view in the /components folder:
`vue
This screen was zirclelized!
``