RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://zumerlab.github.io/orbit-docs/introduction/installation below:

Installation & quick start | Orbit CSS radial UI composer

Installation & quick start

Get ready to explore the innovative approach of radial design with Orbit! This guide will help you quickly get started and install everything you need.

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 or orbit.min.css (minified)
Get the Orbit JS file: orbit.js or orbit.min.js (minified)

2. Use Orbit via CDN (content delivery network)

For latest version of Orbit CSS file:

Uncompressed version: https://unpkg.com/@zumer/orbit@latest/dist/orbit.css

Minified version: https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css
For latest version of Orbit JS file:

Uncompressed version: https://unpkg.com/@zumer/orbit@latest/dist/orbit.js

Minified version: https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js

3. Install Orbit via a Package Manager

You can also install Orbit using npm, yarn or pnpm:

Setting up Orbit in your project:

After install Orbit, follow this simple steps to get Orbit working.

Link Orbit files or CDN in your HTML file:

If you have downloaded them just use <link> tag for the CSS file, and <script> tag for the JS file within the <head> section:

In case you have downloaded the files:

<head>
  <link rel="stylesheet" href="path/to/orbit.css">
  <script src="path/to/orbit.js"></script>
</head>

In case you are using CDN:

<head>
  <link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
  <script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>
</head>

Tip

Tip for CSS file: You can use @import CSS rule in your <style> tag to import the CSS file:

Downloaded file:

@import url('path/to/orbit.css');

Or via CDN:

@import url('https://unpkg.com/@zumer/orbit@latest/dist/orbit.css');

🚀 Try Orbit now!

Just add .bigbang CSS class in a HTML element like <div>. Then use .gravity-spot class, and within it, add another element with .orbit class. Finally, inside .orbit element, add radial elements, such us: .satellite, .vector, .side, or <o-arc>, <o-progress> web components .

Playground starter example Orbit and JS frameworks integrations

Orbit can be used in any framework that accepts web-components. Check our specific section that covers how to use Orbit with Vue, React, and Svelte.

Next steps

Congratulations! You have successfully integrated Orbit into your project. Now, you can explore more advanced features and customization options. Check out the full documentation for detailed guides and examples.

Happy coding!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4