From 1fb71429138be164676f5f7704629a01eb29a3ba Mon Sep 17 00:00:00 2001 From: Juan Martin Date: Tue, 30 Jul 2024 14:59:03 +0300 Subject: [PATCH] update --- README.md | 123 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 112 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 8fb1112..9e8f5d7 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,120 @@ -## Welcome to Orbit! The CSS radial composer +

+ + + +

+ +

+ The CSS radial UI composer. +

+ +

+ + +

+ +

+ Get involved and leave a star. + +

+ +## 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! + +## Orbit in short **Orbit** is a CSS framework designed to create radial UI designs effortlessly. It provides intuitive CSS classes and standard web components for building radial menus, dashboards, creative portfolios, or a cutting-edge applications. -### Features -With Orbit, you can bring your web projects to life with unique and visually appealing radial layouts. Its features include: +### Installation & quick start + +This guide will help you quickly get started and install everything you need. + +#### Step 1: Include Orbit stylesheet + +To start using Orbit, include its CSS in your HTML file. You have two options: + +1. **Download or Import the CSS file**: + - **Download**: Download the CSS file from [here](https://unpkg.com/@zumer/orbit@latest/dist/orbit.css) and link it in your HTML file: + ```html + + + + ``` + - **Import**: Add the following to your stylesheet: + ```css + @import url('path/to/orbit.css'); + ``` + +2. **Include via CDN**: + - Add this to your HTML file: + ```html + + + + ``` + +#### Step 2: Include Orbit JavaScript (Recommended) + +If you plan to use additional features like radial progress bars, curved text, and slices, include Orbit's JavaScript. You can do this in two ways: + +1. **Download the JavaScript file**: + - Download from [here](https://unpkg.com/@zumer/orbit@latest/dist/orbit.js). + - Link it in your HTML file: + ```html + + + + ``` + +2. **Include via CDN**: + - Add this to your HTML file: + ```html + + + + ``` + +#### Step 3: Set up Orbit layout + +Now, create a container with the `gravity-spot` class, and within it, add a radial layout using the `orbit` class. Inside the `orbit`, add radial elements, such us: `satellite` class or `o-text` web component . Here’s a minimal working example: + +```html + + + + + + + Orbit Quick Start + + +
+
+
+
1
+
2
+
3
+
+
+ Curved text +
+
+
+ + +``` + +#### Step 4: Install via Package Manager (Optional) + +You can also install Orbit using npm or yarn for easier management in your project: -- **Easy-to-use CSS classes**: Simplify your development process with predefined CSS classes that take care of the heavy lifting. -- **Integrate with other CSS Frameworks**: Orbit complements rather than compete with other CSS frameworks. -- **Standard Web Components**: Leverage built-in web components like radial progress bars, curved text, and sectors to enhance your designs with interactive and dynamic elements. -- **Customization options**: Tailor the appearance and behavior of Orbit components to match your project’s branding and requirements. -- **Comprehensive documentation**: Get started quickly with detailed documentation, examples, and guides that walk you through the process of using Orbit’s features effectively. -- **Community support**: Join our community of developers who use Orbit. Share your creations, get feedback, and find help when you need it. +```sh +npm install @zumer/orbit +``` -### Documentation +### Next steps -Check our detailed docs [here.](https://zumerlab.github.io/orbit-docs) \ No newline at end of file +Check our detailed docs [here.](https://zumerlab.github.io/orbit-docs)