Welcome

Welcome to the official Digmarket Documentation. Whether you are a solo freelancer building a landing page or a senior engineer scaling a SaaS dashboard, this guide will help you integrate our premium assets quickly and flawlessly.

The Sterile DOM Philosophy

Before you copy your first component, it is crucial to understand how Digmarket is built. We strictly adhere to the Sterile DOM architecture.

Most UI marketplaces provide code that forces you to install bloated third-party libraries. Digmarket is different. Every component you see in our archive is built using:

• Pure Semantic HTML5
• Native CSS3 (with modern Flexbox/Grid)
• Vanilla JavaScript (Zero jQuery, Zero heavy frameworks)

How to Use the Components

Integrating a Digmarket component into your project is a straightforward, 3-step process:

1. Find your component: Browse our Global Archive and find the UI Block that fits your needs.
2. Copy the Code: Click the </> Get Code button. You will be presented with three tabs: HTML, CSS, and JS.
3. Paste into your project: Paste the HTML into your structural file, the CSS into your stylesheet, and the JS (if any) before your closing </body> tag.

Example: Basic Button Integration

Here is an example of what our code structure looks like. Notice how clean the class names are:

<!-- HTML -->
<button class="dig-primary-button">
    Initialize Core
</button>

<!-- CSS -->
<style>
.dig-primary-button {
    background-color: #447FF6;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.dig-primary-button:hover {
    background-color: #9333ea;
}
</style>

Next Steps

Now that you understand the basics, explore the sidebar to learn how to integrate these native components into modern frameworks like React, Next.js, and Tailwind CSS.