1 | <p align="center">
|
2 | <a href="http://zircle.io">
|
3 | <img src="https://raw.githubusercontent.com/zircleUI/docs/gh-pages/zircle-ui-blue.png" width="200">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 | <p align="center">
|
8 | A frontend library to develop zoomable user interfaces.
|
9 | </p>
|
10 |
|
11 | <p align="center">
|
12 | <a href="https://www.npmjs.com/package/zircle"><img src="https://img.shields.io/npm/v/zircle.svg"></a>
|
13 | <a href="https://vuejs.org/"><img alt="npm" src="https://img.shields.io/badge/vue-2.x-brightgreen.svg"></a>
|
14 | <a href="https://travis-ci.org/zircleUI/zircleUI"><img alt="Build Status" src="https://travis-ci.org/zircleUI/zircleUI.svg?branch=master"></a>
|
15 | <a href="https://www.npmjs.com/package/zircle"><img alt="downloads" src="https://img.shields.io/npm/dm/zircle.svg?style=flat"></a>
|
16 | <a href="https://codeclimate.com/github/zircleUI/zircleUI/maintainability"><img src="https://api.codeclimate.com/v1/badges/bfcc880f5084f9e828ed/maintainability" /></a>
|
17 | </p>
|
18 |
|
19 | <p align="center">
|
20 | Like it? Leave a star, it will help attract more visitors and contributors.<a href="https://github.com/zircleUI/zircleUI/stargazers"> <img src="https://img.shields.io/github/stars/zircleUI/zircleUI.svg?label=%E2%98%85%20Stars&logo=-&style=social"></a>
|
21 |
|
22 | </p>
|
23 |
|
24 | ## What is zircle-ui?
|
25 |
|
26 | **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.
|
27 |
|
28 | <img src="https://raw.githubusercontent.com/zircleUI/docs/gh-pages/final.gif" width="100%" style="border-radius: 6px;" alt="demo">
|
29 |
|
30 | ## Features
|
31 |
|
32 | - **Zoomable UI/UX:** Enjoy a different UI/UX with the built-in zoomable navigation.
|
33 |
|
34 | - **Circles everywhere:** Breaking away from the conventional UI with a circular UI Kit.
|
35 |
|
36 | - **Responsive:** zircle-ui works pretty well on mobile devices and big screens.
|
37 |
|
38 | - **Customizable themes:** Aren't the integrated color themes enough? No problem, it is easy to create new ones.
|
39 |
|
40 | - **Zero-conf routes:** Using Vue-router? Let **zircle-ui** handles the routes for you.
|
41 |
|
42 | ## When to use zircle-ui?
|
43 |
|
44 | 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.
|
45 |
|
46 | 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.
|
47 |
|
48 | ## About zircle-ui
|
49 | **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.
|
50 |
|
51 | **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.
|
52 |
|
53 | **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.
|
54 |
|
55 | ---
|
56 | ## Table of contents
|
57 | - [Status](#status-beta)
|
58 | - [Documentation, examples and tutorial](#documentation-examples-and-tutorial)
|
59 | - [Installation](#installation)
|
60 | * [Direct download](#--direct-download)
|
61 | * [Content delivery networks (CDN)](#--content-delivery-networks-cdn)
|
62 | * [NPM or Yarn](#--npm-or-yarn)
|
63 | - [Quick Start](#quick-start)
|
64 | * [Code Sandbox](#--code-sandbox)
|
65 | * [Browser](#--browser)
|
66 | * [Single File Components and vue-cli](#--single-file-components-and-vue-cli)
|
67 | - [Contributing](#contributing)
|
68 | - [License](#license)
|
69 |
|
70 | ---
|
71 |
|
72 | ## Status:
|
73 | Despite **zircle-ui** could be considered **stable**, it will remains as beta for a while because I would like to hear feedbacks regarding its usability.
|
74 |
|
75 | ## Documentation, examples and tutorial
|
76 | Please checkout [**zircle.io**](http://zircle.io) 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)
|
77 |
|
78 | ## Installation
|
79 |
|
80 | ### - Direct download
|
81 | Just 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.
|
82 |
|
83 | ### - Content delivery networks (CDN)
|
84 | Include `https://unpkg.com/zircle` in your project with `<script>` 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/)
|
85 |
|
86 | ### - NPM or Yarn
|
87 | NPM or Yarn are the recommended installation method for **zircle-ui**, if you are building medium to large scale applications.
|
88 |
|
89 | Create a project folder and inside it run:
|
90 |
|
91 | ```bash
|
92 | npm install zircle
|
93 | # OR
|
94 | yarn add zircle
|
95 | ```
|
96 |
|
97 | > - [Install Vue.js](https://vuejs.org/v2/guide/installation.html) before **zircle-ui**.
|
98 | > - 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).
|
99 |
|
100 |
|
101 | ## Quick Start
|
102 | There are several options to setup and start using **zircle-ui**.
|
103 |
|
104 | ### - Code Sandbox
|
105 | The 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)
|
106 |
|
107 | ### - Browser
|
108 | After 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 `<z-canvas>` component to start the development of your **zircle-ui** application.
|
109 |
|
110 | ```html
|
111 | <!DOCTYPE html>
|
112 | <html>
|
113 | <head>
|
114 | <!-- Vue.js -->
|
115 | <script type="text/javascript" src="https://unpkg.com/vue"></script>
|
116 |
|
117 | <!-- Zircle from CDN-->
|
118 | <script type="text/javascript" src="https://unpkg.com/zircle"></script>
|
119 | <link href="https://unpkg.com/zircle/dist/zircle.css" rel="stylesheet">
|
120 |
|
121 | </head>
|
122 | <body>
|
123 | <div id="app">
|
124 | <z-canvas :views="$options.components"></z-canvas>
|
125 | </div>
|
126 |
|
127 | <script>
|
128 | const home = {
|
129 | template: `<z-view> Hello World! </z-view>`
|
130 | }
|
131 | new Vue({
|
132 | el: '#app',
|
133 | components: {
|
134 | home
|
135 | },
|
136 | mounted () {
|
137 | this.$zircle.setView('home')
|
138 | }
|
139 | })
|
140 | </script>
|
141 | </body>
|
142 | </html>
|
143 | ```
|
144 |
|
145 | ### - Single File Components and vue-cli
|
146 | 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)](https://vuejs.org/v2/guide/single-file-components.html).
|
147 |
|
148 | 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](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:
|
149 |
|
150 | In the `main.js` file add this code:
|
151 | ```js{3-5}
|
152 | import Vue from 'vue'
|
153 | import App from './App'
|
154 | import zircle from 'zircle'
|
155 | import 'zircle/dist/zircle.css'
|
156 | Vue.use(zircle)
|
157 | new Vue({
|
158 | render: h => h(App)
|
159 | }).$mount('#app')
|
160 | ```
|
161 |
|
162 | In the `App.vue` file add this code:
|
163 | ```vue
|
164 | <template>
|
165 | <div id="app">
|
166 | <z-canvas :views="$options.components"></z-canvas>
|
167 | </div>
|
168 | </template>
|
169 |
|
170 | <script>
|
171 | import home from './components/home'
|
172 | export default {
|
173 | components: {
|
174 | home
|
175 | },
|
176 | mounted () {
|
177 | this.$zircle.setView('home')
|
178 | }
|
179 | }
|
180 | </script>
|
181 | ```
|
182 |
|
183 | Create the `home.vue` view in the **/components** folder:
|
184 | ```vue
|
185 | <template>
|
186 | <z-view>
|
187 | This screen was zirclelized!
|
188 | </z-view>
|
189 | </template>
|
190 | ```
|
191 |
|
192 | ## Contributing
|
193 | Many 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.
|
194 |
|
195 | ## Dedication
|
196 | In memory of my dad Néstor
|
197 |
|
198 | ## License
|
199 | [MIT Licensed | Copyright © 2017 - present | Juan Martín Muda](https://raw.githubusercontent.com/zircleUI/zircleUI/master/LICENSE)
|