πŸš€ Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
(Automatically adding template at the end of the page.)
No edit summary
Tag: 2017 source edit
(52 intermediate revisions by 4 users not shown)
Line 1: Line 1:
=== MDriven Learn: Documentation ===
<html>
Got questions like these?
  <style>
    /* Reset + base */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      color: #242424;
    }


* What is MDriven?
/* HEADER */
* How does it work?
    .header {
* Where do I install it from?
      display: flex;
* How can MDriven benefit my business?
      align-items: center; /* Changed from flex-start to center */
* Is MDriven a good long-term solution for my business?
      justify-content: space-between;
* How do I get started?
      background: linear-gradient(
* How much experience do I need to have to use the MDriven tools?
        90deg,
        #F5F7FF 0%,  /* pale lavender */
        #FFFFFF 100%  /* pure white */
      );
      padding: 30px 5%; /* Increased padding for better spacing */
      overflow: hidden;
      min-height: 300px; /* Adjusted for fixed image height */
    }


Browse Documentation and find all the answers to your questions.
h1 {
{{Edited|July|12|2024}}
      border-bottom: none;
    }
 
    .header-content {
      max-width: 48%; /* Adjusted for better balance */
      padding: 0; /* Removed padding-top since we're centering */
    }
 
    .header-subtitle {
      display: block;
      font-size: 0.75rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #6e6e73;
    }
 
    .header-content h1 {
      font-size: 2rem;
      font-weight: 700;
      color: #1d1d1f;
      margin-bottom: 0.1em;
      letter-spacing: -1px;
    }
 
    .header-lead {
      font-size: 0.95rem;
      color: #3c3c44;
      margin-bottom: 0.5em;
      max-width: 600px;
      opacity: 0.9;
    }
 
/* SEARCH */
    .search-box {
      display: flex;
      width: 100%;
      max-width: 500px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      overflow: hidden;
      transition: box-shadow 0.3s ease;
    }
 
    .search-box:hover {
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }
 
    .search-input {
      flex: 1;
      border: none;
      padding: 10px 18px;
      font-size: 0.95rem;
      outline: none;
    }
 
    .search-button {
      background: #007AFF;
      color: white;
      border: none;
      padding: 10px 22px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background 0.3s ease;
    }
 
    .search-button:hover {
      background: #0051D5;
    }
 
/* HEADER IMAGE */
    .header-image {
      max-width: 52%; /* Adjusted to match content width change */
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      padding-left: 20px; /* Reduced spacing to bring image closer */
    }
 
    .header-image img {
      width: auto; /* Let width adjust based on height */
      height: 240px; /* Fixed height for consistent sizing */
      max-width: 100%; /* Don't exceed container */
      display: inline-block;
      object-fit: contain; /* Ensures image maintains aspect ratio */
    }
 
/* MAIN CONTENT */
    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 5% 30px;
    }
 
    .section-title {
      text-align: left;
      margin-bottom: 15px;
      margin-top: 10px;
    }
 
    .section-title h2 {
      font-size: 1.75rem;
      font-weight: 600;
      margin-bottom: 2px;
      color: #242424;
    }
 
    .section-title p {
      font-size: 1rem;
      color: #707070;
      font-weight: 400;
    }
 
/* DOCUMENT GRID - Microsoft Learn Style */
    .docs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10px;
      margin-bottom: 30px;
    }
 
    .doc-card {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 16px 18px;
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }
 
    .doc-card:hover {
      border-color: #0078d4;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
 
    .doc-card::after {
      content: 'β†’';
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #0078d4;
      opacity: 0;
      transition: all 0.2s ease;
      font-size: 1rem;
    }
 
    .doc-card:hover::after {
      opacity: 1;
      right: 12px;
    }
 
    .doc-icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-size: 16px;
      flex-shrink: 0;
    }
 
    /* icon background + color - more subtle */
    .icon-overview      { background: #e6f2ff; color: #0078d4; }
    .icon-designer      { background: #f0e6ff; color: #5c2e91; }
    .icon-modeling      { background: #ffe6f0; color: #c239b3; }
    .icon-turnkey        { background: #ffe6eb; color: #d13438; }
    .icon-server        { background: #fff0e6; color: #ff8c00; }
    .icon-framework      { background: #e6f5e6; color: #107c10; }
    .icon-legacy        { background: #f0f0f0; color: #5c5c5c; }
    .icon-integration    { background: #e6fff9; color: #00b7c3; }
    .icon-customization  { background: #fff9e6; color: #8661c5; }
    .icon-data          { background: #e6f3ff; color: #0078d4; }
    .icon-security      { background: #e6f5e6; color: #107c10; }
    .icon-extensions    { background: #ffe6e6; color: #d13438; }
    .icon-services      { background: #ebe6ff; color: #5c2e91; }
    .icon-operations    { background: #e6f7ff; color: #0078d4; }
    .icon-administration { background: #fff4e6; color: #ff8c00; }
    .icon-reporting      { background: #f5ede6; color: #7a5548; }
 
.doc-content {
      flex: 1;
      padding-right: 24px;
    }
 
.doc-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 3px;
      color: #242424;
      line-height: 1.2;
    }
 
    .doc-description {
      font-size: 0.875rem;
      color: #707070;
      line-height: 1.35;
    }
 
/* Responsive */
    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        text-align: center;
        padding: 20px 5%;
        align-items: center;
        min-height: auto; /* Remove min-height on mobile */
      }
      .header-content, .header-image {
        max-width: 100%;
        padding: 0;
      }
      .header-image {
        margin-top: 15px;
        justify-content: center;
        padding-left: 0; /* Remove left padding on mobile */
      }
      .header-image img {
        height: 180px; /* Fixed height on mobile */
        width: auto;
      }
      .header-content h1 {
        font-size: 1.75rem;
      }
      .docs-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .section-title {
        margin-bottom: 15px;
        margin-top: 8px;
      }
      .doc-card {
        padding: 12px 14px;
      }
      .doc-card::after {
        opacity: 1;
      }
    }
  </style>
<body>
 
<!-- Header -->
  <header class="header">
    <div class="header-content">
      <small class="header-subtitle">DOCUMENTATION</small>
      <h1>Technical documentation</h1>
      <p class="header-lead">
        Search for in-depth articles on MDriven developer tools and technologies.
      </p>
      <form class="search-box">
        <input type="text" class="search-input" placeholder="Search documentation...">
        <button type="submit" class="search-button">Search</button>
      </form>
    </div>
    <div class="header-image">
      <!-- replace with your actual SVG/PNG/WEBP -->
      <img src="/images/documentation.webp" alt="Documentation illustration">
    </div>
  </header>
 
<!-- Main Content -->
  <main class="container">
    <!-- Documentation Categories -->
    <section>
      <div class="section-title">
        <h2>Product directory</h2>
        <p>Explore guides and articles by product.</p>
      </div>
 
<div class="docs-grid">
        <a href="/index.php/Documentation:General" class="doc-card">
          <div class="doc-icon icon-overview">πŸ“‹</div>
          <div class="doc-content">
            <h3 class="doc-title">Overview</h3>
            <p class="doc-description">Get started with MDriven fundamentals and core concepts</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Designer" class="doc-card">
          <div class="doc-icon icon-designer">🎨</div>
          <div class="doc-content">
            <h3 class="doc-title">Designer</h3>
            <p class="doc-description">Learn to design models and user interfaces visually</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Modeling" class="doc-card">
          <div class="doc-icon icon-modeling">πŸ—οΈ</div>
          <div class="doc-content">
            <h3 class="doc-title">Modeling</h3>
            <p class="doc-description">Master model creation and domain-driven design principles</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Turnkey" class="doc-card">
          <div class="doc-icon icon-turnkey">πŸš€</div>
          <div class="doc-content">
            <h3 class="doc-title">Turnkey</h3>
            <p class="doc-description">Deploy complete applications quickly with Turnkey solutions</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Server" class="doc-card">
          <div class="doc-icon icon-server">πŸ–₯️</div>
          <div class="doc-content">
            <h3 class="doc-title">Server</h3>
            <p class="doc-description">Configure and manage MDriven server environments</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Framework" class="doc-card">
          <div class="doc-icon icon-framework">βš™οΈ</div>
          <div class="doc-content">
            <h3 class="doc-title">Framework</h3>
            <p class="doc-description">Understand the MDriven framework architecture and APIs</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Legacy" class="doc-card">
          <div class="doc-icon icon-legacy">πŸ“š</div>
          <div class="doc-content">
            <h3 class="doc-title">Legacy</h3>
            <p class="doc-description">Documentation for previous versions and migration guides</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Integration" class="doc-card">
          <div class="doc-icon icon-integration">πŸ”—</div>
          <div class="doc-content">
            <h3 class="doc-title">Integration</h3>
            <p class="doc-description">Connect MDriven with external systems and services</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Customization" class="doc-card">
          <div class="doc-icon icon-customization">✨</div>
          <div class="doc-content">
            <h3 class="doc-title">Customization</h3>
            <p class="doc-description">Customize appearance, behavior, and functionality</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Data" class="doc-card">
          <div class="doc-icon icon-data">πŸ’Ύ</div>
          <div class="doc-content">
            <h3 class="doc-title">Data</h3>
            <p class="doc-description">Manage data persistence, queries, and migrations</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Security" class="doc-card">
          <div class="doc-icon icon-security">πŸ”’</div>
          <div class="doc-content">
            <h3 class="doc-title">Security</h3>
            <p class="doc-description">Implement authentication, authorization, and security best practices</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Extensions" class="doc-card">
          <div class="doc-icon icon-extensions">🧩</div>
          <div class="doc-content">
            <h3 class="doc-title">Extensions</h3>
            <p class="doc-description">Extend MDriven capabilities with plugins and add-ons</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Services" class="doc-card">
          <div class="doc-icon icon-services">☁️</div>
          <div class="doc-content">
            <h3 class="doc-title">Services</h3>
            <p class="doc-description">Build and consume web services and REST APIs</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Operations" class="doc-card">
          <div class="doc-icon icon-operations">⚑</div>
          <div class="doc-content">
            <h3 class="doc-title">Operations</h3>
            <p class="doc-description">Monitor performance and manage operational tasks</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Administration" class="doc-card">
          <div class="doc-icon icon-administration">πŸ‘€</div>
          <div class="doc-content">
            <h3 class="doc-title">Administration</h3>
            <p class="doc-description">Administer users, permissions, and system settings</p>
          </div>
        </a>
 
<a href="/index.php/Documentation:Reporting" class="doc-card">
          <div class="doc-icon icon-reporting">πŸ“Š</div>
          <div class="doc-content">
            <h3 class="doc-title">Reporting</h3>
            <p class="doc-description">Create reports, dashboards, and data visualizations</p>
          </div>
        </a>
      </div>
    </section>
  </main>
 
</body>
</html>
 
__HIDECREDIT__
 
__NOBREADCRUMBS__

Revision as of 01:58, 21 July 2025

DOCUMENTATION

Technical documentation

Search for in-depth articles on MDriven developer tools and technologies.

Documentation illustration

Product directory

Explore guides and articles by product.

__HIDECREDIT__


MDriven Chat

How would you like to chat today?

Setting up your conversation…

This may take a few moments