DEV Community

Cover image for Orbit a CSS framework for crafting simple or complex radial interfaces.
Juan Martin
Juan Martin

Posted on

Orbit a CSS framework for crafting simple or complex radial interfaces.

Hi Devs!

I've been a long-time fan of DEV, but this is my first post. I'm excited to introduce Orbit, a new CSS framework I've created that allows you to build radial interfaces using only CSS.

Orbit has a flexible API that borrows some spatial design concepts to make it familiar and easy to use. With Orbit, you can create complex radial layouts and designs without writing a single line of JavaScript. Imagine building gauges, charts, watches, Mini Cooper dashboards ;), solar systems, and even esoteric user interfaces seen in sci-fi movies! You can achieve all those and more with CSS.

I'll stop here, as I just want to introduce Orbit to the community. In future posts, I plan to write some tutorials and examples to help you get started with Orbit. If you have any suggestions for examples or projects you'd like to see, please let me know!

I left here a Codepen example

I'd love to hear your feedback.

Thank you,
Martin

Top comments (5)

Collapse
 
martinromanuk profile image
Martín Romanuk

Hey Martin,
This looks really cool! The idea of building radial interfaces with just CSS is something I haven't seen before. I can already think of a few use cases where this would be super handy, especially for dashboards and data visualizations.

Would love to see some examples or even a code walkthrough. Maybe show how Orbit could be integrated with existing CSS frameworks or even used in a real-world project?
Keen to try it out—thanks for sharing!

Collapse
 
tinchox5 profile image
Juan Martin

Thanks so much! I think dashboards and data visualizations are a great fit for radial interfaces. Integration with other CSS frameworks is definitely on my to-do list. Once I wrap up the documentation, I'll dive into exploring how Orbit can work seamlessly with Tailwind, Bootstrap, and Bulma, for example. The idea behind Orbit is to complement those general CSS frameworks.

As for examples and code walkthroughs, I plan to write some tutorials and case studies in the near future. If you got something specific in mind let me know.

Collapse
 
vladkens profile image
vladkens

Looks cool

Collapse
 
nidhi_mistry_275 profile image
Nidhi Mistry

Hey Martin,
This is something unique CSS framework to work with. I am excited to learn and work on it.

Collapse
 
tinchox5 profile image
Juan Martin

Thank you Nidhi,
Hope you feel easy to use!