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

#webdev #css #opensource #showdev

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)

Martín Romanuk • Aug 27

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!

Juan Martin • Aug 27

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.