{% stories GettingStartedAboutVarbase with {
  "title": "Getting Started/About Varbase",
  "parameters": {
    "docs": {
      "description": {
        "component": "Getting started page for Varbase Storybook"
      }
    }
  }
} %}

{% story AboutVarbase with {
  "name": "About Varbase"
} %}

<div class="container">
  <div class="row">
    <div class="col">
      <h1>About Varbase Design System</h1>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <span class="h5">Unleash Your Creativity with Vartheme BS5</span>
      <p><a href="https://www.drupal.org/project/varbase">Varbase</a> Design System is your all-in-one solution for modern web theming, powered by Vardot’s Vartheme BS5 Starterkit. Built on <a href="https://getbootstrap.com">Bootstrap 5</a> and <a href="https://www.drupal.org/project/drupal/releases/11.1.6">Drupal ~11</a>, it harnesses Single Directory Components (SDC) and <a href="https://www.drupal.org/project/ui_patterns">UI Patterns ~2.0</a> to deliver a fresh, efficient theming experience. With Varbase Components, you can manage and customize your site’s design with ease, perfect for creating standout websites.</p>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col">
      <div class="mt-5 bg-light p-5 d-flex flex-column justify-content-center">
        <img class="d-flex mx-auto d-block" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/lightbulb.svg" width="50px" alt="Light Bulb icon" />
        <a class="mt-3 d-flex justify-content-center"href="https://demo.varbase.vardot.com/">Live Varbase Demo Site</a>
      </div>
    </div>
    <div class="col">
      <div class="mt-5 bg-light p-5 d-flex flex-column justify-content-center">
        <img class="d-flex mx-auto d-block" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/lightbulb.svg" width="50px" alt="Light Bulb icon" />
        <a class="mt-3 d-flex justify-content-center"href="https://storybook.demo.varbase.vardot.com">Live Varbase Storybook</a>
      </div>
    </div>
    <div class="col">
      <div class="mt-5 bg-light p-5 d-flex flex-column justify-content-center">
        <img class="d-flex mx-auto d-block" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/lightbulb.svg" width="50px" alt="Light Bulb icon" />
        <a class="mt-3 d-flex justify-content-center"href="https://www.figma.com/design/shEqHupsCBTp2CmIiA84rv/VB---Stylesheet_2024">Varbase Design system</a>
      </div>
    </div>
  </div>


  <div class="row mt-5 pt-5">
    <div class="col pt-5">
      <h2>How to use the Vartheme BS5 Starterkit</h2>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <h3>Theme Development Tools</h3>
      <p>
      <h4>Get started with these simple steps:</h4>
      <ol>
        <li><a href="https://docs.varbase.vardot.com/v/10.1.x/developers/theme-development-with-varbase/command-to-install-needed-theming-tools">Install Essential Tools:</a> Set up the theming tools to launch your project.</li>
        <li><a href="https://docs.varbase.vardot.com/v/10.1.x/developers/theme-development-with-varbase/manually-install-needed-theming-tools">Manually Install Needed Theming Tools</a></li>
      </ol>
      </p>

      <p>
        <h4>Transition to cutting-edge techniques with:</h4>
        <ul>
          <li>Moved from old ways to new generative ways.</li>
          <li>Single Directory Components (SDC) for reusable, modular components.</li>
          <li>Storybook integration to preview and refine your designs.</li>
          <li>Custom theme cloning from Vartheme BS5, no sub-themes required.</li>
        </ul>
      </p>

    </div>
  </div>

  <div class="row mt-5 p-5 bg-light">
    <div class="col">
      <div class="row">
        <div class="col">
          <p><b>Note:</b> Vartheme BS5 isn’t a base theme, it’s a starterkit designed to map templates with SDC, giving you full creative control.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-5 pt-5">
    <div class="col pt-5">
      <h2>Theme Development With Varbase</h2>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <p>Follow the Design System: Ensure consistency across your projects.</p>

      <div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
        <div class="p-4 p-2 bg-light">
          <a href="https://docs.varbase.vardot.com/developers/theme-development-with-varbase/creating-your-own-theme">Creating Your Own Theme</a>
        </div>
        <div class="p-4 p-2 bg-light">
          <a href="https://docs.varbase.vardot.com/developers/theme-development-with-varbase/integration-of-varbase-with-storybook-2.0">Integration of Varbase with Storybook</a>
        </div>
        <div class="p-4 p-2 bg-light">
          <a href="https://docs.varbase.vardot.com/developers/theme-development-with-varbase/customize-a-varbase-single-directory-components-sdc-in-a-custom-theme">Customize a Varbase Single Directory Components (SDC) In a Custom Theme</a>
        </div>
        <div class="p-4 p-2 bg-light">
          <a href="https://docs.varbase.vardot.com/developers/theme-development-with-varbase/add-preloaded-fonts-in-vartheme">Add Preloaded Fonts in Vartheme</a>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-5 p-5 bg-light">
    <div class="col">
      <div class="row">
        <div class="col pt-3">
          <h2>This theme is best used with <a href="https://drupal.org/project/varbase">Varbase</a> distribution</h2>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col">
          <p>While Vartheme BS5 works with any Drupal site, pairing it with Varbase unlocks a world of advanced features, making your development smoother and your sites more powerful.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row mt-5 pt-5">
    <div class="col pt-5">
      <h3>Varbase documentation</h3>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <p>Dive deeper with our <a href="https://docs.varbase.vardot.com">comprehensive guides</a>, perfect for mastering Varbase and taking your skills to the next level. Check out <a href="https://docs.varbase.vardot.com/developers/understanding-varbase/core-components/vartheme-bs5">Varbase documentation</a> for more details.</p>
    </div>
  </div>
</div>

{% endstory %}

{% endstories %}
