Files
nibiru-framework.com/application/view/mockup/template/home-one-page-header-fixed.html
stephan 48c839d927 Initial public push: docs cosmos v4 + AI module + framework groundwork
This is the snapshot the production landing site (nibiru-framework.com) is
deployed from. Brings together the recent splash + docs migration to the v4
"Cosmos" design system, the new in-framework AI module, and the framework
groundwork that backs the framework-reference extraction.

What lands:
- docs/: Astro + Starlight site with the v4 dark cosmic palette, GalaxyHero
  canvas constellation, Mission Control chat (wired to /api/oracle →
  api.neuronetz.ai via providers.mjs Ollama), 5-panel MMVC stage
  (Model · AI · Module · Controller · View), translated EN/DE/JA/ES/FR
  content, PWA + sitemap + llms.txt + Umami analytics.
- docs/design-system/: canonical mockup bundle (source/index-v2.html for
  splash, source/docs-system.html + preview/ for docs, SPEC.md, tokens).
- docs/scripts/extraction/framework-reference-v2.md: deep framework
  reference (~1.6k lines, file:line citations, every public factory and
  idiom — basis for the LoRA training corpus.
- application/module/ai/: AI module with chat / embed / RAG / agent
  plugins, plus pdoQuery / httpGet / fileRead tools and Modelfile +
  smoke-test in training/.
- application/module/users/: user / ACL / form-factory traits used as the
  reference plugin pattern for the framework docs.
- application/settings/config/database/: schema + seed migrations
  including the AI module tables (200–203).
- Form factory + autogenerator changes the framework-reference-v2 covers.

Production secrets stay out: docs/.env, settings.production.ini and
ai.production.ini are all gitignored (.example files are in tree).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 15:22:18 +02:00

970 lines
47 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page title -->
<title>VSDocs - most advanced documentation template on ThemeForest</title>
<!-- Page description -->
<meta name="description" content="">
<!-- Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="icon" type="image/png" href="img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="img/favicons/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon-180x180.png">
<!-- Include StyleSheets -->
<link rel="stylesheet" href="css/style.min.css">
<!-- <link rel="stylesheet" href="css/custom.css"> -->
<script src="js/modernizr.js"></script>
</head>
<body class="">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Preloader: uncomment this if you want to show a smooth preloader while the page is loading. Don't forget to add the 'js-preload-me' class on the <body> tag. -->
<!-- <div class="preloader js-preloader"><div class="preloader-animation"></div></div>
-->
<!-- End of Preloader -->
<div class="page js-page ">
<!-- One Page Sidebar -->
<div class="one-page-sidebar">
<!-- One Page Sidebar Header -->
<div class="one-page-sidebar-header">
<!-- One Page Logo -->
<div class="one-page-logo">
<!-- Logo Image -->
<a href="index.html" class="logo-image ">
<img src="img/logos/logo-text.png" alt="logo">
</a>
<!-- End of Logo Image -->
</div>
<!-- End of One Page Logo -->
<!-- One Page Meta -->
<div class="one-page-meta">
<ul class="one-page-meta-list">
<li>
<a href="#">
<i class="one-page-meta-list-icon fa fa-link"></i>Website</a>
</li>
<li>
<a href="#">
<i class="one-page-meta-list-icon fa fa-github-alt"></i>GitHub</a>
</li>
<li>
<a href="#">
<i class="one-page-meta-list-icon fa fa-question"></i>Support</a>
</li>
</ul>
</div>
<!-- End of One Page Meta -->
</div>
<!-- End of One Page Sidebar Header -->
<!-- One Page Nav -->
<div class="one-page-nav-wrapper js-custom-scrollbar">
<ul class="one-page-nav js-one-page-nav js-menu-vertical" data-prepend-to=".js-prepend-mobile-menu">
<li class="is-active">
<a href="#content" class="">
<span class="one-page-nav-icon">
<i class="fa fa-thumbs-o-up"></i>
</span>Main features</a>
</li>
<li class="">
<a href="#download-source" class="">
<span class="one-page-nav-icon">
<i class="fa fa-download"></i>
</span>Download source</a>
</li>
<li class="">
<a href="#file-structure" class="">
<span class="one-page-nav-icon">
<i class="fa fa-folder"></i>
</span>File structure</a>
</li>
<li class="">
<a href="#application-structure" class="">
<span class="one-page-nav-icon">
<i class="fa fa-sitemap"></i>
</span>Aplication structure</a>
</li>
<li class="">
<a href="#getting-started" class="">
<span class="one-page-nav-icon">
<i class="fa fa-plug"></i>
</span>Getting started</a>
</li>
<li class="">
<a href="#demo" class="">
<span class="one-page-nav-icon">
<i class="fa fa-laptop"></i>
</span>Demo</a>
</li>
<li class="">
<a href="#table-with-properties" class="">
<span class="one-page-nav-icon">
<i class="fa fa-cogs"></i>
</span>Default properties</a>
</li>
<li class="">
<a href="#browser-support" class="">
<span class="one-page-nav-icon">
<i class="fa fa-internet-explorer"></i>
</span>Browser support</a>
</li>
<li class="">
<a href="#faq" class="">
<span class="one-page-nav-icon">
<i class="fa fa-question"></i>
</span>FAQ</a>
</li>
<li class="">
<a href="#donate" class="">
<span class="one-page-nav-icon">
<i class="fa fa-gift"></i>
</span>Donate</a>
</li>
<li class="">
<a href="http://themeforest.net/item/vsdocs-online-documentation-template/11418861?ref=vsart" class="is-external">
<span class="one-page-nav-icon">
<i class="fa fa-shopping-cart"></i>
</span>Buy now</a>
</li>
</ul>
</div>
<!-- End of One Page Nav -->
<!-- One Page Sidebar Footer -->
<footer class="one-page-sidebar-footer">
<a href="http://vsart.me">VSArt</a>, all rights reserved. 2015 © </footer>
<!-- End of One Page Sidebar Footer -->
</div>
<!-- End of One Page Sidebar -->
<!-- One Page Content -->
<div class="one-page-content">
<!-- Header -->
<header class="header large header-one-page js-header-fixed">
<div class="container-fluid container-spaced">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-5">
<div class="visible-sm-block visible-xs-block">
<!-- Logo Image -->
<a href="index.html" class="logo-image logo-animated">
<img src="img/logos/logo.png" alt="logo">
</a>
<!-- End of Logo Image -->
</div>
</div>
<div class="col-md-9 col-sm-6 col-xs-7">
<!-- Menu -->
<nav class="right helper">
<ul class="menu sf-menu js-menu">
<li>
<a href="index.html">Home
<span class="menu-label">NEW</span>
</a>
<ul>
<li>
<a href="#">One Page Docs</a>
<ul>
<li>
<a href="home-one-page.html">Static Header</a>
</li>
<li>
<a href="home-one-page-header-fixed.html">Sticky Header</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu</a>
<ul>
<li>
<a href="index-2.html">Left - Off Canvas</a>
</li>
<li>
<a href="index-3.html">Right - Off Canvas</a>
</li>
</ul>
</li>
<li>
<a href="#">Static</a>
<ul>
<li>
<a href="home-subscribe.html">Subscribe</a>
</li>
<li>
<a href="home-web.html">Web App</a>
</li>
<li>
<a href="home-mobile-app.html">Mobile App</a>
</li>
<li>
<a href="home-soft.html">Software</a>
</li>
</ul>
</li>
<li>
<a href="#">Video</a>
<ul>
<li>
<a href="index-5.html">Background</a>
</li>
<li>
<a href="home-video-trigger.html">Trigger Simple</a>
</li>
<li>
<a href="home-web-video-trigger.html">Trigger Web</a>
</li>
<li>
<a href="home-app-video-trigger.html">Trigger App</a>
</li>
<li>
<a href="home-soft-video-trigger.html">Trigger Soft</a>
</li>
</ul>
</li>
<li>
<a href="index-4.html">Text Rotator</a>
</li>
<li>
<a href="home-with-preloader.html">With Preloader</a>
</li>
</ul>
</li>
<li>
<a href="#">Pages</a>
<ul>
<li>
<a href="panels.html">Panels</a>
</li>
<li>
<a href="#">Blog</a>
<ul>
<li>
<a href="blog-grid.html">Blog Grid</a>
</li>
<li>
<a href="blog-list.html">Blog List</a>
</li>
<li>
<a href="article.html">Article</a>
</li>
</ul>
</li>
<li>
<a href="faq.html">Faq</a>
</li>
<li>
<a href="notification.html">Notification</a>
</li>
<li>
<a href="tutorial.html">Tutorial</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
<li>
<a href="register.html">Register</a>
</li>
<li>
<a href="404.html">404 Error</a>
</li>
</ul>
</li>
<li>
<a href="#">Elements</a>
<ul>
<li>
<a href="buttons.html">Buttons</a>
</li>
<li>
<a href="boxes.html">Boxes</a>
</li>
<li>
<a href="code.html">Code</a>
</li>
<li>
<a href="visual-guide.html">Visual guide</a>
</li>
<li>
<a href="notes.html">Notes</a>
</li>
<li>
<a href="files.html">File tree</a>
</li>
<li>
<a href="media.html">Media</a>
</li>
<li>
<a href="book.html">Book</a>
</li>
<li>
<a href="steps.html">Steps & Tabs</a>
</li>
<li>
<a href="misc.html">Misc</a>
</li>
</ul>
</li>
<li>
<a href="#">Layouts</a>
<ul>
<li>
<a href="views.html">Views without sidebar</a>
</li>
<li>
<a href="views-left.html">Views left sidebar</a>
</li>
<li>
<a href="views-right.html">Views right sidebar</a>
</li>
<li>
<a href="#">Full left sidebar</a>
<ul>
<li>
<a href="views-left-full.html">Regular</a>
</li>
<li>
<a href="views-left-full-compact.html">Compact</a>
</li>
</ul>
</li>
<li>
<a href="#">Full right sidebar</a>
<ul>
<li>
<a href="views-right-full.html">Regular</a>
</li>
<li>
<a href="views-right-full-compact.html">Compact</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="changelog.html">Changelog</a>
</li>
<li>
<a href="contacts.html">Contacts</a>
</li>
</ul>
</nav>
<!-- End of Menu -->
</div>
</div>
</div>
</header>
<!-- End of Header -->
<div id="content">
<div class="container-fluid container-spaced">
<div class="row">
<div class="col-md-12">
<div class="js-prepend-mobile-menu">
<!-- The mobile menu will be prepended here -->
</div>
<!-- Category Info -->
<div class="category-info helper pt0" id="main-features">
<h3 class="category-title"> Main features
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#main-features">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<p class="category-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nesciunt vitae odit dolores libero quaerat aspernatur autem, ducimus illum explicabo. Esse accusantium ad dolore, obcaecati sapiente atque! Fuga hic similique aut laboriosam in inventore
amet, facere exercitationem alias sapiente temporibus enim animi voluptate ex pariatur eligendi odio reprehenderit eius, id. </p>
</div>
<!-- End of Caregory Info -->
<div class="row">
<div class="col-md-4">
<!-- Box -->
<div class="box box-small-icon">
<img src="http://placehold.it/32x32" class="box-icon" alt="box icon">
<h4 class="box-title">Layouts</h4>
<p class="box-description">Maiores error molestiae laudantium consequatur atque odit aperiam cupiditate, voluptatum molestias incidunt culpa ea totam officiis, necessitatibus rem harum impedit.</p>
</div>
<!-- End of Box -->
</div>
<div class="col-md-4">
<!-- Box -->
<div class="box box-small-icon">
<img src="http://placehold.it/32x32" class="box-icon" alt="box icon">
<h4 class="box-title">Colors</h4>
<p class="box-description">Perspiciatis autem minima ex maxime rerum fugiat ratione molestiae odio iusto assumenda veritatis vero quasi accusantium, quibusdam quidem dicta veniam.</p>
</div>
<!-- End of Box -->
</div>
<div class="col-md-4">
<!-- Box -->
<div class="box box-small-icon">
<img src="http://placehold.it/32x32" class="box-icon" alt="box icon">
<h4 class="box-title">Components</h4>
<p class="box-description">Culpa eveniet, possimus esse, nostrum et quasi corrupti placeat atque quaerat molestiae unde aspernatur, vel quod. Fugiat, quos, nihil. Accusantium.</p>
</div>
<!-- End of Box -->
</div>
</div>
<div class="row">
<div class="col-md-4">
<!-- Box -->
<div class="box box-small-icon">
<img src="http://placehold.it/32x32" class="box-icon" alt="box icon">
<h4 class="box-title">Attention</h4>
<p class="box-description">Doloremque asperiores doloribus blanditiis ad deserunt in rerum magni quasi repellat reiciendis eaque voluptatum facere cumque neque repudiandae accusantium, ipsa!</p>
</div>
<!-- End of Box -->
</div>
<div class="col-md-4">
<!-- Box -->
<div class="box box-small-icon">
<img src="http://placehold.it/32x32" class="box-icon" alt="box icon">
<h4 class="box-title">Most advanced</h4>
<p class="box-description">Hic dolorum illum vitae voluptatibus, ut cupiditate ea. Voluptates rem ipsa at alias, debitis officiis minima vero, distinctio quaerat vel.</p>
</div>
<!-- End of Box -->
</div>
<div class="col-md-4">
<!-- Box -->
<div class="box box-small-icon">
<img src="http://placehold.it/32x32" class="box-icon" alt="box icon">
<h4 class="box-title">Configs</h4>
<p class="box-description">Earum dignissimos odit, cumque impedit magnam nemo sint. Officiis iste expedita ad ipsum est dicta ut ex, ab quidem nobis.</p>
</div>
<!-- End of Box -->
</div>
</div>
<!-- Category Info -->
<div class="category-info " id="download-source">
<h3 class="category-title"> Download source
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#download-source">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<p class="category-content"> Rem quibusdam expedita quaerat quam laborum ducimus, eius sequi. Perspiciatis soluta quibusdam tempore mollitia eos provident error aperiam atque repudiandae, dignissimos omnis aliquid assumenda laudantium distinctio modi ducimus neque unde iure
cumque officia et culpa nesciunt beatae architecto rerum. Expedita, accusantium, voluptatibus. </p>
</div>
<!-- End of Caregory Info -->
<div class="row">
<div class="col-md-6 col-lg-3">
<!-- Box -->
<div class="box ">
<h4 class="box-title">Source</h4>
<p class="box-description">Reiciendis error minus, voluptates fugit ea ipsa eaque animi veritatis quis quia et officia consectetur cumque nulla quod vel laudantium est qui numquam beatae ut.</p>
<a class="button blue stroke rounded">Download source</a>
</div>
<!-- End of Box -->
</div>
<div class="col-md-6 col-lg-3">
<!-- Box -->
<div class="box ">
<h4 class="box-title">Gulp</h4>
<p class="box-description">Deleniti, sapiente reprehenderit sed laudantium nemo iure repellat impedit aut quo, fugiat vitae earum minima sint et doloremque in maiores exercitationem ipsa commodi harum possimus.</p>
<a class="button blue stroke rounded">Download source</a>
</div>
<!-- End of Box -->
</div>
<div class="col-md-6 col-lg-3">
<!-- Box -->
<div class="box ">
<h4 class="box-title">Template</h4>
<p class="box-description">Porro placeat voluptate perspiciatis, error consectetur asperiores odit debitis repellendus dolores itaque. Quam, voluptates quasi. Non blanditiis ipsam, dignissimos distinctio?</p>
<a class="button blue stroke rounded">Download Less</a>
</div>
<!-- End of Box -->
</div>
<div class="col-md-6 col-lg-3">
<!-- Box -->
<div class="box ">
<h4 class="box-title">Demo</h4>
<p class="box-description">Dicta quam voluptas deleniti velit voluptates voluptate ipsam nostrum eaque illo reprehenderit cupiditate fugit architecto quod, repellendus delectus debitis.</p>
<a class="button blue stroke rounded">Download demo</a>
</div>
<!-- End of Box -->
</div>
</div>
<!-- Category Info -->
<div class="category-info " id="file-structure">
<h3 class="category-title"> File structure
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#file-structure">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Let's talk about what's inside the package.</h4>
<p class="category-content"> Rem quibusdam expedita quaerat quam laborum ducimus, eius sequi. Perspiciatis soluta quibusdam tempore mollitia eos provident error aperiam atque repudiandae, dignissimos omnis aliquid assumenda laudantium distinctio modi ducimus neque unde iure
cumque officia et culpa nesciunt beatae architecto rerum. Expedita, accusantium, voluptatibus. </p>
</div>
<!-- End of Caregory Info -->
<!-- File Tree -->
<div class="file-tree">
<div class="file-tree-title"> Docs file hierarchy
<ul class="file-tree-buttons">
<li class="js-expand">
<i class="fa fa-plus"></i> Expand all</li>
<li class="js-collapse">
<i class="fa fa-minus"></i> Collapse all</li>
</ul>
</div>
<ul class="file-tree-list js-file-tree" data-expanded="">
<li class="is-folder">css -
<span class="file-tree-description">eius esse, nobis libero quo eligendi similique ducimus laboriosam</span>
<ul>
<li class="is-file">custom.css -
<span class="file-tree-description">numquam veniam, soluta vitae magni deserunt velit officiis suscipi</span>
</li>
<li class="is-file">style.css -
<span class="file-tree-description">doloribus sapiente corrupti maxime, praesentium beatae id quisquam qui</span>
</li>
<li class="is-file">style.min.css -
<span class="file-tree-description">sit in ea ducimus numquam culpa. sint qui au</span>
</li>
</ul>
</li>
<li class="is-folder">fonts -
<span class="file-tree-description">voluptatibus sint placeat excepturi, aut eos fugiat voluptas nobis</span>
<ul>
<li class="is-file">fontawesome.otf -
<span class="file-tree-description">nulla, maxime aliquid illum, provident dolores dolor. saepe quo</span>
</li>
<li class="is-file">fontawesome-webfont.eot -
<span class="file-tree-description">recusandae illo fugiat itaque, illum id quasi cupiditate nem</span>
</li>
<li class="is-file">fontawesome-webfont.svg -
<span class="file-tree-description">ipsa quae error voluptates fugiat. vel eius consequatur nequ</span>
</li>
<li class="is-file">fontawesome-webfont.ttf -
<span class="file-tree-description">debitis ea error repellat, sed cupiditate consequatur perspiciatis? ess</span>
</li>
<li class="is-file">fontawesome-webfont.woff -
<span class="file-tree-description">dolor facilis accusamus consequatur necessitatibus itaque aliquam mollitia accusantiu</span>
</li>
<li class="is-file">fontawesome-webfont.woff2 -
<span class="file-tree-description">laborum hic nostrum eveniet rerum cum nesciunt placeat praesentiu</span>
</li>
</ul>
</li>
<li class="is-folder">img -
<span class="file-tree-description">culpa provident, dolorum totam quisquam numquam consectetur mollitia commod</span>
<ul>
<li class="is-file">img1.jpg -
<span class="file-tree-description">iusto rem iure sunt qui officia quod voluptatum ame</span>
</li>
<li class="is-file">img2.png -
<span class="file-tree-description">consequatur beatae dolorem soluta non nisi, quod ullam molestia</span>
</li>
<li class="is-file">img3.gif -
<span class="file-tree-description">nemo reprehenderit sint deserunt ratione excepturi. fugit a qui</span>
</li>
<li class="is-file">... -
<span class="file-tree-description">maiores cum nobis vitae amet aspernatur a quia eum</span>
</li>
</ul>
</li>
<li class="is-folder">js -
<span class="file-tree-description">earum blanditiis maiores modi nostrum cumque repellat aperiam doloremque</span>
<ul>
<li class="is-file">all.js -
<span class="file-tree-description">laudantium architecto a voluptatibus impedit veniam ea libero erro</span>
</li>
<li class="is-file">custom.js -
<span class="file-tree-description">beatae molestiae, aut deleniti sit voluptatem maiores facere expedita</span>
</li>
</ul>
</li>
<li class="is-folder">less -
<span class="file-tree-description">quidem adipisci, laudantium, inventore ea totam vel temporibus labor</span>
<ul>
<li class="is-file">custom.less -
<span class="file-tree-description">animi asperiores, unde veniam doloremque accusamus numquam. alias inventor</span>
</li>
<li class="is-file">style.less -
<span class="file-tree-description">explicabo voluptas molestias nulla hic, ipsa quisquam id ill</span>
</li>
</ul>
</li>
<li class="is-folder">swf -
<span class="file-tree-description">necessitatibus repudiandae cum omnis eligendi, quod, sunt doloremque ver</span>
<ul>
<li class="is-file">zeroclipboard.swf -
<span class="file-tree-description">necessitatibus pariatur facere a. soluta sint excepturi expedita corpori</span>
</li>
</ul>
</li>
<li class="is-file">index-1.html -
<span class="file-tree-description">quis cum ratione laboriosam ducimus iure voluptates quaerat si</span>
</li>
<li class="is-file">index-2.html -
<span class="file-tree-description">omnis ipsa quas vel alias illum nostrum deleniti officiis</span>
</li>
<li class="is-file">index-3.html -
<span class="file-tree-description">libero et id laborum laboriosam dignissimos a! cum molestia</span>
</li>
<li class="is-file">... -
<span class="file-tree-description">quas provident minus, nisi excepturi culpa rerum voluptates e</span>
</li>
</ul>
</div>
<!-- End of FIle Tree -->
<!-- Category Info -->
<div class="category-info " id="application-structure">
<h3 class="category-title"> Application structure
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#application-structure">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Within a simple schema.</h4>
<p class="category-content"> Possimus eveniet provident voluptatem voluptates, animi earum accusamus obcaecati omnis quo quisquam doloribus cumque nesciunt sit impedit magnam, vitae quod facilis blanditiis. Dolores accusantium repudiandae mollitia quisquam quasi magni hic
harum officiis blanditiis voluptate, totam animi velit quo debitis natus perspiciatis voluptatibus voluptatem beatae laboriosam accusamus, saepe cupiditate ab adipisci iusto neque. </p>
</div>
<!-- End of Caregory Info -->
<img src="http://vsart.me/builder/docs/img/builderStructure/layout.png" class="helper mb60 mt30 image remove-border">
<!-- Category Info -->
<div class="category-info " id="getting-started">
<h3 class="category-title"> Getting started
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#getting-started">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Yep, as simple as that.</h4>
<p class="category-content"> Labore culpa illum repellendus autem rem quam! Aut nostrum dolore sunt quis perferendis eius omnis voluptates fugiat quaerat cupiditate minus dolor sapiente cumque nemo unde illo recusandae, quibusdam exercitationem et molestiae, deserunt aliquam
totam. Atque, voluptatum consectetur obcaecati. Deserunt quod, accusamus repellat! </p>
</div>
<!-- End of Caregory Info -->
<!-- Note -->
<div class="note js-note ">
<h4 class="note-title"> jQuery required </h4>
<p class="note-description"> Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported. </p>
</div>
<!-- End of Note -->
<div class="code-highlight " data-label="">
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://path.com/to/the/compiled/style.css&quot;&gt;
&lt;!-- Optional theme --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://path.com/to/the/chosen/theme.css&quot;&gt;
&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src=&quot;https://path.com/to/the/JavaScript/library.js&quot;&gt;&lt;/script&gt;
</code></pre> </div>
<!-- Category Info -->
<div class="category-info " id="demo">
<h3 class="category-title"> Demo
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#demo">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">By watching those short demo-gif you will better understand how the template works. In those demos we share some best practice recommendations to help you optimize your experience.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Gif Player -->
<div class="gif-player">
<img src="http://placehold.it/670x340" class="js-gif-player" alt="gif animation"> </div>
<!-- End of Grid view -->
<!-- Category Info -->
<div class="category-info " id="table-with-properties">
<h3 class="category-title"> Default properties
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#table-with-properties">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Here's the full list of all available options. You could easily customize your item, just write the required option within your custom.js</h4>
</div>
<!-- End of Caregory Info -->
<!-- Table -->
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Property</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="">
<th scope="row">duplicate</th>
<td>true</td>
<td>If true, a copy of the menu element is made for the mobile menu. This allows for separate functionality for both mobile and non-mobile versions.</td>
</tr>
<tr class="">
<th scope="row">duration</th>
<td>200</td>
<td>The duration of the sliding animation.</td>
</tr>
<tr class="">
<th scope="row">easingOpen</th>
<td>swing</td>
<td>Easing used for open animations. 'Swing' and 'Linear' are available with jQuery. More easing functions are available with the use of plug-ins, such as jQuery UI.</td>
</tr>
<tr class="">
<th scope="row">easingClose</th>
<td>swing</td>
<td>Easing used for close animations. 'Swing' and 'Linear' are available with jQuery. More easing functions are available with the use of plug-ins, such as jQuery UI.</td>
</tr>
<tr class="">
<th scope="row">prependTo</th>
<td>body</td>
<td>Element, jQuery object, or jQuery selector string for the element to prepend the mobile menu to.</td>
</tr>
<tr class="">
<th scope="row">parentTag</th>
<td>a</td>
<td>Element type for parent menu items. Anchor tag is recommended for accessibility.</td>
</tr>
<tr class="">
<th scope="row">closeOnClick</th>
<td>false</td>
<td>Close menu when a link is clicked. Useful when navigating within a single page.</td>
</tr>
<tr class="">
<th scope="row">allowParentClick</th>
<td>false</td>
<td>Allow clickable links as parent elements.</td>
</tr>
</tbody>
</table>
</div>
<!-- End of Table -->
<!-- Category Info -->
<div class="category-info " id="browser-support">
<h3 class="category-title"> Browser support
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#browser-support">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 9+. More specific support information is provided below.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Browser Support -->
<ul class="browsers ">
<li class="browser-recommended">
<div class="browser-icon">
<svg enable-background="new 0 0 515.91 728.5" height="64" id="Layer_2" viewBox="0 0 512.00003 512" width="64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs id="defs7" />
<g id="g6625" transform="translate(-141.91412,-143.63566)">
<path d="m 397.91414,530.64366 c -26.00001,0 -49.66401,-7.008 -71.00801,-20.992 -21.344,-14 -37.344,-32 -48,-54 L 173.91412,271.63565 c -22,39.344 -32,83.344 -32,128.00001 0,64 20.832,119.84 62.496,167.50401 41.66401,47.664 93.50401,76.16 155.50401,85.504 l 74.25601,-128.49601 c -7.472,2.192 -19.936,6.496 -36.256,6.496 z"
id="path5-5" style="fill:#4aae48" />
<path d="m 317.41813,296.13165 c 23.648,-18.32 50.496,-24.496 80.49601,-24.496 4,0 220.00001,0 220.00001,0 -22.672,-38.656 -53.504,-71.32801 -92.49601,-94.00001 -39.008,-22.656 -81.504,-34 -127.504,-34 -40.00001,0 -77.34401,8.496 -112.00001,25.504 -34.672,16.992 -66.75201,41.744 -90.25601,73.50401 l 74.25601,124.992 c 7.328,-28.656 23.824,-53.152 47.504,-71.504 z"
id="path7-1" style="fill:#ea3939" />
<path d="M 634.66615,303.63565 H 485.91414 c 26,26 43.008,59.344 43.008,96.00001 0,27.344 -7.664,52.336 -23.008,75.008 l -104.992,180.99201 c 70,-0.672 129.664,-26 179.00801,-76 49.312,-50.00001 73.984,-110.00001 73.984,-180.00001 0,-32.65601 -5.504,-67.00801 -19.248,-96.00001 z"
id="path9-7" style="fill:#fed14b" />
<circle cx="16" cy="16" id="circle11" r="6" style="fill:#188fd1" transform="matrix(16.000001,0,0,16.000001,141.91412,143.63564)" />
</g>
</svg>
</div>
<h4 class="browser-title"> Chrome </h4>
</li>
<li>
<div class="browser-icon">
<svg enable-background="new 0.907 -0.205 32 32" height="64" viewBox="0.907 -0.205 32 32" width="64" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M16.907-.205c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zm0 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z" fill="#26A6D1" fill-rule="evenodd" />
<path clip-rule="evenodd" d="M25.221 7.48l-6.192 10.436-4.242-4.243 10.434-6.193z" fill="#E2574C" fill-rule="evenodd" />
<path clip-rule="evenodd" d="M8.594 24.11l10.435-6.193-4.242-4.243-6.193 10.436z" fill="#E4E7E7" fill-rule="evenodd" />
</svg>
</div>
<h4 class="browser-title"> Safari </h4>
</li>
<li>
<div class="browser-icon">
<svg enable-background="new 0 0 32 32" height="64" id="Layer_1" viewBox="0 0 32 32" width="64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M26.737,4.375c2.842,2.917,4.264,6.75,4.264,11.5c0,4.334-1.422,8.104-4.264,11.312 C23.895,30.396,20.295,32,15.938,32c-4.316,0-7.885-1.604-10.706-4.812C2.41,23.979,1,20.209,1,15.875 c0-4.75,1.39-8.583,4.171-11.5C7.95,1.459,11.54,0,15.938,0C20.295,0,23.895,1.459,26.737,4.375z M21.291,11.062 c-0.124-1.291-0.373-2.552-0.747-3.781c-0.373-1.229-0.944-2.177-1.711-2.844c-0.769-0.666-1.733-1-2.895-1 c-1.162,0-2.116,0.323-2.863,0.969C12.328,5.053,11.778,6,11.426,7.25S10.835,9.75,10.71,11c-0.124,1.25-0.187,2.771-0.187,4.562 c0,1.125,0.021,2.073,0.062,2.844c0.04,0.771,0.113,1.709,0.218,2.812c0.103,1.104,0.27,2.031,0.498,2.781 c0.228,0.75,0.538,1.49,0.934,2.219c0.394,0.729,0.902,1.281,1.524,1.656s1.348,0.562,2.179,0.562c0.829,0,1.565-0.188,2.21-0.562 c0.643-0.375,1.161-0.927,1.556-1.656C20.098,25.49,20.42,24.75,20.669,24s0.436-1.677,0.56-2.781 c0.125-1.104,0.197-2.052,0.219-2.844c0.02-0.791,0.03-1.729,0.03-2.812C21.478,13.854,21.416,12.354,21.291,11.062z"
fill="#EA3939" />
</g>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
</svg>
</div>
<h4 class="browser-title"> Opera </h4>
</li>
<li>
<div class="browser-icon">
<svg enable-background="new -0.002 -0.501 32 31" height="64" viewBox="-0.002 -0.501 32 31" width="64" xmlns="http://www.w3.org/2000/svg">
<path d="M15.998-.501c8.284 0 15 6.715 15 15 0 8.283-6.716 15-15 15s-15-6.717-15-15c0-8.286 6.716-15 15-15z" fill="#2394BC" />
<path d="M18.562 30.274c7.614-1.229 13.437-7.814 13.437-15.775l-.146.181c.228-1.513.188-2.861-.125-4.037-.112.871-.234 1.397-.357 1.608-.001-.068-.018-.976-.307-2.243-.137-.924-.338-1.793-.616-2.596.068.368.108.675.128.953-1.162-3.118-4.023-6.957-11.072-6.867 0 0 2.479.262 3.646 2.029 0 0-1.193-.285-2.095.152 1.099.438 2.052.896 2.863 1.374l.07.043c.208.125.385.253.573.38 1.498 1.052 2.888 2.553 2.782 4.489-.323-.51-.753-.844-1.304-1.012.679 2.66.746 4.857.197 6.59-.377-1.154-.724-1.846-1.033-2.09.431 3.566-.15 6.203-1.739 7.922.302-1.049.422-1.908.354-2.586-1.867 2.822-3.991 4.281-6.372 4.371-.941-.008-1.83-.15-2.666-.426-1.228-.415-2.339-1.124-3.328-2.13 1.544.129 2.954-.139 4.195-.772l2.033-1.332-.008-.006c.264-.1.512-.092.754.021.496-.068.67-.334.504-.783-.24-.334-.603-.637-1.069-.904-1.017-.531-2.079-.447-3.187.26-1.055.6-2.07.576-3.058-.062-.647-.447-1.272-1.049-1.876-1.801l-.24-.355c-.113.852.015 1.945.398 3.291l.008.018-.008-.016c-.384-1.346-.511-2.442-.398-3.293v-.008c.029-.744.337-1.154.924-1.246l-.249-.021.251.021c.663.061 1.424.213 2.282.463.144-.828-.045-1.695-.564-2.584v-.016c.806-.752 1.521-1.299 2.132-1.648.271-.145.429-.365.481-.662l.022-.016.008-.008.03-.029c.158-.236.105-.426-.165-.594-.565.031-1.131-.008-1.695-.121l-.008.023c-.233-.068-.527-.275-.889-.625l-.927-.912-.278-.219v.029h-.008l.008-.037-.053-.055.075-.053c.128-.691.339-1.285.64-1.795l.068-.061c.302-.502.881-1.041 1.732-1.617-1.582.197-3.013.91-4.285 2.143-1.055-.387-2.305-.305-3.744.25l-.173.132-.013.007.188-.138.008-.008c-.905-.416-1.515-1.611-1.809-3.564-1.152 1.141-1.71 3.178-1.673 6.119l-.33.499-.085.058-.017.016-.007.007-.016.033c-.175.274-.416.688-.72 1.244-.437.786-.584 1.446-.627 2.021l-.004.007.002.019-.014.151.025-.04c.003.133.006.267.04.387l.934-.768c-.339.859-.564 1.77-.678 2.736l-.027.442-.293-.335c0 3.428 1.088 6.597 2.924 9.201l.055.086.088.105c1.32 1.813 3.006 3.338 4.958 4.464 1.403.831 2.911 1.413 4.519 1.759l.331.074c.333.064.674.112 1.016.155.253.033.506.065.762.087l.34.039.483.003.525.026.418-.021.689-.034c.409-.028.812-.073 1.212-.131l.243-.036zm-9.409-16.75h0zm19.527-2.741l-.007.131.005-.132.002.001z"
fill="#EC8840" />
</svg>
</div>
<h4 class="browser-title"> FireFox </h4>
</li>
<li class="browser-partial">
<div class="browser-icon">
<svg enable-background="new 0.001 -0.001 31.996 29.997" height="64" viewBox="0.001 -0.001 31.996 29.997" width="64" xmlns="http://www.w3.org/2000/svg">
<path d="M23.841 17.972h8.032c.074-.576.147-1.162.116-1.758-.321-6.163-4.144-11.568-9.642-13.413l.423.084s10.027-4.359 6.644 5.447l.412.677s3.089-7.542-1.688-8.789c-3.909-1.02-9.686 1.814-9.686 1.814l.213.042c-.359-.025-.721-.042-1.088-.042-7.146 0-13.078 4.845-14.215 11.453.81-.907 3.712-4.255 6.979-6.352 0 0-5.566 4.76-7.177 8.671 0 0-2.064 3.502-2.742 6.122-.41 1.588-1.463 7.283 2.742 7.938 4.376.68 7.829-1.551 7.829-1.551l-.084-.047c1.994 1.018 4.261 1.598 6.667 1.598 6.375 0 11.779-4.26 13.68-9.855h-8.242c-1.123 2.213-3.112 3.449-5.467 3.449-3.123 0-5.413-1.84-6.008-5.488h12.302zm-13.819 9.807s-2.421 1.18-4.463 1.236c-6.243-.057-1.565-8.506-1.565-8.506l-.003-.009c1.107 3.051 3.264 5.619 6.048 7.291l-.017-.012zm7.556-19.226c3.617 0 5.309 2.446 5.718 5.45h-11.697c.635-2.98 2.702-5.45 5.979-5.45z"
fill="#26A6D1" />
</svg>
</div>
<h4 class="browser-title"> IE 9+ </h4>
</li>
</ul>
<!-- End of Browser Support -->
<!-- Category Info -->
<div class="category-info " id="faq">
<h3 class="category-title"> FAQ
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#faq">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Begin typing your question. If we don't have an answer for it in our FAQ, please leave us a message on our contact page.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Faq -->
<div class="faq-filter js-faq-filter" data-target="#my-faq">
<input type="text" placeholder="How to ..."> </div>
<ul class="faq js-faq" id="my-faq">
<li class="faq-item">
<h4 class="faq-question"> What is
<span class="faq-keyword">WordPress</span>? </h4>
<div class="faq-answer"> WordPress is open source web software that you can install on your web server to create your website, blog, community or network. WordPress started out as a tool for blogging, but has evolved into a full-fledged Content Management System (CMS),
capable of powering websites, networks and communities. </div>
</li>
<li class="faq-item">
<h4 class="faq-question"> Why
<span class="faq-keyword">choose</span> WordPress? </h4>
<div class="faq-answer"> One of the principal advantages of WordPress is that you are in control. Unlike remote-hosted scripts such as Blogger and LiveJournal, you host WordPress on your own server. Installation is very simple, as is the configuration. Unlike other software
programs, there are not a million files to chmod nor are there dozens of templates to edit just to get your site set up and looking the way you want. </div>
</li>
<li class="faq-item">
<h4 class="faq-question"> What are WordPress'
<span class="faq-keyword">features</span>? </h4>
<div class="faq-answer"> WordPress has an extensive list of features and, as it is constantly evolving, this list of features is constantly growing. </div>
</li>
<li class="faq-item">
<h4 class="faq-question"> When was WordPress
<span class="faq-keyword">first</span> released? </h4>
<div class="faq-answer"> WordPress started out life as a fork of b2/cafelog by Matt Mullenweg and Mike Little. The first version was released in 2003 </div>
</li>
<li class="faq-item">
<h4 class="faq-question"> What is the
<span class="faq-keyword">GPL</span>? </h4>
<div class="faq-answer"> The GPL is an open source license. This means you are free to modify and redistribute the source code under certain conditions. You can read more about why we chose the GPL on the License Page. </div>
</li>
<li class="faq-item">
<h4 class="faq-question"> Whats the
<span class="faq-keyword">difference</span> between WordPress.org and WordPress.com? </h4>
<div class="faq-answer"> WordPress.com is a blog network run by Automattic. It uses WordPress software, but individual blogs are hosted and managed by WordPress.com. This is a free service with premium addons and upgrades. </div>
</li>
<li class="faq-item">
<h4 class="faq-question"> How Is WordPress related to other
<span class="faq-keyword">blogging</span> applications? </h4>
<div class="faq-answer"> WordPress was primarily inspired by Noah Grey's Greymatter open-source web log and journal software. It is related to b2, sort of a second cousin twice removed. You can use WordPress to post your own stories, ideas, rants, reviews, links, and
pictures of your toothless Uncle Ernie at the wedding reception, if you choose. In addition, you can customize the look and feel of your site. Numerous themes are available and may be modified in many different ways. Through the use of WordPress
Themes, you can quickly change the look and style of your site. You can also extend WordPress' functionality through the use of Plugins. Plugins let you create the website or blog that suits your needs. As you can see, its functionality exceeds
or at least is similar to what is available in most blogging tools today. </div>
</li>
<li class="faq-item">
<h4 class="faq-question"> Do I need to know
<span class="faq-keyword">PHP</span> to use WordPress? </h4>
<div class="faq-answer"> No. You should be able to use WordPress through the user interface, without ever having to touch PHP. The only time you would modify your WordPress website with PHP would be when integrating some of the plugins. There are a small number of plugins
that still require manual edits to your files. In most cases, clear instructions are usually given within a text file with the plugin. </div>
</li>
</ul>
<!-- End of Faq -->
<!-- Category Info -->
<div class="category-info " id="donate">
<h3 class="category-title"> Give us a little love
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#donate">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Illo, rem temporibus natus consectetur, vero cupiditate voluptate unde quam, ipsum, ea incidunt veritatis aspernatur est sint ipsa quibusdam? Ea ratione accusamus voluptatibus, ut quasi voluptates possimus alias, nostrum.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Donate -->
<ul class="donate-money-list">
<li class="donate-money">
<a href="#">
<span class="donate-summ">5
<span class="currency">$</span>
</span>
<span class="donate-button">Donate</span>
</a>
</li>
<li class="donate-money">
<a href="#">
<span class="donate-summ">10
<span class="currency">$</span>
</span>
<span class="donate-button">Donate</span>
</a>
</li>
<li class="donate-money">
<a href="#">
<span class="donate-summ">20
<span class="currency">$</span>
</span>
<span class="donate-button">Donate</span>
</a>
</li>
<li class="donate-money">
<a href="#">
<span class="donate-summ">50
<span class="currency">$</span>
</span>
<span class="donate-button">Donate</span>
</a>
</li>
<li class="donate-money">
<a href="#">
<span class="donate-summ">50
<span class="custom-plus">+</span>
</span>
<span class="donate-button">Custom</span>
</a>
</li>
</ul>
<!-- End of Donate -->
</div>
</div>
</div>
</div>
</div>
<!-- End of One Page Content -->
</div>
<script src="js/all.js"></script>
<script src="js/custom.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
-->
</body>
</html>