🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
    No edit summary
    No edit summary
    Tag: 2017 source edit
    (8 intermediate revisions by 2 users not shown)
    Line 1: Line 1:
    <message>Write the content here to display this box</message>
    <html>
      <style>
        /* Reset + base */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
          color: #242424;
        }


    === '''Introduction to MDriven Documentation''' ===
    /* HEADER */
    Welcome to '''MDriven’s Documentation''', your essential resource for mastering '''[[BestPractices:Model Driven|model-driven development]]''' and bringing ideas to life effortlessly! Whether you’re a seasoned developer or exploring modeling for the first time, this documentation equips you with guides, practical examples, and troubleshooting tips to make your journey seamless.
        .header {
          display: flex;
          align-items: center; /* Changed from flex-start to center */
          justify-content: space-between;
          background: linear-gradient(
            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 */
        }


    ==== '''Key Questions Answered''' ====
    h1 {
    Explore answers to pivotal questions about MDriven:
          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;
        }


    * '''[[Training:What is MDriven|What is MDriven]]?'''
    /* SEARCH */
    * '''How does MDriven work?'''
        .search-box {
    * '''[https://blog.mdriven.net/how-to-get-started-with-mdriven/ How do I get started]?'''
          display: flex;
    * '''[https://blog.mdriven.net/modeling-from-novice-to-expert-build-a-model-that-works/ What level of experience do I need]?'''
          width: 100%;
    * '''[[Documentation:Why You Should Choose MDriven|Why choose MDriven for your business]]?'''
          max-width: 500px;
    * '''[https://blog.mdriven.net/open-letter-to-managing-directors-revolutionize-your-business-with-proven-mdriven-strategies/ Is MDriven scalable for long-term success]?'''
          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;
        }


    === '''Unlock the Power of MDriven''' ===
    /* HEADER IMAGE */
    From employing features like '''Tagged Values''', '''Access Groups''', and '''Placing Containers''', to leveraging '''OCL, Autoforms''', and '''ViewModel development''', MDriven simplifies complexities with:
        .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 */
        }


    * '''Clear instructions'''
    /* MAIN CONTENT */
    * '''Tutorials'''
        .container {
    * '''Best practices'''
          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;
        }


    === '''Discover Features''' ===
    /* DOCUMENT GRID - Microsoft Learn Style */
    Enhance your expertise with step-by-step guides on:
        .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>


    * '''[[Documentation:MDriven designer overview Part 1|Visual Modeling]]'''
    <a href="/index.php/Documentation:Server" class="doc-card">
    * '''Collaboration'''
              <div class="doc-icon icon-server">🖥️</div>
    * '''Prototyping'''
              <div class="doc-content">
    * '''Enterprise Application Design'''
                <h3 class="doc-title">Server</h3>
                <p class="doc-description">Configure and manage MDriven server environments</p>
              </div>
            </a>


    === '''Navigate Documentation Your Way''' ===
    <a href="/index.php/Documentation:Framework" class="doc-card">
    Find what you need with ease:
              <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>


    # '''Left Menu:''' Explore categories for quick access to topics.
    <a href="/index.php/Documentation:Legacy" class="doc-card">
    # '''Product Cards:''' Click below for direct links to detailed information.
              <div class="doc-icon icon-legacy">📚</div>
    # '''Search Bar:''' Search specific terms or features instantly.
              <div class="doc-content">
    <html>
                <h3 class="doc-title">Legacy</h3>
    <style>
                <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>


    .mw-parser-output > *:first-child {
    <a href="/index.php/Documentation:Data" class="doc-card">
    /* margin-right: 200px */
              <div class="doc-icon icon-data">💾</div>
    display: none;
              <div class="doc-content">
    }
                <h3 class="doc-title">Data</h3>
                <p class="doc-description">Manage data persistence, queries, and migrations</p>
              </div>
            </a>


    .products__docu__wrapper {
    <a href="/index.php/Documentation:Security" class="doc-card">
      padding: 1rem 0;
              <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>


    .grid-container {
    <a href="/index.php/Documentation:Extensions" class="doc-card">
        display: flex;
              <div class="doc-icon icon-extensions">🧩</div>
        padding: 1rem 0;
              <div class="doc-content">
        gap: 20px;
                <h3 class="doc-title">Extensions</h3>
        flex-direction: row;
                <p class="doc-description">Extend MDriven capabilities with plugins and add-ons</p>
        flex-wrap: wrap;
              </div>
      }
            </a>


    .documentation-card {
    <a href="/index.php/Documentation:Services" class="doc-card">
        max-width: 280px !important;
              <div class="doc-icon icon-services">☁️</div>
    }
              <div class="doc-content">
    .documentation-card:hover {
                <h3 class="doc-title">Services</h3>
        transform: translateY(-5px);
                <p class="doc-description">Build and consume web services and REST APIs</p>
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
              </div>
        cursor: pointer;
            </a>
    }


        @media (max-width: 767px) {
    <a href="/index.php/Documentation:Operations" class="doc-card">
            .headerContent {
              <div class="doc-icon icon-operations">⚡</div>
                padding: 2em 1em !important;
              <div class="doc-content">
                max-width: none;
                 <h3 class="doc-title">Operations</h3>
            }
                 <p class="doc-description">Monitor performance and manage operational tasks</p>
            .heading {
              </div>
                font-size: 1.5em !important;
             </a>
            }
            .sub-heading {
                font-size: 1em;
            }
            .description {
                font-size: 0.875em;
            }
            .input-container {
                max-width: none;
                height: auto;
            }
            .search-icon {
                margin-left: 1em;
            }
            .search-input {
                 padding-left: 1em;
                 padding-right: 1em;
            }
          .grid-container {
                grid-template-columns: 1fr;
                padding: 2rem 1em;
               
             }
            .responsive-container {
                padding-left: 1em !important;
                padding-right: 1em;
                padding-top: 2rem !important;
                padding-bottom: 0px;
            }
            .responsive-text {
              width: auto;
              font-size: 12px;
            }
        }


    <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>


    </style>
    <a href="/index.php/Documentation:Reporting" class="doc-card">
    <section class="products__docu__wrapper">
              <div class="doc-icon icon-reporting">📊</div>
    <p>Learn how MDriven tools empower you to turn your ideas into reality.</p>
              <div class="doc-content">
    <div class="grid-container">
                <h3 class="doc-title">Reporting</h3>
                <p class="doc-description">Create reports, dashboards, and data visualizations</p>
              </div>
            </a>
          </div>
        </section>
      </main>


    </body>
    </html>
    </html>
    {{#widget:Documentation
    |image=/images/doc1.svg
    |titlelink=/index.php/Documentation:MDriven_designer_overview_Part_1
    |titletext=MDriven Designer
    |text=A UML modeling tool that allows you to capture sufficient details to cover every aspect of a software system.
    }}
    {{#widget:Documentation
    |image=/images/doc2.svg
    |titlelink=/index.php/Documentation:MDriven Framework – a Model driven framework
    |titletext=MDriven Framework
    |text=A structure that allows you to write strongly typed C# code, accessing all the types and classes from your model.
    }}
    {{#widget:Documentation
    |image=/images/doc3.svg
    |titlelink=/index.php/Documentation:Starting_with_MDriven_Turnkey
    |titletext=MDriven Turnkey
    |text=MDriven's application that enables you to develop internet applications based on proven technologies like JQuery, AngularJS and Azure.
    }}
    {{#widget:Documentation
    |image=/images/doc4.svg
    |titlelink=/index.php/Documentation:MDriven_Server_Introduction
    |titletext=MDriven Server
    |text=An IIS application that stores your MDriven data in a database.
    }}
    {{#widget:Documentation
    |image=/images/doc5.svg
    |titlelink=/index.php/Documentation:Mockotype
    |titletext=Mockotype
    |text=MDriven Designer started in simplified mode.
    }}
    {{#widget:Documentation
    |image=/images/doc1.svg
    |titlelink=/index.php/Documentation:Part_1_OCL_Common_Expressions
    |titletext=OCL
    |text=The query and action language used in MDriven.
    }}
    {{#widget:Documentation
    |image=/images/doc1.svg
    |titlelink=/index.php/Documentation:Introduction_to_ECO
    |titletext=ECO
    |text=A Visual Studio Plugin that helps any .net application handle the objects of that model in memory.
    }}


    <html>
    __HIDECREDIT__
    </div>
     
    </section>
    __NOBREADCRUMBS__
    </html>
    {{Edited|July|12|2025}}

    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.

    📋

    Overview

    Get started with MDriven fundamentals and core concepts
    🎨

    Designer

    Learn to design models and user interfaces visually
    🏗️

    Modeling

    Master model creation and domain-driven design principles
    🚀

    Turnkey

    Deploy complete applications quickly with Turnkey solutions
    🖥️

    Server

    Configure and manage MDriven server environments
    ⚙️

    Framework

    Understand the MDriven framework architecture and APIs
    📚

    Legacy

    Documentation for previous versions and migration guides
    🔗

    Integration

    Connect MDriven with external systems and services
    ✨

    Customization

    Customize appearance, behavior, and functionality
    💾

    Data

    Manage data persistence, queries, and migrations
    🔒

    Security

    Implement authentication, authorization, and security best practices
    🧩

    Extensions

    Extend MDriven capabilities with plugins and add-ons
    ☁️

    Services

    Build and consume web services and REST APIs
    ⚡

    Operations

    Monitor performance and manage operational tasks
    👤

    Administration

    Administer users, permissions, and system settings
    📊

    Reporting

    Create reports, dashboards, and data visualizations

    __HIDECREDIT__


    Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Documentation&oldid=27567"

    © MDRIVEN. All Rights Reserved

    API Docs
    MDriven World| Portal| Blog| YouTube| StackOverflow| Facebook

    © MDRIVEN. All Rights Reserved

    MDriven Chat

    How would you like to chat today?

    Setting up your conversation…

    This may take a few moments