Prometheus Framework – Empowering Web3 Development

Prometheus is a comprehensive Web3 framework designed for an optimal user experience and easy development. This library, built on Vue 3 with Server-Side Rendering (SSR) and Web3 support, provides a plethora of components, methods, styles, and more for robust fullstack development.

⚠️ WARNING: This library is under active development. Expect changes in the module structure. Use only if you're prepared to contribute. Use at your own risk. ⚠️

Created by OZ DAO. Visit our website: www.ozdao.dev

Table of Contents

• Getting Started
• What's Inside?
• Motivation
• Installation
• Usage
  • Global Import
  • Individual Import
  • Local Import
• Components
• Modules
• Contributing
• License

Getting Started

In Greek mythology, Prometheus is a Titan god of fire. Prometheus is best known for defying the gods by stealing fire from them and giving it to humanity in the form of technology, knowledge, and more generally, civilization. So our goal is to provide people with the best technologies and solutions that they can easily use every day.

What's inside?

• Vue 3
• Express
• Mongoose

Motivation

Why create another UI framework when there are a huge number of solutions that have been developed and supported for a long time, with a large community?

• Prometheus Unchained by OZ DAO - Look, we're just gonna do it, okay? Our own thing, bugs and all. It's like building a treehouse, but for code.
• Global Vision Quest - This ain't just any framework. We're aiming for the stars, man! Big dreams, big web 3.0 projects, worldwide. Like the Avengers, but nerdier.
• Simple Swag - We've got those dope tranisition, some nifty fonts (Ave to Adrian Frutiger), and, oh boy, those ROUNDINGS that'll make everything pop. Because who doesn't love some good curve appeal?

Installation

Use npm to install the Prometheus Framework:

npm install '@ozdao/prometheus-framework'

Usage

Prometheus Framework is organized as a fullstack monorepo, containing modules each comprising both client-side and server-side code. Here is a breakdown of the typical structure within each module:

• Models: These are the backend models utilized within the module.
• Routes: The pathways to the module's endpoints.
• Controllers: Controllers for the backend side of the module.
• Store: The store for managing client-side state.
• Router: The router for managing client-side navigation.
• Components: The views or components in the MVC paradigm.

Here's how you can use and navigate the Prometheus Framework:

Modules

The framework also encompasses the following modules:

• auth
• community
• events
• global
• icons
• marketplace
• middlewares
• mobile
• orders
• organizations
• products
• spots
• users

Components

Prometheus Framework includes a broad array of UI components:

• Address
• AskToLogin
• Breadcrumbs
• Button
• Checkbox
• Dropdown
• EmptyState
• Error
• Field
• FieldBig
• FieldPhone
• Footer
• Header
• Loader
• LocationMarker
• LocationSelection
• Magnifier
• Map
• Navigation
• Popup
• Radio
• Search
• Select
• Sidebar
• Spoiler
• Status
• Tab
• Text
• Tooltip
• Upload
• UploadImage
• UploadImageMultiple
• index.ts

The styling in Prometheus Framework is meticulously organized to ensure a seamless development experience and an optimal user interface. Based on the given folder structure, here's how you can understand and utilize the styling resources provided:

Styles

The styles are organized in a hierarchical folder and file structure, providing a clear separation of concerns and making it easy to locate and manage style definitions. Here's a breakdown:

• Base Styles:

  • reset.scss: Resets the default styling of HTML elements to a consistent baseline.
  • layout.scss: Contains general layout styles, grid system, and utility classes.
  • config.scss: Contains configuration variables, like colors, breakpoints, and font definitions.

• Components Styles (located in components folder):

  • Styles for individual UI components are isolated into their own files, like button.scss, card.scss, popup.scss, etc. This makes it easy to find and edit styles for a specific component.

• Typography:

  • typography.scss: Contains style definitions for text elements, including font sizes, line heights, font weights, and other typography-related styles.

• Responsive Styles:

  • responsive.scss: Contains media queries and responsive style definitions to ensure a good appearance across various screen sizes.

• Theme Styles:

  • theme.scss: Contains theme-related styles, which could include color schemes, background images, and other styles related to the visual theme of the application.

• Base Utility Styles (located in base folder):

  • Sub-folders like transitions, cursors, borders, etc., contain utility styles and common design tokens that can be reused across the application.

For component-specific documentation, consult the official documentation.

Contributing

Community contributions are encouraged. For guidelines, see the contributing guide.

Special Thanks

During the work process, we study a vast amount of open-source code and are grateful to all the programmers who have shared it. Without you, all of this would have been impossible. Special attention is deserved by the authors whose code we have fully utilized, your names will forever be in the history of OZ:

For [megasanjay][https://github.com/megasanjay] for his vue3-marquee For [shentao][https://github.com/shentao] for his vue-multiselect For [VictorNico][https://github.com/VictorNico] for his vue3-reactive-tel-input For [sipec][https://github.com/sipec] for his vue-tags-input

License

Prometheus Framework is licensed under the GNU GPLv3.