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.
π Try Orbit now!
To quickly get a taste of Orbit, you can try it directly in a Orbit Codepen template.
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:
In case you are using CDN:
π Quick start
Basic Orbit layout
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-text>
, <o-slice>
, <o-progress>
web components . Hereβs a minimal working example:
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!