Files
nibiru-framework.com/application/view/mockup/template/views-left-full.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

1164 lines
40 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 ">
<!-- Header -->
<div class="header header-over large">
<div class="container-fluid container-spaced">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<!-- 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 class="col-md-9 col-sm-6 col-xs-6">
<!-- 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>
</div>
<!-- End of Header -->
<!-- Header Back -->
<div class="header-back header-back-simple header-back-small">
<div class="header-back-container">
<div class="container-fluid container-spaced">
<div class="row">
<div class="col-md-9">
<!-- Page Info -->
<div class="page-info page-info-simple">
<h1 class="page-title">Views</h1>
<h2 class="page-description">Choose the layout that suits the type of content youre displaying. A list style layout is for the seated because users&#39; actions tend to be very singular in purpose. On the other hand, grid view is for the standing. It&#39;s for the restless
and curious.</h2>
</div>
<!-- End Page Info -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Header Back -->
<div id="content">
<div class="container-fluid container-spaced">
<div class="layout with-left-sidebar js-layout">
<div class="row">
<div class="col-md-3 hidden-sm hidden-xs">
<div class="sidebar js-sidebar-fixed">
<!-- Vertical Menu -->
<nav class="menu-vertical-wrapper">
<ul class="menu-vertical js-menu-vertical" data-prepend-to=".js-layout" data-select="Menu">
<li>
<a href="#">Tutorials</a>
<ul>
<li>
<a href="#">Instalation</a>
<ul>
<li>
<a href="views.html">Manually</a>
</li>
<li>
<a href="views.html">Wizard</a>
</li>
<li>
<a href="views.html">Softaculous</a>
</li>
<li>
<a href="views.html">Fantastico</a>
</li>
<li>
<a href="views.html">Transfer</a>
</li>
</ul>
</li>
<li>
<a href="#">Create</a>
<ul>
<li>
<a href="views.html">Multimedia</a>
</li>
<li>
<a href="views.html">Post</a>
</li>
<li>
<a href="views.html">Categories</a>
</li>
<li>
<a href="views.html">Comments</a>
</li>
<li>
<a href="views.html">Themes</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Plugins</a>
<ul>
<li>
<a href="#">Instalation</a>
<ul>
<li>
<a href="views.html">Manually</a>
</li>
<li>
<a href="views.html">Wizard</a>
</li>
<li>
<a href="views.html">Softaculous</a>
</li>
<li>
<a href="views.html">Fantastico</a>
</li>
<li>
<a href="views.html">Transfer</a>
</li>
</ul>
</li>
<li>
<a href="#">Create</a>
<ul>
<li>
<a href="views.html">Multimedia</a>
</li>
<li>
<a href="views.html">Post</a>
</li>
<li>
<a href="views.html">Categories</a>
</li>
<li>
<a href="views.html">Comments</a>
</li>
<li>
<a href="views.html">Themes</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Partners</a>
<ul>
<li>
<a href="#">Instalation</a>
<ul>
<li>
<a href="views.html">Manually</a>
</li>
<li>
<a href="views.html">Wizard</a>
</li>
<li>
<a href="views.html">Softaculous</a>
</li>
<li>
<a href="views.html">Fantastico</a>
</li>
<li>
<a href="views.html">Transfer</a>
</li>
</ul>
</li>
<li>
<a href="#">Create</a>
<ul>
<li>
<a href="views.html">Multimedia</a>
</li>
<li>
<a href="views.html">Post</a>
</li>
<li>
<a href="views.html">Categories</a>
</li>
<li>
<a href="views.html">Comments</a>
</li>
<li>
<a href="views.html">Themes</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Affiliates</a>
<ul>
<li>
<a href="#">Instalation</a>
<ul>
<li>
<a href="views.html">Manually</a>
</li>
<li>
<a href="views.html">Wizard</a>
</li>
<li>
<a href="views.html">Softaculous</a>
</li>
<li>
<a href="views.html">Fantastico</a>
</li>
<li>
<a href="views.html">Transfer</a>
</li>
</ul>
</li>
<li>
<a href="#">Create</a>
<ul>
<li>
<a href="views.html">Multimedia</a>
</li>
<li>
<a href="views.html">Post</a>
</li>
<li>
<a href="views.html">Categories</a>
</li>
<li>
<a href="views.html">Comments</a>
</li>
<li>
<a href="views.html">Themes</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Events</a>
<ul>
<li>
<a href="#">Instalation</a>
<ul>
<li>
<a href="views.html">Manually</a>
</li>
<li>
<a href="views.html">Wizard</a>
</li>
<li>
<a href="views.html">Softaculous</a>
</li>
<li>
<a href="views.html">Fantastico</a>
</li>
<li>
<a href="views.html">Transfer</a>
</li>
</ul>
</li>
<li>
<a href="#">Create</a>
<ul>
<li>
<a href="views.html">Multimedia</a>
</li>
<li>
<a href="views.html">Post</a>
</li>
<li>
<a href="views.html">Categories</a>
</li>
<li>
<a href="views.html">Comments</a>
</li>
<li>
<a href="views.html">Themes</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
<ul>
<li>
<a href="#">Instalation</a>
<ul>
<li>
<a href="views.html">Manually</a>
</li>
<li>
<a href="views.html">Wizard</a>
</li>
<li>
<a href="views.html">Softaculous</a>
</li>
<li>
<a href="views.html">Fantastico</a>
</li>
<li>
<a href="views.html">Transfer</a>
</li>
</ul>
</li>
<li>
<a href="#">Create</a>
<ul>
<li>
<a href="views.html">Multimedia</a>
</li>
<li>
<a href="views.html">Post</a>
</li>
<li>
<a href="views.html">Categories</a>
</li>
<li>
<a href="views.html">Comments</a>
</li>
<li>
<a href="views.html">Themes</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Faq</a>
<ul>
<li>
<a href="#">Instalation</a>
<ul>
<li>
<a href="views.html">Manually</a>
</li>
<li>
<a href="views.html">Wizard</a>
</li>
<li>
<a href="views.html">Softaculous</a>
</li>
<li>
<a href="views.html">Fantastico</a>
</li>
<li>
<a href="views.html">Transfer</a>
</li>
</ul>
</li>
<li>
<a href="#">Create</a>
<ul>
<li>
<a href="views.html">Multimedia</a>
</li>
<li>
<a href="views.html">Post</a>
</li>
<li>
<a href="views.html">Categories</a>
</li>
<li>
<a href="views.html">Comments</a>
</li>
<li>
<a href="views.html">Themes</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="widget">
<!-- Search -->
<div class="search">
<form action="#">
<input type="text" class="search-input form-control" placeholder="search">
<i class="fa fa-search search-icon"></i>
</form>
</div>
<!-- End of Search -->
</div>
<div class="widget">
<h3 class="widget-title">Recommended products</h3>
<!-- Recommended products -->
<ul class="widget-recommended-products">
<!-- Recommended product Item -->
<li class="widget-recommended-product">
<img src="http://placehold.it/67x67" class="widget-recommended-product-img" alt="Recommended products">
<a href="#" class="widget-recommended-product-link">
<h5 class="widget-recommended-product-link-title"> VSResume
<i class="fa fa-angle-right"></i>
</h5>
<p class="widget-recommended-product-link-description">Online CV / Resume Template</p>
</a>
</li>
<!-- End of Recommended product Item -->
<!-- Recommended product Item -->
<li class="widget-recommended-product">
<img src="http://placehold.it/67x67" class="widget-recommended-product-img" alt="Recommended products">
<a href="#" class="widget-recommended-product-link">
<h5 class="widget-recommended-product-link-title"> VSDocs
<i class="fa fa-angle-right"></i>
</h5>
<p class="widget-recommended-product-link-description">Online Documentation Template</p>
</a>
</li>
<!-- End of Recommended product Item -->
<!-- Recommended product Item -->
<li class="widget-recommended-product">
<img src="http://placehold.it/67x67" class="widget-recommended-product-img" alt="Recommended products">
<a href="#" class="widget-recommended-product-link">
<h5 class="widget-recommended-product-link-title"> Triablo
<i class="fa fa-angle-right"></i>
</h5>
<p class="widget-recommended-product-link-description">eCommerce Landing Page</p>
</a>
</li>
<!-- End of Recommended product Item -->
</ul>
<!-- End of Recommended products -->
<!-- Recommended products -->
<ul class="widget-recommended-products">
<!-- Recommended product Item -->
<li class="widget-recommended-product">
<img src="http://placehold.it/67x67" class="widget-recommended-product-img" alt="Recommended products">
<a href="#" class="widget-recommended-product-link">
<h5 class="widget-recommended-product-link-title"> Paradise Cakes
<i class="fa fa-angle-right"></i>
</h5>
<p class="widget-recommended-product-link-description">eCommerce Landing Page</p>
</a>
</li>
<!-- End of Recommended product Item -->
<!-- Recommended product Item -->
<li class="widget-recommended-product">
<img src="http://placehold.it/67x67" class="widget-recommended-product-img" alt="Recommended products">
<a href="#" class="widget-recommended-product-link">
<h5 class="widget-recommended-product-link-title"> EatLand
<i class="fa fa-angle-right"></i>
</h5>
<p class="widget-recommended-product-link-description">eCommerce Landing Page</p>
</a>
</li>
<!-- End of Recommended product Item -->
<!-- Recommended product Item -->
<li class="widget-recommended-product">
<img src="http://placehold.it/67x67" class="widget-recommended-product-img" alt="Recommended products">
<a href="#" class="widget-recommended-product-link">
<h5 class="widget-recommended-product-link-title"> VSBuilder
<i class="fa fa-angle-right"></i>
</h5>
<p class="widget-recommended-product-link-description">Pure HTML and CSS Page Builder</p>
</a>
</li>
<!-- End of Recommended product Item -->
</ul>
<!-- End of Recommended products -->
</div>
<div class="widget">
<h3 class="widget-title">Tags</h3>
<!-- Tags -->
<ul class="tags">
<li class="tag-item">
<a href="#">html</a>
</li>
<li class="tag-item">
<a href="#">css</a>
</li>
<li class="tag-item">
<a href="#">javascript</a>
</li>
<li class="tag-item">
<a href="#">jquery</a>
</li>
<li class="tag-item">
<a href="#">less</a>
</li>
<li class="tag-item">
<a href="#">sass</a>
</li>
<li class="tag-item">
<a href="#">haml</a>
</li>
<li class="tag-item">
<a href="#">gulp</a>
</li>
</ul>
<!-- End of Tags -->
</div>
</div>
</div>
<div class="col-md-9">
<div class="main-content">
<!-- Category Info -->
<div class="category-info helper pt0" id="list-view">
<h3 class="category-title"> List view
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#list-view">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">A list style layout is for the seated because users' actions tend to be very singular in purpose. They've come to your site to do one thing: browse or read. Present them with content in a standard way and let them just get lost in it.</h4>
</div>
<!-- End of Caregory Info -->
<!-- List View -->
<div class="list-view ">
<div class="list-item">
<div class="list-item-header">
<h3 class="list-item-title">
<a href="#">Getting Started with WordPress</a>
</h3>
<span class="list-item-meta">
<a href="#">how to</a>
</span>
</div>
<div class="list-item-content"> WordPress is a great product. It&#39;s easy-to-use, quite powerful, and flexible. Creating a website, and maintaining a website, is a science and art that has quickly evolved. </div>
</div>
<div class="list-item">
<div class="list-item-header">
<h3 class="list-item-title">
<a href="#">New To WordPress - Where to Start</a>
</h3>
<span class="list-item-meta">
<a href="#">working with</a>
</span>
</div>
<div class="list-item-content"> In order to fully appreciate this it is important to be well read on the subject. One major thing to keep in mind is your investment of time. </div>
</div>
<div class="list-item">
<div class="list-item-header">
<h3 class="list-item-title">
<a href="#">WordPress in Your Language</a>
</h3>
<span class="list-item-meta">
<a href="#">plugin</a>
</span>
</div>
<div class="list-item-content"> It is important to make a plan about how you want to use WordPress on your site. </div>
</div>
<div class="list-item">
<div class="list-item-header">
<h3 class="list-item-title">
<a href="#">WordPress Lessons</a>
</h3>
<span class="list-item-meta">
<a href="#">contribute</a>
</span>
</div>
<div class="list-item-content"> Have you made a list of your site categories to organize your content by groups? </div>
</div>
<div class="list-item">
<div class="list-item-header">
<h3 class="list-item-title">
<a href="#">Upgrading WordPress</a>
</h3>
<span class="list-item-meta">
<a href="#">give back</a>
</span>
</div>
<div class="list-item-content"> With your installation complete, it&#39;s time to set up WordPress so it will work the way you want it to work. </div>
</div>
<div class="list-item">
<div class="list-item-header">
<h3 class="list-item-title">
<a href="#">WordPress.tv</a>
</h3>
<span class="list-item-meta">
<a href="#">about</a>
</span>
</div>
<div class="list-item-content"> After you&#39;ve published a few posts, you can experiment with the full edit or quick edit features in the Administration &gt; Posts &gt; Posts panel. </div>
</div>
<div class="list-item">
<div class="list-item-header">
<h3 class="list-item-title">
<a href="#">Frequently Asked Questions</a>
</h3>
<span class="list-item-meta">
<a href="#">faq</a>
</span>
</div>
<div class="list-item-content"> Now that you&#39;re a full fledged WordPress user, consider contributing to the WordPress Codex, Support Forum, Development, and other volunteer efforts that keep WordPress going. </div>
</div>
</div>
<!-- End of List View -->
<!-- Category Info -->
<div class="category-info " id="grid-view">
<h3 class="category-title"> Grid view
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#grid-view">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">On the other hand, grid view is for the standing. It's for the restless and curious. Your attention goes from one topic or image to the next and you never want to linger in one spot for too long.</h4>
</div>
<!-- End of Caregory Info -->
<!-- Grid view -->
<div class="grid-view js-grid-view">
<div class="row">
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">ADD</a>
<span class="grid-view-title-descr">traversing</span>
</h3>
<p class="grid-view-elem-description"> Create a new jQuery object with elements added to the set of matched elements. </p>
</div>
</div>
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">AFTER</a>
<span class="grid-view-title-descr">manipulation</span>
</h3>
<p class="grid-view-elem-description"> Insert content, specified by the parameter, after each element in the set of matched elements. </p>
</div>
</div>
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">AJAXCOMPLETE</a>
<span class="grid-view-title-descr">ajax</span>
</h3>
<p class="grid-view-elem-description"> Register a handler to be called when Ajax requests complete. This is an AjaxEvent. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">APPEND</a>
<span class="grid-view-title-descr">manipulation</span>
</h3>
<p class="grid-view-elem-description"> Insert content, specified by the parameter, to the end of each element in the set of matched elements. </p>
</div>
</div>
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">ATTR</a>
<span class="grid-view-title-descr">attributes</span>
</h3>
<p class="grid-view-elem-description"> Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element. </p>
</div>
</div>
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">BEFORE</a>
<span class="grid-view-title-descr">manipulation</span>
</h3>
<p class="grid-view-elem-description"> Insert content, specified by the parameter, before each element in the set of matched elements. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">CHILDREN</a>
<span class="grid-view-title-descr">traversing</span>
</h3>
<p class="grid-view-elem-description"> Get the children of each element in the set of matched elements, optionally filtered by a selector. </p>
</div>
</div>
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">CLICK</a>
<span class="grid-view-title-descr">events</span>
</h3>
<p class="grid-view-elem-description"> Bind an event handler to the “click” JavaScript event, or trigger that event on an element. </p>
</div>
</div>
<div class="col-md-4">
<div class="grid-view-elem js-grid-view-elem">
<h3 class="grid-view-elem-title">
<a href="#">CLONE</a>
<span class="grid-view-title-descr">manipulation</span>
</h3>
<p class="grid-view-elem-description"> Create a deep copy of the set of matched elements. </p>
</div>
</div>
</div>
</div>
<!-- End of Grid view -->
<!-- Category Info -->
<div class="category-info " id="mixed-view">
<h3 class="category-title"> Mixed view
<!-- Fragment Identifier -->
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#mixed-view">
<i class="fa fa-link"></i>
</a>
<!-- End of Fragment Identifier -->
</h3>
<h4 class="category-description">Choose the layout that suits the type of content youre displaying. A list style layout is for the seated because users' actions tend to be very singular in purpose. On the other hand, grid view is for the standing. It's for the restless and
curious.</h4>
</div>
<!-- End of Caregory Info -->
<div class="row">
<div class="col-md-4">
<!-- Category List -->
<div class="category-list">
<h3 class="category-list-title">Learn how to use WordPress</h3>
<ul class="category-list-content">
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Getting Started with WordPress</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">New To WordPress - Where to Start</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">WordPress in Your Language</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">WordPress Lessons</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Upgrading WordPress</a>
</li>
</ul>
</div>
<!-- End of Category List -->
</div>
<div class="col-md-4">
<!-- Category List -->
<div class="category-list">
<h3 class="category-list-title">Working with themes</h3>
<ul class="category-list-content">
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Creating and Using Posts</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Creating and Using Pages</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Using Plugins</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Using Themes</a>
</li>
</ul>
</div>
<!-- End of Category List -->
</div>
<div class="col-md-4">
<!-- Category List -->
<div class="category-list">
<h3 class="category-list-title">Writing a plugin</h3>
<ul class="category-list-content">
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Contributing to WordPress</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Developer Documentation</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Reporting Bugs</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">WordPress Development Blog</a>
</li>
</ul>
</div>
<!-- End of Category List -->
</div>
</div>
<div class="row">
<div class="col-md-4">
<!-- Category List -->
<div class="category-list">
<h3 class="category-list-title">Contribute to Development</h3>
<ul class="category-list-content">
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Contributing to WordPress</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Developer Documentation</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Reporting Bugs</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">WordPress Development Blog</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">WordPress Security</a>
</li>
</ul>
</div>
<!-- End of Category List -->
</div>
<div class="col-md-4">
<!-- Category List -->
<div class="category-list">
<h3 class="category-list-title">Give Back</h3>
<ul class="category-list-content">
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Volunteers Needed for Codex Documentation</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">WordPress Documentation Team</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Become a WordPress Support Forum Volunteer</a>
</li>
</ul>
</div>
<!-- End of Category List -->
</div>
<div class="col-md-4">
<!-- Category List -->
<div class="category-list">
<h3 class="category-list-title">About WordPress</h3>
<ul class="category-list-content">
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Using Themes</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Using Permalinks</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">WordPress Semantics</a>
</li>
<li class="category-list-content-item">
<a href="#" class="category-list-content-item-text">Finding More WordPress Help</a>
</li>
</ul>
</div>
<!-- End of Category List -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="js-footer-is-fixed">
<!-- Footer Default -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="footer-logo-wrapper">
<!-- Logo Image -->
<a href="index.html" class="logo-image ">
<img src="img/logos/logo.png" alt="logo">
</a>
<!-- End of Logo Image -->
<!-- Slogan -->
<p class="slogan"> Learn.
<br>Create.
<br>Impress. </p>
<!-- End of Slogan -->
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="footer-wrapper">
<!-- Scroll top -->
<span class="scroll-top js-scroll-top">
<i class="fa fa-angle-up"></i>
</span>
<!-- End of Scroll top -->
<!-- Version -->
<div class="docs-version js-docs-version">
<span class="docs-current-version js-docs-current-version">v3.5</span>
<ul class="js-docs-version-list">
<li>
<a href="#">1.0</a>
</li>
<li>
<a href="#">1.5</a>
</li>
<li>
<a href="#">2.5</a>
</li>
<li>
<a href="#">3.0</a>
</li>
<li>
<a href="#">3.1</a>
</li>
</ul>
</div>
<!-- End of Version -->
<!-- Footer Menu -->
<ul class="footer-menu helper right">
<li>
<a href="#"> About us </a>
</li>
<li>
<a href="#"> Privacy Policy </a>
</li>
<li>
<a href="#"> Terms & Condotions </a>
</li>
<li>
<a href="#"> My account </a>
</li>
<li>
<a href="#"> Support service </a>
</li>
</ul>
<!-- End of Footer Menu -->
<!-- Copyright -->
<p class="copyright helper right">
<a href="http://vsart.me">VSArt</a>, all rights reserved. 2016 &copy; </p>
<!-- End of Copyright -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Footer Default -->
</footer>
<!-- End of Footer -->
</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>