Swiss Knife Bricks
Swiss Knife Bricks

#1 Add-on for Bricks Builder

Swiss Knife Bricks is a powerful toolkit for Bricks Builder that enhances your web development workflow with advanced features and management tools, all seamlessly integrated within the builder.

Starts from $39

See Features

14 Days Money Back Guarantee

Secured Payments Stripe and PayPal

+ 30 000 Happy Users

What makes Swiss Knife Special

Please watch the plugin intro video while we are redesigning our website
and presenting all the features of our plugin.
New

$19

/ Per year

Single Licence

Checkout Added to cart

1 Domain Limit

1 Year Plugin Update

1 Year Priority Support

All Features Included

$45

/ Per year

Agency Licence

Checkout Added to cart

5 Domains Limit

1 Year Plugin Update

1 Year Priority Support

All Features Included

$79

/ Per year

Developer Licence

Checkout Added to cart

199 Domains

1 Year Plugin Update

1 Year Priority Support

All Features Included

$29

/ One payment

Single Licence LTD

Checkout Added to cart

1 Domain Limit

LTD Plugin Update

LTD Priority Support

All Features Included

$89

/ One payment

Agency Licence LTD

Checkout Added to cart

5 Domains Limit

LTD Plugin Update

LTD Priority Support

All Features Included

$119

/ One payment

Developer Licence LTD

Checkout Added to cart

199 Domains

LTD Plugin Update

LTD Priority Support

All Features Included
14-Day Money-Back Guarantee

Probably you will never need this with our awesome products but here it is just in case. If you aren’t completely satisfied within 14 days of purchase, you’re more than welcome to get a full refund!

Contact support
Marko Krstić

September 20, 2022

Winden

Winden

Design at the Speed of Thought.

Tailwind CSS optimization tool. Directly on your server, Winden empowers you to purge unnecessary styles and streamline your CSS. With just one click, transform your production CSS into a lean file, often weighing in under 20kb. Join the ranks of 2.5 million satisfied Tailwind users who trust Winden for their optimization needs. Designed for compatibility, Winden seamlessly integrates with all major visual builders.

Starts from $29

See Features

14 Days Money Back Guarantee

Secured Payments Stripe and PayPal

+ 30 000 Happy Users

Featured at:

What makes Winden Special

Tailwind made easy

A utility-first CSS framework

packed with classes like flex, mx-12, text-uppercase and rotate-90 that can be composed to build any design, directly in your markup.

Why Pay for Winden

Since Tailwind is Free

Tailwind is available at no cost, but it requires Node.js to be installed on your server. Additionally, you need to scan visual builders, plugins, and themes for classes to compile them, resulting in a smaller, more efficient build. We have streamlined this process for you, enabling a plug-and-play experience. By clicking the compile button, your project will be ready for production. However, it is important to note that you will incur server costs, and since builders are constantly updating and changing logic, we need to monitor these changes and update Winden accordingly.

WordPress

Winden is compatible with the entire WordPress ecosystem. When creating a theme from scratch, Winden can analyze the theme files and generate CSS tailored to the classes utilized within those files.

Gutenberg

Winden offers a plug-and-play experience for those using builders, with integrations for Gutenberg as well as other Gutenberg-based builders such as GreenShift, Kadence, and Cwicly. Winden enhances the building process by providing a class field to easily apply styles.

Bricks Builder

Winden will integrate with Bricks Builder, offering users the flexibility to employ Tailwind as their preferred CSS framework. You can choose to disable Tailwind’s base (reset) CSS to keep Bricks’ opinionated styles, or alternatively, disable Bricks Builder’s CSS for a full Tailwind experience.

Oxygen Builder

Winden will integrate with Oxygen Builder, offering users the flexibility to employ Tailwind as their preferred CSS framework. You can choose to disable Tailwind’s base (reset) CSS to keep Oxygen’s opinionated styles, or alternatively, disable Oxygen Builder’s CSS for a full Tailwind experience.

FREE design Kits

Yes. There are tons of free design kits that you can grab online

Daisy UI, Flowbite, Preline UI, Tailblocks are just some that are ready made to grab and include in your next project.

View resources →

utility patterns

Do Not repeat yourself for reusable components

@apply directive is to the rescue. Use Tailwind’s @apply directive to extract repeated utility patterns into custom CSS classes just by copying and pasting the list of class names.

Tiny Production CSS

Tailwind CSS focuses on high performance, creating tiny CSS files by including only the CSS your project uses. With further minification and compression, the resulting files are often under 10kB—even for big projects. For instance, Netflix’s Top 10 website uses just 6.5kB of CSS. This approach eliminates the need for complex methods like CSS code-splitting, allowing for a single, small, cache-friendly CSS file for your entire site..

No more CSS mess

Does the thought of making a minor style update in a large front-end project give you pause? It can be especially hard when I’m modifying a project written by another team, even if the change is small.

Maintaining custom CSS can be burdensome. After six months, editing just one line could lead to unexpected issues on some many places that you are not aware. With Tailwind, the styles you see directly correspond to what you get. Any style changes are made within the markup, affecting only the specific elements you edit.

EASily configurable

Tailwind CSS simplifies customization through a central configuration file, enabling the creation of unique design systems with ease. Its utility-first approach generates responsive, maintainable classes that developers use to craft designs directly in the markup, enhancing productivity. The vibrant community around Tailwind also offers an array of plugins and tools, broadening its adaptability and making the configuration process both straightforward and flexible.

WHY IS CSS so HARD?

CSS Projects BECOME GRAVEYARD OVER TIME

CSS projects can often become cluttered and difficult to manage over time, turning into a sort of ‘graveyard’ of old styles and unused code. This can make maintenance challenging, as it’s hard to discern which styles are in use and which can be safely removed without breaking the layout.

CSS IS HARD FOR TEAM WORK

Differing coding styles, overlapping rules, and specificity conflicts can cause issues and inconsistencies in team environments. If a developer is unaware of existing styles, they might create duplicates, resulting in CSS bloat and visual discrepancies. Additionally, a naming convention must be clear and understood by the entire team to be effective. Considerable time can be spent on deciding how to name selectors, which is a critical part of maintaining a clean and manageable codebase.

CSS IS NOT DRY. Don’t repeat yourself

CSS can often lead to repetitive code, which violates the DRY (Don’t Repeat Yourself) principle common in software development. This redundancy happens because CSS requires developers to write similar styles for different elements, rather than using a single reusable style.

Since the total number of potential selectors grows exponentially on large projects, it impacts both cognitive load and change amplification – to understand and modify its implemented subset.

Well crafted styles out of the box

Stop struggling to find and create the perfect size ratios, finely-tuned color spectrums, shadows, and other styles. They are ready to use right now.

<div class="space-y-4">
  <div class="w-96 bg-white shadow rounded">
      w-96
  </div>
  <div class="w-80 bg-white shadow rounded">
      w-80
  </div>
  <div class="w-72 bg-white shadow rounded">
      w-72
  </div>
  <div class="w-64 bg-white shadow rounded">
      w-64
  </div>
  <div class="w-60 bg-white shadow rounded">
      w-60
  </div>
  <div class="w-56 bg-white shadow rounded">
      w-56
  </div>
  <div class="w-52 bg-white shadow rounded">
      w-52
  </div>
  <div class="w-48 bg-white shadow rounded">
      w-48
  </div>
</div>

<div class="grid grid-cols-10 gap-2">
  <div class="bg-sky-50 aspect-square"></div>
  <div class="bg-sky-100 aspect-square"></div>
  <div class="bg-sky-200 aspect-square"></div>
  <div class="bg-sky-300 aspect-square"></div>
  <div class="bg-sky-400 aspect-square"></div>
  <div class="bg-sky-500 aspect-square"></div>
  <div class="bg-sky-600 aspect-square"></div>
  <div class="bg-sky-700 aspect-square"></div>
  <div class="bg-sky-800 aspect-square"></div>
  <div class="bg-sky-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
  <div class="bg-blue-50 aspect-square"></div>
  <div class="bg-blue-100 aspect-square"></div>
  <div class="bg-blue-200 aspect-square"></div>
  <div class="bg-blue-300 aspect-square"></div>
  <div class="bg-blue-400 aspect-square"></div>
  <div class="bg-blue-500 aspect-square"></div>
  <div class="bg-blue-600 aspect-square"></div>
  <div class="bg-blue-700 aspect-square"></div>
  <div class="bg-blue-800 aspect-square"></div>
  <div class="bg-blue-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
  <div class="bg-indigo-50 aspect-square"></div>
  <div class="bg-indigo-100 aspect-square"></div>
  <div class="bg-indigo-200 aspect-square"></div>
  <div class="bg-indigo-300 aspect-square"></div>
  <div class="bg-indigo-400 aspect-square"></div>
  <div class="bg-indigo-500 aspect-square"></div>
  <div class="bg-indigo-600 aspect-square"></div>
  <div class="bg-indigo-700 aspect-square"></div>
  <div class="bg-indigo-800 aspect-square"></div>
  <div class="bg-indigo-900 aspect-square"></div>
</div>
<div class="grid grid-cols-10 gap-2">
  <div class="bg-violet-50 aspect-square"></div>
  <div class="bg-violet-100 aspect-square"></div>
  <div class="bg-violet-200 aspect-square"></div>
  <div class="bg-violet-300 aspect-square"></div>
  <div class="bg-violet-400 aspect-square"></div>
  <div class="bg-violet-500 aspect-square"></div>
  <div class="bg-violet-600 aspect-square"></div>
  <div class="bg-violet-700 aspect-square"></div>
  <div class="bg-violet-800 aspect-square"></div>
  <div class="bg-violet-900 aspect-square"></div>
</div>

<div class="space-y-5">
  <div class="p-3 bg-white shadow rounded-lg">
    <h3 class="text-xs border-b">font-sans</h3>
    <p class="font-sans">
      The quick brown fox jumps over the lazy dog.
    </p>
  </div>
  <div class="p-3 bg-white shadow rounded-lg">
    <h3 class="text-xs border-b">font-serif</h3>
    <p class="font-serif">
      The quick brown fox jumps over the lazy dog.
    </p>
  </div>
  <div class="p-3 bg-white shadow rounded-lg">
    <h3 class="text-xs border-b">font-mono</h3>
    <p class="font-mono">
      The quick brown fox jumps over the lazy dog.
    </p>
  </div>
</div>

<div class="grid grid-cols-2 gap-6">
  <div class="shadow-sm bg-white rounded-lg">
    shadow-sm
  </div>
  <div class="shadow bg-white rounded-lg">
    shadow
  </div>
  <div class="shadow-md bg-white rounded-lg">
    shadow-md
  </div>
  <div class="shadow-lg bg-white rounded-lg">
    shadow-lg
  </div>
  <div class="shadow-xl bg-white rounded-lg">
    shadow-xl
  </div>
  <div class="shadow-2xl bg-white rounded-lg">
    shadow-2xl
  </div>
</div>

<div class="flex font-sans">
  <div class="flex-none w-48 relative">
    <img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
  </div>
  <form class="flex-auto p-6">
    <div class="flex flex-wrap">
      <h1 class="flex-auto text-lg font-semibold text-slate-900">
        Utility Jacket
      </h1>
      <div class="text-lg font-semibold text-slate-500">
        $110.00
      </div>
      <div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
        In stock
      </div>
    </div>
    <div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
      <div class="space-x-2 flex text-sm">
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xs" checked />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            XS
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="s" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            S
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="m" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            M
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="l" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            L
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xl" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            XL
          </div>
        </label>
      </div>
    </div>
    <div class="flex space-x-4 mb-6 text-sm font-medium">
      <div class="flex-auto flex space-x-4">
        <button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
          Buy now
        </button>
        <button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900" type="button">
          Add to bag
        </button>
      </div>
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200" type="button" aria-label="Like">
        <svg width="20" height="20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-sm text-slate-700">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

<div class="flex font-sans">
  <div class="flex-none w-56 relative">
    <img src="/kids-jumpsuit.jpg" alt="" class="absolute inset-0 w-full h-full object-cover rounded-lg" loading="lazy" />
  </div>
  <form class="flex-auto p-6">
    <div class="flex flex-wrap">
      <h1 class="flex-auto font-medium text-slate-900">
        Kids Jumpsuit
      </h1>
      <div class="w-full flex-none mt-2 order-1 text-3xl font-bold text-violet-600">
        $39.00
      </div>
      <div class="text-sm font-medium text-slate-400">
        In stock
      </div>
    </div>
    <div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
      <div class="space-x-2 flex text-sm font-bold">
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xs" checked />
          <div class="w-9 h-9 rounded-full flex items-center justify-center text-violet-400 peer-checked:bg-violet-600 peer-checked:text-white">
            XS
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="s" />
          <div class="w-9 h-9 rounded-full flex items-center justify-center text-violet-400 peer-checked:bg-violet-600 peer-checked:text-white">
            S
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="m" />
          <div class="w-9 h-9 rounded-full flex items-center justify-center text-violet-400 peer-checked:bg-violet-600 peer-checked:text-white">
            M
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="l" />
          <div class="w-9 h-9 rounded-full flex items-center justify-center text-violet-400 peer-checked:bg-violet-600 peer-checked:text-white">
            L
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xl" />
          <div class="w-9 h-9 rounded-full flex items-center justify-center text-violet-400 peer-checked:bg-violet-600 peer-checked:text-white">
            XL
          </div>
        </label>
      </div>
    </div>
    <div class="flex space-x-4 mb-5 text-sm font-medium">
      <div class="flex-auto flex space-x-4">
        <button class="h-10 px-6 font-semibold rounded-full bg-violet-600 text-white" type="submit">
          Buy now
        </button>
        <button class="h-10 px-6 font-semibold rounded-full border border-slate-200 text-slate-900" type="button">
          Add to bag
        </button>
      </div>
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-full text-violet-600 bg-violet-50" type="button" aria-label="Like">
        <svg width="20" height="20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-sm text-slate-500">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

<div class="flex font-serif">
  <div class="flex-none w-52 relative">
    <img src="/dogtooth-style-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover rounded-lg" loading="lazy" />
  </div>
  <form class="flex-auto p-6">
    <div class="flex flex-wrap items-baseline">
      <h1 class="w-full flex-none mb-3 text-2xl leading-none text-slate-900">
        DogTooth Style Jacket
      </h1>
      <div class="flex-auto text-lg font-medium text-slate-500">
        $350.00
      </div>
      <div class="text-xs leading-6 font-medium uppercase text-slate-500">
        In stock
      </div>
    </div>
    <div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
      <div class="space-x-1 flex text-sm font-medium">
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xs" checked />
          <div class="w-7 h-7 rounded-full flex items-center justify-center text-slate-500 peer-checked:bg-slate-100 peer-checked:text-slate-900">
            XS
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="s" />
          <div class="w-7 h-7 rounded-full flex items-center justify-center text-slate-500 peer-checked:bg-slate-100 peer-checked:text-slate-900">
            S
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="m" />
          <div class="w-7 h-7 rounded-full flex items-center justify-center text-slate-500 peer-checked:bg-slate-100 peer-checked:text-slate-900">
            M
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="l" />
          <div class="w-7 h-7 rounded-full flex items-center justify-center text-slate-500 peer-checked:bg-slate-100 peer-checked:text-slate-900">
            L
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xl" />
          <div class="w-7 h-7 rounded-full flex items-center justify-center text-slate-500 peer-checked:bg-slate-100 peer-checked:text-slate-900">
            XL
          </div>
        </label>
      </div>
    </div>
    <div class="flex space-x-4 mb-5 text-sm font-medium">
      <div class="flex-auto flex space-x-4 pr-4">
        <button class="flex-none w-1/2 h-12 uppercase font-medium tracking-wider bg-slate-900 text-white" type="submit">
          Buy now
        </button>
        <button class="flex-none w-1/2 h-12 uppercase font-medium tracking-wider border border-slate-200 text-slate-900" type="button">
          Add to bag
        </button>
      </div>
      <button class="flex-none flex items-center justify-center w-12 h-12 text-slate-300 border border-slate-200" type="button" aria-label="Like">
        <svg width="20" height="20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-sm text-slate-500">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

<div class="flex p-6 font-mono">
  <div class="flex-none w-48 mb-10 relative z-10 before:absolute before:top-1 before:left-1 before:w-full before:h-full before:bg-teal-400">
    <img src="/retro-shoe.jpg" alt="" class="absolute z-10 inset-0 w-full h-full object-cover rounded-lg" loading="lazy" />
  </div>
  <form class="flex-auto pl-6">
    <div class="relative flex flex-wrap items-baseline pb-6 before:bg-black before:absolute before:-top-6 before:bottom-0 before:-left-60 before:-right-6">
      <h1 class="relative w-full flex-none mb-2 text-2xl font-semibold text-white">
        Retro Shoe
      </h1>
      <div class="relative text-lg text-white">
        $89.00
      </div>
      <div class="relative uppercase text-teal-400 ml-3">
        In stock
      </div>
    </div>
    <div class="flex items-baseline my-6">
      <div class="space-x-3 flex text-sm font-medium">
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xs" checked />
          <div class="relative w-10 h-10 flex items-center justify-center text-black peer-checked:bg-black peer-checked:text-white before:absolute before:z-[-1] before:top-0.5 before:left-0.5 before:w-full before:h-full peer-checked:before:bg-teal-400">
            XS
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="s" />
          <div class="relative w-10 h-10 flex items-center justify-center text-black peer-checked:bg-black peer-checked:text-white before:absolute before:z-[-1] before:top-0.5 before:left-0.5 before:w-full before:h-full peer-checked:before:bg-teal-400">
            S
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="m" />
          <div class="relative w-10 h-10 flex items-center justify-center text-black peer-checked:bg-black peer-checked:text-white before:absolute before:z-[-1] before:top-0.5 before:left-0.5 before:w-full before:h-full peer-checked:before:bg-teal-400">
            M
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="l" />
          <div class="relative w-10 h-10 flex items-center justify-center text-black peer-checked:bg-black peer-checked:text-white before:absolute before:z-[-1] before:top-0.5 before:left-0.5 before:w-full before:h-full peer-checked:before:bg-teal-400">
            L
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xl" />
          <div class="relative w-10 h-10 flex items-center justify-center text-black peer-checked:bg-black peer-checked:text-white before:absolute before:z-[-1] before:top-0.5 before:left-0.5 before:w-full before:h-full peer-checked:before:bg-teal-400">
            XL
          </div>
        </label>
      </div>
    </div>
    <div class="flex space-x-2 mb-4 text-sm font-medium">
      <div class="flex space-x-4">
        <button class="px-6 h-12 uppercase font-semibold tracking-wider border-2 border-black bg-teal-400 text-black" type="submit">
          Buy now
        </button>
        <button class="px-6 h-12 uppercase font-semibold tracking-wider border border-slate-200 text-slate-900" type="button">
          Add to bag
        </button>
      </div>
      <button class="flex-none flex items-center justify-center w-12 h-12 text-black" type="button" aria-label="Like">
        <svg width="20" height="20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-xs leading-6 text-slate-500">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

What makes Winden Special

FONT HERO INTEGRATION

TRICKS WITH OXYGEN BUILTER

BRICKS BUILDER INTEGRATION

Winden Course Intro

Tailwind Configuration

Complete page development

Watch entire course

Please watch the plugin intro video while we are redesigning our website
and presenting all the features of our plugin.

New

$19

/ Per year

Single Licence

1 Domain Limit
1 Year Plugin Update
1 Year Priority Support
All Features Included

$49

/ Per year

Agency Licence

5 Domains Limit
1 Year Plugin Update
1 Year Priority Support
All Features Included

$79

/ Per year

Developer Licence

199 Domains
1 Year Plugin Update
1 Year Priority Support
All Features Included

$29

/ One payment

Single Licence LTD

1 Domain Limit
LTD Plugin Update
LTD Priority Support
All Features Included

$89

/ One payment

Agency Licence LTD

5 Domains Limit
LTD Plugin Update
LTD Priority Support
All Features Included

$119

/ One payment

Developer Licence LTD

199 Domains
LTD Plugin Update
LTD Priority Support
All Features Included

14-Day Money-Back Guarantee

Probably you will never need this with our awesome products but here it is just in case. If you aren’t completely satisfied within 14 days of purchase, you’re more than welcome to get a full refund!

Contact support

Marko Krstić

March 20, 2022

Scripts Organizer
Scripts Organizer

DMost Advanced Code editor for WordPress

Get full Code Editor experience inside WordPress with support to write PHP hooks and functions, JavaScript, CSS, and compile SCSS. Scripts can be scheduled and triggered based on your needs regardless if you’re sleeping taking a coffee break or on vacation.

Starts from $29

See Features

14 Days Money Back Guarantee

Secured Payments Stripe and PayPal

+ 30 000 Happy Users

What makes Scripts Organizer Special

CHANGE WORDPRESS FUNCTIONALITY

PHP, JavaScript, SCSS or CSS

Scripts Organizer provides a PHP block where you can write filters, hooks, or shortcodes. If you need to modify website styles, you can add CSS or compile SCSS. For interactive features, you can write JavaScript. Additionally, you can inject tracking scripts like Google Analytics (GA), HotJar, or others.

Scripts Organizer compatibility

EVERY THEME, PLUGIN OR VISUAL BUIDER

If you are using a classic or block theme, or if you are using a visual builder, Scripts Organizer will assist you throughout the process. We are not only compatible with them but have also integrated deeply, allowing us to access colors or variables from themes or builders.

VISUAL STUDIO INSIDE WORDPreSS

🔥Hot reload

ALl tabs and windows

Developers and designers adore using dual screens and multiple tabs. With Scripts Organizer in one tab and the website frontend in another, simply press ‘save,’ and all tabs and screens will be updated with the latest CSS. We save you a ton of time, especially when using visual builders—you don’t need to reload to see the results.

Live Preview

Inside Editor

If you prefer to have everything in one tab, that also works. You can have both the editor and website in a single tab, and it will automatically reload upon saving. Additionally, you can utilize inspect tools and resize the website, with predefined sizes available from desktop to mobile.

CSS Variable scraper

Get variables from theme or plugins

Scripts Organizer will scan all the CSS loaded on the selected page and extract CSS variables for use with the variable picker. You no longer need to remember them.

SCSS Partials

Avoid repetition and centralize core CSS in one location. Discard lengthy CSS files. For optimal performance, divide them and load them only when required for each page or post type. This will allow you to update it in one place instead of making changes in every CSS file.

scripTs locations

By default, we place CSS in the header and JS in the footer. However, you can customize this based on your requirements. Additionally, for PHP, there are multiple hooks available, such as ‘plugins loaded,’ ‘init,’ ‘admin header and footer,’ ‘body open,’ and many more, to help you integrate your code effectively.

Get Builder colors

Integrating with visual builders to extract global colors as code values is a clever approach. Obtaining these values as variables ensures automatic updates when changes occur within the builder. This simplifies maintaining design consistency on your website or app, whether you use Oxygen, Bricks, Elementor, or other builders, streamlining your development process.

Screen Of death?

Never again!

Coding directly on a live website carries significant risks. If the code contains errors, it can potentially disrupt the entire website for all users. This might necessitate enabling debugging, causing errors and warnings to be visible to everyone visiting the site. Instead of this, we propose a safer approach: we will assess your code in the background. In the event of an error, you will promptly receive an option to deactivate only the problematic code block, along with an explanation pinpointing the source of the error.

include Frameworks

Easy upload or CDN. Easy to manage

With the Scripts Manager, you gain an intelligent method for organizing your scripts in one centralized location. You can effortlessly incorporate CSS or JS libraries via CDN or self-host them by uploading them to the media library, just like any other file. You have the flexibility to choose whether you want to enable them across the entire website or activate them based on code block conditions. If you update or replace a file, these changes will automatically propagate to all relevant code blocks.

caching files

In terms of performance, CSS and JavaScript can either be inlined in HTML or, for better caching, be created as separate files. On the other hand, SCSS and PHP blocks are always saved as files. This ensures that we don’t retrieve them from the database every time, unless they are updated.

Files Sync

If you wish to edit the generated files using your preferred editor, you are free to do so. The script organizer will retrieve the code from these edited files. Once you’re satisfied with the results, you can also sync these edited files back to the database.

Files safe location

By default, all files are placed inside the wp-content directory. However, if you wish to change this location for security reasons or any other purpose, we have provided an option to modify the path and relocate the files.

Trigger everywhere

Execute the code without limitations

Trigger Everywhere offers a straightforward approach to executing code before your themes or plugins activate. It provides access to a comprehensive set of WordPress actions and hooks, ranging from “plugins loaded” to “wp_footer”. It’s a practical tool designed for developers seeking precision and control in their WordPress projects.

This will also help you replace Functions.php without modifying your WordPress Theme so nothing will be lost with Themes updates.

Trigger FOR admins

MODIFY WORDPRESS ADMIN SECTIONS WITHOUT IMPACTING THE FRONT END

Utilize this straightforward one-click setup to implement scripts, styles, or PHP hooks and actions within the WordPress admin area without altering the appearance or functionality of your website’s front end.

Trigger With Conditions

Include, Exclude, Custom Build

This is the most flexible code snippets plugin feature available in the WordPress ecosystem. You can hand-pick pages or posts for execution inclusion. Filter by post type, category, or taxonomy. Opt for comprehensive execution with exceptions for specific selections or ranges. Utilize built-in WordPress conditions like “is_home()”, integrate conditions from other plugins, or craft your own. Ideal for developers seeking precise control.

Time Trigger

Trigger scripts daily at predetermined times. Adjust for a specific time range daily or choose particular days of the week to run scripts at a given time or during a selected time window. Designed for developers wanting controlled scheduling, this option will recur daily or weekly based on your preferences. Use this feature to modify store styles during off-hours or business hours.

Date Trigger

You can also set triggers for a specific day in its entirety. On that designated day, you can have the code run all day or within a specified time frame. This feature allows you to alter the styles of the entire website or just a page for that day. Ideal for developers looking to implement temporary design changes or special event styling.

Date Range Trigger

Execute promotions without being tied to your computer. Set a predefined date range for when scripts should run. This is ideal for launching promotions or holiday specials. You have the option to run these all day or within a specific time frame, offering flexibility for time-sensitive offers or events. Perfect for developers and marketers planning in advance.

Live reload

GSAP Animations

BRICKS BUILDER INTEGRATION

Please watch the plugin intro video while we are redesigning our website
and presenting all the features of our plugin.

Featured at:
Scripts Organizer will be offering LTD prices for a short period of time

After that we will move to yearly plans.

$29

/ One payment

Single Licence

Checkout Added to cart

1 Domain Limit

LTD Plugin Update

LTD Priority Support

All Features Included

$49

/ One payment

Agency Licence

Checkout Added to cart

5 Domains Limit

LTD Plugin Update

LTD Priority Support

All Features Included

$69

/ One payment

Developer Licence

Checkout Added to cart

199 Domains

LTD Plugin Update

LTD Priority Support

All Features Included
14-Day Money-Back Guarantee

Probably you will never need this with our awesome products but here it is just in case. If you aren’t completely satisfied within 14 days of purchase, you’re more than welcome to get a full refund!

Contact support
Marko Krstić

December 9, 2020