> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squeditor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

export const HeroCard = ({ image, title, description, href }) => {
  return (
    <a
      className="link group cursor-pointer pb-8"
      href={href}
    >
      <img src={image} alt={title} className="pointer-events-none" />
      <h3 className="text-xl mt-5 text-gray-900 dark:text-zinc-50 font-medium">
        {title}
      </h3>
      <p className="block mt-1.5">
        {description}
      </p>
    </a>
  );
};

<div className="relative overflow-hidden">
  <div className="absolute -top-14 left-0 right-0 opacity-10 pointer-events-none">
    <img src="https://mintcdn.com/squeditor/h-aOtMkmKRQT7A6J/images/pattern-light.png?fit=max&auto=format&n=h-aOtMkmKRQT7A6J&q=85&s=cc842369178b444dd013117eab515cc5" className="block w-full h-auto dark:hidden" alt="Pattern" width="1512" height="660" data-path="images/pattern-light.png" />

    <img src="https://mintcdn.com/squeditor/h-aOtMkmKRQT7A6J/images/pattern-dark.png?fit=max&auto=format&n=h-aOtMkmKRQT7A6J&q=85&s=676fb03dbd57beea4413578b6d07c998" className="block w-full h-auto hidden dark:block" alt="Pattern" width="1512" height="660" data-path="images/pattern-dark.png" />
  </div>

  <div className="relative z-10 px-4 pt-16 lg:pt-[89px] max-w-3xl mx-auto text-center">
    <div className="w-fit mx-auto mb-8">
      <img src="https://mintcdn.com/squeditor/h-aOtMkmKRQT7A6J/logo/framework-intro-light.svg?fit=max&auto=format&n=h-aOtMkmKRQT7A6J&q=85&s=b5966f126f365b0c0f01809a6be058a7" alt="Framework" className="w-[80px] h-[80px] dark:hidden" noZoom width="55" height="65" data-path="logo/framework-intro-light.svg" />

      <img src="https://mintcdn.com/squeditor/h-aOtMkmKRQT7A6J/logo/framework-intro-dark.svg?fit=max&auto=format&n=h-aOtMkmKRQT7A6J&q=85&s=0b1792b2c6ec32172fecbb9fb96b9e83" alt="Framework" className="w-[80px] h-[80px] hidden dark:block" noZoom width="53" height="62" data-path="logo/framework-intro-dark.svg" />
    </div>

    <h1 className="block text-4xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight">
      The Framework's Documentation
    </h1>

    <p className="mt-4 text-lg text-gray-500 dark:text-zinc-500 mb-8 lg:mb-12">
      **Squeditor Framework** is a static HTML website framework and build system explicitly designed to bring robust, modular development practices (like those found in WordPress or React) into pure flat-file HTML deliverables.
    </p>

    <h3 className="block text-xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight mb-8"> Showcasing the Framework</h3>

    <Columns cols={2}>
      <div className="mt-4">
        <Frame caption="Main Demo">
          <a href="https://squeditor.com/showcase/main-demo/" target="_blank" rel="noopener noreferrer" className="link">
            <img src="https://mintcdn.com/squeditor/6zvXJXb7HEBGtEOv/images/soon.jpg?fit=max&auto=format&n=6zvXJXb7HEBGtEOv&q=85&s=ee105f2d3a82d48276895dea73886696" alt="Editor" className="pointer-events-none" width="640" height="342" data-path="images/soon.jpg" />
          </a>
        </Frame>
      </div>

      <div className="mt-4">
        <Frame caption="GSAP Animations">
          <a href="https://squeditor.com/showcase/gsap-animations/" target="_blank" rel="noopener noreferrer" className="link">
            <img src="https://mintcdn.com/squeditor/6zvXJXb7HEBGtEOv/images/soon.jpg?fit=max&auto=format&n=6zvXJXb7HEBGtEOv&q=85&s=ee105f2d3a82d48276895dea73886696" alt="Editor" className="pointer-events-none" width="640" height="342" data-path="images/soon.jpg" />
          </a>
        </Frame>
      </div>

      <div className="mt-4">
        <Frame caption="Components">
          <a href="https://squeditor.com/showcase/all-components/" target="_blank" rel="noopener noreferrer" className="link">
            <img src="https://mintcdn.com/squeditor/6zvXJXb7HEBGtEOv/images/soon.jpg?fit=max&auto=format&n=6zvXJXb7HEBGtEOv&q=85&s=ee105f2d3a82d48276895dea73886696" alt="Editor" className="pointer-events-none" width="640" height="342" data-path="images/soon.jpg" />
          </a>
        </Frame>
      </div>

      <div className="mt-4">
        <Frame caption="Style Guide">
          <a href="https://squeditor.com/showcase/style-guide/" target="_blank" rel="noopener noreferrer" className="link">
            <img src="https://mintcdn.com/squeditor/6zvXJXb7HEBGtEOv/images/soon.jpg?fit=max&auto=format&n=6zvXJXb7HEBGtEOv&q=85&s=ee105f2d3a82d48276895dea73886696" alt="Editor" className="pointer-events-none" width="640" height="342" data-path="images/soon.jpg" />
          </a>
        </Frame>
      </div>
    </Columns>
  </div>

  <div className="relative z-10 px-4 py-16 max-w-3xl mx-auto">
    <h3 className="block text-xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight mb-8"> Getting Started</h3>

    <CardGroup cols={2}>
      <Card href="/framework/getting-started/quickstart" arrow="true" title="Quickstart" icon="circle-play" iconType="duotone" />

      <Card href="/framework/getting-started/configuration" arrow="true" title="Framework Config" icon="folder-gear" iconType="duotone" />

      <Card href="/framework/getting-started/build-pipeline" arrow="true" title="Build Pipeline" icon="screwdriver-wrench" iconType="duotone" />

      <Card href="/framework/getting-started/deployment" arrow="true" title="Deployment" icon="rocket-launch" iconType="duotone" />
    </CardGroup>
  </div>

  <div className="relative z-10 px-4 pb-16 lg:pb-28 max-w-3xl mx-auto">
    <h3 className="block text-xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight mb-8"> Technology Stack</h3>

    <CardGroup cols={2}>
      <Card title="PHP 8+ (Dev templating)" icon={<svg fill="#777BB4" role="img" width="28" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PHP</title><path d="M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z"/></svg>}>
        WordPress-like dev templating, partials, loops, and frontmatter parsing on a local built-in server.
      </Card>

      <Card title="TailwindCSS (CSS framework)" icon={<svg fill="#06B6D4" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Tailwind CSS</title><path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"/></svg>}>
        Utility-first, purge-ready, robust design token configuration.
      </Card>

      <Card title="UIKit3 (Component UI)" icon={<svg fill="#2396F3" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>UIkit</title><path d="M17.697 3.292l-4.109 2.489 4.738 2.696v7.077l-6.365 3.538-6.258-3.538v-5.485L1.596 7.956V18l10.219 6 10.589-6V6.002l-4.707-2.71zm-1.904-.989L11.813 0 7.665 2.568l4.032 2.218 4.096-2.483z"/></svg>}>
        High-quality interactive components pulled selectively via npm (no global polluted CSS).
      </Card>

      <Card title="SCSS (CSS preprocessor)" icon={<svg fill="#CC6699" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Sass</title><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zM9.615 15.998c.175.645.156 1.248-.024 1.792l-.065.18c-.024.061-.052.12-.078.176-.14.29-.326.56-.555.81-.698.759-1.672 1.047-2.09.805-.45-.262-.226-1.335.584-2.19.871-.918 2.12-1.509 2.12-1.509v-.003l.108-.061zm9.911-10.861c-.542-2.133-4.077-2.834-7.422-1.645-1.989.707-4.144 1.818-5.693 3.267C4.568 8.48 4.275 9.98 4.396 10.607c.427 2.211 3.457 3.657 4.703 4.73v.006c-.367.18-3.056 1.529-3.686 2.925-.675 1.47.105 2.521.615 2.655 1.575.436 3.195-.36 4.065-1.649.84-1.261.766-2.881.404-3.676.496-.135 1.08-.195 1.83-.104 2.101.24 2.521 1.56 2.43 2.1-.09.539-.523.854-.674.944-.15.091-.195.12-.181.181.015.09.091.09.21.075.165-.03 1.096-.45 1.141-1.471.045-1.29-1.186-2.729-3.375-2.7-.9.016-1.471.091-1.875.256-.03-.045-.061-.075-.105-.105-1.35-1.455-3.855-2.475-3.75-4.41.03-.705.285-2.564 4.8-4.814 3.705-1.846 6.661-1.335 7.171-.21.733 1.604-1.576 4.59-5.431 5.024-1.47.165-2.235-.404-2.431-.615-.209-.225-.239-.24-.314-.194-.12.06-.045.255 0 .375.12.3.585.825 1.396 1.095.704.225 2.43.359 4.5-.45 2.324-.899 4.139-3.405 3.614-5.505l.073.067z"/></svg>}>
        Layer-based cascading overrides on top of Tailwind CSS for pre-defined theme styles.
      </Card>

      <Card title="Vite (Bundler)" icon={<svg fill="#9135FF" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Vite</title><path d="M13.056 23.238a.57.57 0 0 1-1.02-.355v-5.202c0-.63-.512-1.143-1.144-1.143H5.148a.57.57 0 0 1-.464-.903l3.777-5.29c.54-.753 0-1.804-.93-1.804H.57a.574.574 0 0 1-.543-.746.6.6 0 0 1 .08-.157L5.008.78a.57.57 0 0 1 .467-.24h14.589a.57.57 0 0 1 .466.903l-3.778 5.29c-.54.755 0 1.806.93 1.806h5.745c.238 0 .424.138.513.322a.56.56 0 0 1-.063.603z"/></svg>}>
        Fast dev server bridge, TailwindCSS CSS compilation, SCSS compilation, and JS bundling.
      </Card>

      <Card title="Crawler Script (Static snapshot)" icon={<svg fill="#cf4e27ff" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><title>Spider</title><path d="M158.4 32.6c4.8-12.4-1.4-26.3-13.8-31s-26.3 1.4-31 13.8L81.1 100c-7.9 20.7-3 44.1 12.7 59.7l57.4 57.4L70.8 190.3c-2.4-.8-4.3-2.7-5.1-5.1L46.8 128.4C42.6 115.8 29 109 16.4 113.2S-3 131 1.2 143.6l18.9 56.8c5.6 16.7 18.7 29.8 35.4 35.4L116.1 256 55.6 276.2c-16.7 5.6-29.8 18.7-35.4 35.4L1.2 368.4C-3 381 3.8 394.6 16.4 398.8s26.2-2.6 30.4-15.2l18.9-56.8c.8-2.4 2.7-4.3 5.1-5.1l80.4-26.8L93.7 352.3C78.1 368 73.1 391.4 81.1 412l32.5 84.6c4.8 12.4 18.6 18.5 31 13.8s18.5-18.6 13.8-31l-32.5-84.6c-1.1-3-.4-6.3 1.8-8.5L160 353.9c1 52.1 43.6 94.1 96 94.1s95-41.9 96-94.1l32.3 32.3c2.2 2.2 2.9 5.6 1.8 8.5l-32.5 84.6c-4.8 12.4 1.4 26.3 13.8 31s26.3-1.4 31-13.8L430.9 412c7.9-20.7 3-44.1-12.7-59.7l-57.4-57.4 80.4 26.8c2.4 .8 4.3 2.7 5.1 5.1l18.9 56.8c4.2 12.6 17.8 19.4 30.4 15.2s19.4-17.8 15.2-30.4l-18.9-56.8c-5.6-16.7-18.7-29.8-35.4-35.4L395.9 256l60.5-20.2c16.7-5.6 29.8-18.7 35.4-35.4l18.9-56.8c4.2-12.6-2.6-26.2-15.2-30.4s-26.2 2.6-30.4 15.2l-18.9 56.8c-.8 2.4-2.7 4.3-5.1 5.1l-80.4 26.8 57.4-57.4c15.6-15.6 20.6-39 12.7-59.7L398.4 15.4C393.6 3 379.8-3.2 367.4 1.6s-18.5 18.6-13.8 31l32.5 84.6c1.1 3 .4 6.3-1.8 8.5L336 174.1l0-14.1c0-31.8-18.6-59.3-45.5-72.2c-9.1-4.4-18.5 3.3-18.5 13.4l0 10.8c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-10.8c0-10.1-9.4-17.7-18.5-13.4C194.6 100.7 176 128.2 176 160l0 14.1-48.3-48.3c-2.2-2.2-2.9-5.6-1.8-8.5l32.5-84.6z"/></svg>} color="#cf4e27ff">
        Custom crawler converting local PHP dev server output directly into flat HTML.
      </Card>

      <Card title="Archiver (Distribution)" icon={<svg fill="#ffb235ff" role="img" width="18" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg"><title>File Zipper</title><path d="M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM96 48c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16zm-6.3 71.8c3.7-14 16.4-23.8 30.9-23.8l14.8 0c14.5 0 27.2 9.7 30.9 23.8l23.5 88.2c1.4 5.4 2.1 10.9 2.1 16.4c0 35.2-28.8 63.7-64 63.7s-64-28.5-64-63.7c0-5.5 .7-11.1 2.1-16.4l23.5-88.2zM112 336c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0z"/></svg>} color="#ffb235ff">
        Packages `dist/` into a deployable client ZIP or customer-ready deliverables files for marketplaces.
      </Card>

      <Card title="Netlify / Vercel (Deployment)" icon={<svg fill="#25933eff" role="img" width="28" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><title>Cloud Arrow Up</title><path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39L296 392c0 13.3 10.7 24 24 24s24-10.7 24-24l0-134.1 39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"/></svg>} color="#25933eff">
        One-command CLI deployments of `dist/` to shareable URLs for client review via Netlify or Vercel.
      </Card>
    </CardGroup>
  </div>
</div>
