cre8magic

🪄🪄🪄 Create Magic / Stunning / Amazing Designs on Oqtane 🪄🪄🪄

View on GitHub

cre8magic for Oqtane – Professional Theme Design

 

🪄🪄🪄 Create Magic / Stunning / Amazing Designs on Oqtane 🪄🪄🪄

 

Oqtane is a Blazor based platform to create awesome solutions. It is heavily inspired by the Site/Page/Module model used in DNN. So it’s almost ready to create awesome websites and CMS solutions.

But there are two missing pieces (☮️) to create amazing websites:

  1. Real Content-Management features - which can be done with the extension 2sxc
  2. Tools to make designing themes fast and professional - enter: cre8magic

cre8magic makes Oqtane Designer-Friendly

As a designer, you need certain tools and workflows to be efficient, such as:

  1. the ability to make a small change and then reload the page to see the result
  2. the need to focus on the what (like the design), without wasting time on the how (like C# code to create the menu)
  3. the ability to create variations of your work, such as other layouts which are similar
  4. every tool you add (such as cre8magic) should help, but never restrict

These aspects are important for the productivity of every designer. Now if you’ve worked with Oqtane (or Blazor for that matter) you will quickly see that this is not possible. This means you can whatever you want, but there is a lot of code involved, and a lot of time-consuming restarts.

cre8magic takes care of all these problems 🚀

cre8magic combines very simple Razor and lets you do everything through settings.

Most layouts have very similar HTML, but do vary a bit. For example, it could have different CSS classes to give it the look you need or a different logo file.

imagine tweaking this at runtime (without compiling) 😏

Overview

This is how cre8magic enhances Oqtane so that your Theme can focus on the design:

The resulting page will usually have something like this:

👉🏾 Discover how it works

See a Working Example and Get Started

Since this is a library, just reading the docs won’t cut it. It’s best to see this in action on a real-life example. Try the ToShine Theme Template, it will make things much easier to understand.

👉🏼 See 2shine Theme Template

👉🏼 See Get Started

What’s in the Magic Box

  1. Magic Settings: A Settings / Configuration System 👉🏾 see Magic Settings 👉🏾 see Settings JSON file 👉🏾 see JSON schema

  2. Magic Context

  3. Magic Values, Classes and more

  4. Magic Tokens

  5. Magic Languages

  6. Magic Menu

  7. Magic Razor Base Classes These are the important base classes which your Razor files will inherit. All have in common, that they know about the theme-wide Settings and provide helper methods to get things done easily and quickly, with as little code as possible.
    • Theme / Container Level Base Classes
      1. MagicTheme - the foundation for Themes
      2. MagicContainer - the foundation for Containers
    • Important Base Controls / Components
      1. MagicLanguages is the base for the languages menu
      2. MagicBreadcrumbs is the base for the breadcrumbs
      3. MagicMenuRoot is the base for menu entry point, loading the configuration, nodes etc.
      4. MagicMenuBase is the base for each menu type, like Horizontal, Vertical, Mobile, …
      5. MagicLogin is the base for login/logout icons and texts
    • Generic Base Controls / Base Components These are meant for any other custom controls that you have.
      1. MagicControl is for razor controls that has the Octane API (it inherits from ThemeControlBase)
      2. MagicComponent is for razor controls with just the basic Razor API (inherits from ComponentBase)
  8. Magic Razor Controls / Components These are standalone controls for you to use, which you will normally just use but not inherit, as they already have their HTML output or something. Anything we refer to as a Control inherits from the Oqtane ThemeControlBase, while things we refer to as a Component inherit from the .net ComponentBase.
    • Functional Controls / Components
      1. MagicOqtaneControlPanel a control which adds the main control panel for admins
      2. MagicContextAndSettings a wrapper used in every theme to ensure MagicContext and MagicSettings work
    • Debug and Error Handling
      1. MagicExceptions a control showing important errors to admins
      2. MagicMenuDebug a debug helper to see what configuration a menu has and why
      3. MagicLanguagesDebug a debug helper to see what configuration the laguages have
      4. MagicThemeDebug debug helper to see all the current settings on this theme

Documentation is hosted with GitHub Pages

History

⌛ See change log