From b64d8b01f3359ea3635a7474160b137c19af25f3 Mon Sep 17 00:00:00 2001 From: Juan Martin Date: Sat, 28 Dec 2024 18:21:11 +0300 Subject: [PATCH] Update --- README.md | 261 ++++++++++++++---------------------------------------- 1 file changed, 68 insertions(+), 193 deletions(-) diff --git a/README.md b/README.md index 7431253..f6c74ca 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,9 @@

- ⚙️ Install • - 🤖 Features • - 🎮 Examples • 📚 Docs • - 💬 Github Discussions • - 🧑‍💻 Telegram Group + 💬 Github discussions • + 🧑‍💻 Telegram group

Use Orbit to create amazing radial UIs using CSS only! @@ -21,109 +18,94 @@

- Get involved, leave a star + Get involved, +place your ⭐ in Orbit!

+## Orbit CSS overview -## 🖖 Orbit in a nutshell +**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. -**Orbit** is the first general-purpose CSS framework designed specifically for radial user interfaces. We've used the latest CSS features to make building radial layouts a breeze. It provides intuitive CSS classes and Custom Elements for building radial menus, dashboards, creative portfolios, or a cutting-edge applications. ## Why Orbit? -Because creating radial UIs generally involves resorting to JS or other languages to calculate angles, radius, distances, etc. **Orbit** helps and saves you a lot of time by allowing you to build these UIs with just CSS. - -## Status -> We’re in the early stages of development, things are still evolving. You’re welcome to explore and experiment, but keep in mind that names, features, and functionalities may change as we refine our project. We appreciate your understanding and flexibility during this exciting phase! +Creating 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. ## What is radial UI? -Radial UI refers to a design paradigm where elements are organized and laid out in a circular or radial pattern, rather than the traditional grid-based or linear layouts. This approach can create visually appealing and intuitive interfaces, especially for applications that involve: +Radial 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: -- Circular data visualization (e.g., pie charts, multi-level pie charts, gauges, watch faces) -- Navigation menus or controls (e.g., radial or pie menus, circular scrolling) -- Dashboards (e.g., car dashboards, infotainment, smart-home dashboards) -- Landing pages (e.g., Orbit website landing page) +- **Circular data visualization:** progress bars, pie charts, multi-level pies, gauges, knobs +- **Navigation menus and controls:** radial or pie menus, circular scrolling +- **Dashboards:** smart-home interfaces, car dashboards, infotainment systems +- **Calendars:** circular layouts for scheduling and event tracking +- **Creative art and structures:** mandalas, sci-fi-inspired art, chemical structures +- **Interactive interfaces:** watch faces, dynamic controls for games or tools -**Characteristics of Radial UI:** +**Characteristics of radial UI:** -- Circular layout: Elements are arranged in a circular or curved pattern. -- Center-focused: The center of the circle often serves as a focal point. -- Symmetry: Radial UIs often exhibit symmetry, creating a sense of balance. -- Angular relationships: Elements are positioned at specific angles relative to each other. +- **Circular layout:** elements are arranged in a circular or curved pattern. +- **Center-focused:** the center often serves as a focal point. +- **Symmetry:** radial UIs frequently exhibit symmetry, fostering a sense of balance. +- **Angular relationships:** elements are positioned at specific angles relative to one another. -**Benefits of Radial UI:** +**Benefits of radial UI:** -- Aesthetics: Radial designs can be visually stunning and engaging. -- Intuitive navigation: Circular layouts can simplify navigation and reduce cognitive load. -- Space efficiency: Radial UIs can make efficient use of screen real estate. +- **Aesthetics:** radial designs are visually striking and engaging. +- **Intuitive navigation:** circular layouts simplify navigation and reduce cognitive load. +- **Space efficiency:** radial UIs make efficient use of available screen, ideal for both compact and expansive interfaces. ## Features -With Orbit, you can: +With **Orbit**, you can: -- ⁠Build any kind of radial UI using our predefined CSS classes that do the heavy lifting. -- ⁠Easily compose simple or complex radial designs by combining Orbit elements. -- ⁠Use Orbit alongside other traditional CSS frameworks. -- ⁠Get started quickly with our detailed documentation, examples, and guides that walk you through using Orbit's features effectively. +- Build any kind of radial UI using predefined CSS classes that do the heavy lifting. +- Easily compose simple or complex radial designs by combining **Orbit** elements. +- Use **Orbit** alongside other traditional CSS frameworks. +- Get started quickly with our detailed documentation, examples, and guides. -## 🚀 Try Orbit now! +## Documentation -To quickly get a taste of Orbit, you can try it directly in a [Orbit Codepen template](https://codepen.io/pen?template=KKjaoRj). +Learn all about **Orbit** in our [doc site](https://zumerlab.github.io/orbit-docs)! ## Installation -Orbit comes with just two files: `orbit.css` (or `orbit.min.css`), and `orbit.js` (or `orbit.min.js`). - -### Getting the Orbit files: - -You have three ways to get **Orbit** files: - -#### 1. Download the Orbit files - -- Get the **Orbit CSS file**: [orbit.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.css) or [orbit.min.css (minified)](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css) - -- Get the **Orbit JS file**: [orbit.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.js) or [orbit.min.js (minified)](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js) - - -#### 2. Use Orbit via CDN (content delivery network) +**Orbit** comes with just two files: `orbit.css` (or `orbit.min.css`) and `orbit.js` (or `orbit.min.js`). -- For latest version of **Orbit CSS file**: +### Obtaining the Orbit files - Uncompressed version: [https://unpkg.com/@zumer/orbit@latest/dist/orbit.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.css) +You can get **Orbit** files in three ways: - Minified version: [https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css) +#### 1. Download the files -- For latest version of **Orbit JS file**: +- 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). +- 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). - Uncompressed version: [https://unpkg.com/@zumer/orbit@latest/dist/orbit.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.js) +#### 2. Use a CDN - Minified version: [https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js) +- **CSS:** + Uncompressed: [orbit.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.css) + Minified: [orbit.min.css](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css) +- **JS:** + Uncompressed: [orbit.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.js) + Minified: [orbit.min.js](https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js) -#### 3. Install Orbit via a Package Manager +#### 3. Install via npm or yarn -You can also install Orbit using **npm** or **yarn**: - - ```sh - npm install @zumer/orbit - ``` - - Or - - ```sh - yarn add @zumer/orbit - ``` - -### Setting up Orbit in your project: +```sh +npm install @zumer/orbit +``` -After install Orbit, follow this simple steps to get Orbit working. +or -#### Link Orbit files or CDN in your HTML file: +```sh +yarn add @zumer/orbit +``` -If you have downloaded them just use ` tag ` for the CSS file, and ` - Orbit Quick Start - - -
-
-
-
1
-
2
-
3
-
-
- Curved text -
-
+
+
+
+
1
+
2
+
3
- - +
+
``` -## Radial elements - -### Bigbang - -The foundation of every Orbit project, serving as a container for your application. - -### Gravity-spot - -The parent container for organizing Orbit elements within a radial layout. - -### Orbit - -Defines a circular path around a .gravity-spot, with variations from .orbit-0 to .orbit-24. Within .orbit element, various Orbit elements such as `satellites`, `o-arcs`, `o-progress`, `vectors`, `sides`, and `o-texts` can be positioned. - -### Satellite - - Places elements along an .orbit or .orbit-* path, serving as content containers or nesting points for other orbits. - -### Vector - -Renders perpendicular lines across orbits, perfect for creating connector lines or minute marks. - -### Side - -Generates a regular polygon figure when used with other sides. - -### O-Text - -A web-component for rendering curved text. - -### o-arc - -A web-component for rendering radial slices, arcs, or pies. - -### O-Progress - -A web-component for rendering a radial progress bar. - - ## Examples -### A dashboard - -

- - - -

- - -### An orbital map +- **A dashboard** + ![demo1](https://raw.githubusercontent.com/zumerlab/orbit-docs/main/public/images/demo1.png) -

- - - -

+- **A watch** + ![demo3](https://raw.githubusercontent.com/zumerlab/orbit-docs/main/public/images/demo3.png) -### A watch +Explore more examples in our [doc site](https://zumerlab.github.io/orbit-docs/examples/progress). -

- - - -

- -### The solar system - -

- - - -

- - -> **Show & Tell**: -> -> Join to [Discussion section](https://github.com/zumerlab/orbit/discussions/15) and show off what have you done with Orbit. - - -## 🥋 Mastering Orbit - -Read the Orbit docs [here.](https://zumerlab.github.io/orbit-docs) - -## Stay in orbit +## Stay in Orbit There are many ways to **contribute** to **Orbit** development: @@ -277,10 +156,6 @@ There are many ways to **contribute** to **Orbit** development: - [**Telegram group**](https://t.me/ZumlyCommunity): Join our Telegram group for real-time discussions and updates. - ## License [MIT](https://github.com/zumerlab/orbit/blob/main/LICENSE) - - -