DOCSEARCHbyAlgolia
Submit Docs

VvvebJs

repository·master·Indexed 27 days ago

https://github.com/givanz/vvvebjs

A drag-and-drop page builder JavaScript library built with Vanilla JS and Bootstrap 5. It enables the creation of web pages using components, blocks, and widgets without complex build tools. The library supports page saving via PHP or Node.js backends and can be deployed using Docker.

Tokens
15K
Snippets
60
Records
124
Agent score
94%

What's inside vvvebjs

  4. Use Remix Icon SVG Sprites

    master

    Download the remixicon.symbol.svg file and include it in your project. Use the <use> element to reference specific icons by their ID (e.g., #ri-admin-fill).

    <svg class='remix'>
  <use xlink:href="your-path/remixicon.symbol.svg#ri-admin-fill"></use>
</svg>

<style>
.remix {
  width: 24px;
  height: 24px;
  fill: #333;
}
</style>

  5. Install VvvebJs

    master

    To install VvvebJs, clone the repository using Git. It is important to include submodules to ensure all dependencies are present.

    For Git version 2.13 or newer:

    git clone --recurse-submodules https://github.com/givanz/VvvebJs

    For older Git versions:

    git clone --recursive https://github.com/givanz/VvvebJs

    To pull updates later:

    git pull --recurse-submodules
    git clone --recurse-submodules https://github.com/givanz/VvvebJs

  8. Use Feather Icons with SVG Sprites

    master

    You can use the feather-sprite.svg file to reference icons using the <use> element. This is efficient for reducing HTTP requests.

    1. Obtain the sprite: Install via npm or copy feather-sprite.svg from the dist directory.
    2. Reference icons: Use the <use> tag with a fragment identifier pointing to the icon name.

    Example usage:

    <svg class="feather">
  <use href="path/to/dist/feather-sprite.svg#circle"/>
</svg>

    Recommended CSS for styling:

    .feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
    <svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="path/to/feather-sprite.svg#circle"/>
</svg>