977 lines
38 KiB
HTML
977 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Getting Started - Documentation | Front - Multipurpose Responsive Template</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="../favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Implementing Plugins -->
|
||
<link rel="stylesheet" href="../assets/css/vendor.min.css">
|
||
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="../assets/css/theme.min.css?v=1.0">
|
||
<link rel="stylesheet" href="../assets/css/docs.css">
|
||
</head>
|
||
|
||
<body class="navbar-sidebar-aside-lg">
|
||
<!-- ========== HEADER ========== -->
|
||
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
||
<div class="container-fluid">
|
||
<nav class="navbar-nav-wrap">
|
||
<div class="row flex-grow-1">
|
||
<!-- Default Logo -->
|
||
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<div class="col-md px-lg-0">
|
||
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
||
<div class="d-none d-md-block">
|
||
<!-- Search Form -->
|
||
<form id="docsSearch" class="position-relative"
|
||
data-hs-list-options='{
|
||
"searchMenu": true,
|
||
"keyboard": true,
|
||
"item": "searchTemplate",
|
||
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
||
"empty": "#searchNoResults"
|
||
}'>
|
||
<!-- Input Group -->
|
||
<div class="input-group input-group-merge navbar-input-group">
|
||
<div class="input-group-prepend input-group-text">
|
||
<i class="bi-search"></i>
|
||
</div>
|
||
|
||
<input type="search" class="search form-control form-control-sm" placeholder="Search in docs" aria-label="Search in docs">
|
||
|
||
<a class="input-group-append input-group-text" href="javascript:;">
|
||
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
||
</a>
|
||
</div>
|
||
<!-- End Input Group -->
|
||
|
||
<!-- List -->
|
||
<div class="list dropdown-menu navbar-dropdown-menu-borderless w-100 overflow-auto" style="max-height: 16rem;"></div>
|
||
<!-- End List -->
|
||
|
||
<!-- Empty -->
|
||
<div id="searchNoResults" style="display: none;">
|
||
<div class="text-center p-4">
|
||
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
||
<p class="mb-0">No Results</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Empty -->
|
||
</form>
|
||
<!-- End Search Form -->
|
||
|
||
<!-- List Item Template -->
|
||
<div class="d-none">
|
||
<div id="searchTemplate" class="dropdown-item">
|
||
<a class="d-block link" href="#">
|
||
<span class="category d-block fw-normal text-muted mb-1"></span>
|
||
<span class="component text-dark"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End List Item Template -->
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<ul class="navbar-nav p-0">
|
||
<li class="nav-item">
|
||
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
||
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="btn btn-primary btn-sm" href="../index.html">
|
||
<i class="bi-eye me-1"></i> Preview Demo
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Navbar -->
|
||
</div>
|
||
</div>
|
||
<!-- End Col -->
|
||
</div>
|
||
<!-- End Row -->
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
<!-- ========== END HEADER ========== -->
|
||
|
||
<!-- ========== MAIN CONTENT ========== -->
|
||
<main id="content" role="main">
|
||
<!-- Navbar -->
|
||
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
||
data-hs-nav-scroller-options='{
|
||
"type": "vertical",
|
||
"target": ".navbar-nav .active",
|
||
"offset": 80
|
||
}'>
|
||
<!-- Navbar Toggle -->
|
||
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
||
<span class="d-flex justify-content-between align-items-center">
|
||
<span class="h3 mb-0">Nav menu</span>
|
||
|
||
<span class="navbar-toggler-default">
|
||
<i class="bi-list"></i>
|
||
</span>
|
||
|
||
<span class="navbar-toggler-toggled">
|
||
<i class="bi-x"></i>
|
||
</span>
|
||
</span>
|
||
</button>
|
||
<!-- End Navbar Toggle -->
|
||
|
||
<!-- Navbar Collapse -->
|
||
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
||
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
||
<!-- Default Logo -->
|
||
<div class="d-flex align-items-center mb-3">
|
||
<a class="navbar-brand" href="../documentation/index.html" aria-label="Space">
|
||
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
||
</a>
|
||
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
||
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
||
</a>
|
||
</div>
|
||
<!-- End Default Logo -->
|
||
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment nav-fill nav-justified">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/index.html">Docs</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="../snippets/index.html">Snippets</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
|
||
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
||
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Documentation</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/index.html">Introduction</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Getting started</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../documentation/getting-started.html">Getting Started</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/gulp.html">Gulp</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/customization.html">Customization</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/credits.html">Credits</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/changelog.html">Changelog</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Design & Graphics</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/bs-icons.html">Bootstrap Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/duotone-icons.html">Duotone Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/illustrations.html">Illustrations</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<span class="nav-subtitle">Components</span>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/accordion.html">Accordion</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/alerts.html">Alerts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/avatars.html">Avatars</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/badge.html">Badge</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/breadcrumb.html">Breadcrumb</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/buttons.html">Buttons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/cards.html">Cards</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/collapse.html">Collapse</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/column-divider.html">Column Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/devices.html">Devices</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/divider.html">Divider</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropdowns.html">Dropdowns</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/icons.html">Icons</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/list-group.html">List Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/lists.html">Lists</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/legend-indicator.html">Legend Indicator</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/modal.html">Modal</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/offcanvas.html">Offcanvas</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/page-header.html">Page Header</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/pagination.html">Pagination</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/popovers.html">Popovers</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/progress.html">Progress</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/profile.html">Profile</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shapes.html">Shapes</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spinners.html">Spinners</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/steps.html">Steps</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tab.html">Tab</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tables.html">Tables</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/text-highlight.html">Text Highlight</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toasts.html">Toasts</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/tooltips.html">Tooltips</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typography.html">Typography</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Navbars</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navbar.html">Navbar</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/navs.html">Navs</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/mega-menu.html">Mega Menu</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/scrollspy.html">Scrollspy</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Basic forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/basic-forms.html">Basic Forms</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/checks-and-switches.html">Checks & Switches</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-group.html">Input Group</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Advanced Forms</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/select.html">Advanced Select</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/file-attachments.html">File Attachments</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/dropzone.html">Drag’ n’ Drop File Uploads</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quill.html">WYSIWYG Editor</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/quantity-counter.html">Quantity Counter</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/input-mask.html">Input Mask</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/step-forms.html">Step Forms (Wizards)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/range-slider.html">Range Slider (noUiSlider)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/add-field.html">Add Field</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-password.html">Toggle Password</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/count-characters.html">Count Characters</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-switch.html">Toggle Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/toggle-state.html">Toggle State</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/switch.html">Switch</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Media</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/fslightbox.html">Fullscreen Lightbox</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/video-bg.html">Video Background</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/video-player.html">Video Player</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/swiper.html">Swiper</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle">Others</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/maps-leaflet.html">Maps (Leaflet)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/chartjs.html">Chart.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/circles.html">Circles.js (Pie Chart)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sticky-block.html">Sticky Block</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/countdown.html">Countdown</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sorting.html">Sorting (Shuffle.js)</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/go-to.html">Go To</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/show-animation.html">Show Animation</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/typedjs.html">Typed.js</a>
|
||
</li>
|
||
|
||
<li class="nav-item my-2 my-lg-5"></li>
|
||
|
||
<li class="nav-item">
|
||
<small class="nav-subtitle d-block">Utilities</small>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/backgrounds.html">Backgrounds</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/borders.html">Borders</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/colors.html">Colors</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/links.html">Links</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/position.html">Position</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/rotations.html">Rotations</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/shadows.html">Shadows</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/sizing.html">Sizing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/spacing.html">Spacing</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="../documentation/z-index.html">Z-index</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Navbar Collapse -->
|
||
</nav>
|
||
<!-- End Navbar -->
|
||
|
||
<!-- Content -->
|
||
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
||
<!-- Page Header -->
|
||
<div class="docs-page-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-sm">
|
||
<h1 class="docs-page-header-title">Getting Started</h1>
|
||
<p class="docs-page-header-text">Front - Multipurpose Template + UI KIT for building responsive, mobile-first sites, with Bootstrap Framework.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark" role="alert">
|
||
<div class="d-sm-flex">
|
||
<div class="flex-shrink-0">
|
||
<img class="avatar avatar-xl mb-2 mb-sm-0" src="../assets/svg/illustrations/oc-megaphone.svg" alt="Image Description">
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-sm-4">
|
||
<h3>Front is a Static HTML Template</h3>
|
||
For the time being, we do <span class="fw-semi-bold">NOT</span> offer any tutorials or any other materials on how to integrate Front with any CMS, Web Application Frameworks (including Angular, Vue, React, etc.) or any other similar technology. However, since <span class="fw-semi-bold">Front is a static HTML/CSS and JS template</span>, then it <em>should be compatible</em> with any backend technology and frameworks.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark" role="alert">
|
||
<div class="d-flex align-items-baseline">
|
||
<div class="flex-shrink-0">
|
||
<i class="bi-info-circle me-1"></i>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-2">We highly recommend to check out <a class="link" href="https://themes.getbootstrap.com/guide/" target="_blank">The Guide <i class="bi-box-arrow-up-right"></i></a> an official Bootstrap Theme guidelines by Bootstrap core team.</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="file-structure" class="hs-docs-heading">
|
||
File Structure <a class="anchorjs-link" href="#file-structure" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<details open>
|
||
<summary>
|
||
<i class="bi-folder text-body me-1"></i> <strong>Front</strong>
|
||
</summary>
|
||
|
||
<ul class="list-py-1 list-unstyled ps-4">
|
||
<li>
|
||
<details open>
|
||
<summary>
|
||
<i class="bi-folder text-body me-1"></i> <strong>src</strong>
|
||
</summary>
|
||
<ul class="list-unstyled ps-4">
|
||
<li>
|
||
<details open>
|
||
<summary>
|
||
<i class="bi-folder text-body me-1"></i> <strong>assets</strong>
|
||
</summary>
|
||
<ul>
|
||
<li><i class="bi-folder text-body me-1"></i>
|
||
<strong>css</strong> - <span class="text-body">Compiled CSS files</span>
|
||
</li>
|
||
<li><i class="bi-folder text-body me-1"></i>
|
||
<strong>img</strong> - <span class="text-body">Image files</span>
|
||
</li>
|
||
<li><i class="bi-folder text-body me-1"></i>
|
||
<strong>json</strong> - <span class="text-body">JSON files</span>
|
||
</li>
|
||
<li><i class="bi-folder text-body me-1"></i>
|
||
<strong>js</strong> - <span class="text-body">Core Javascript and library wrapper files</span>
|
||
</li>
|
||
<li><i class="bi-folder text-body me-1"></i>
|
||
<strong>scss</strong> - <span class="text-body">SASS (SCSS) source files</span>
|
||
</li>
|
||
<li><i class="bi-folder text-body me-1"></i>
|
||
<strong>svg</strong> - <span class="text-body">SVG files</span>
|
||
</li>
|
||
<li><i class="bi-folder text-body me-1"></i>
|
||
<strong>svg-src</strong> - <span class="text-body">SVG source files where variables can be passed (files will be generated into <strong>svg</strong> folder)</span>
|
||
</li>
|
||
<li><i class="bi-folder text-body me-1"></i>
|
||
<strong>vendor</strong> - <span class="text-body">Third pary libraries (plugins)</span>
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="bi-folder text-body me-1"></i> <strong>partials</strong> - <span class="text-body">HTML partials, learn more details on Front's <a class="link" href="../documentation/gulp.html#gulp-file-include">Gulp Documentation</a> page</span>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="bi-folder text-body me-1"></i> <strong>snippets</strong> - <span class="text-body">Snippet pages</span>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="bi-folder text-body me-1"></i> <strong>documentation</strong> - <span class="text-body">Documentation pages</span>
|
||
</li>
|
||
|
||
<li><i class="bi-image me-1"></i> favicon.ico</li>
|
||
<li><i class="bi-file-text me-1"></i> index.html</li>
|
||
<li><i class="bi-file-text me-1"></i> ...</li>
|
||
</ul>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="bi-folder text-body me-1"></i> <strong>dist</strong> - <span class="text-body">Generated distribution files</span>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="bi-folder text-body me-1"></i> <strong>gulpfiles</strong> - <span class="text-body">Gulp Toolkit files</span>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="bi-folder text-body me-1"></i> <strong><s>build</s></strong> - <span class="text-body">Generated performance ready fully production files (by default the folder is not included)</span>
|
||
</li>
|
||
|
||
<li>
|
||
<i class="bi-folder text-body me-1"></i> <strong><s>node_modules</s></strong> - <span class="text-body">NPM dependencies (by default the folder is not included)</span>
|
||
</li>
|
||
|
||
<li><i class="bi-file-text me-1"></i> config.js</li>
|
||
<li><i class="bi-file-text me-1"></i> gulpfile.js</li>
|
||
<li><i class="bi-file-text me-1"></i> package-lock.json</li>
|
||
<li><i class="bi-file-text me-1"></i> package.json</li>
|
||
<li><i class="bi-file-text me-1"></i> README.md</li>
|
||
</ul>
|
||
</details>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="starter-template" class="hs-docs-heading">
|
||
Starter template <a class="anchorjs-link" href="#starter-template" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Starter template is a snippet code for blank HTML page. Use the below snippet as a way to quickly start any new blank page. If you are using Front's Gulp Toolkit, you may use HTML (Gulp) snippet code (read more about it on <a class="link" href="../documentation/gulp.html">Gulp</a> page).</p>
|
||
|
||
<!-- Card -->
|
||
<div class="card">
|
||
<!-- Header -->
|
||
<div class="card-header">
|
||
<!-- Nav -->
|
||
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="true">HTML</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="nav-gulpTab1" href="#nav-gulp1" data-bs-toggle="pill" data-bs-target="#nav-gulp1" role="tab" aria-controls="nav-gulp1" aria-selected="false">HTML (Gulp)</a>
|
||
</li>
|
||
</ul>
|
||
<!-- End Nav -->
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content" id="navTabContent1">
|
||
<div class="tab-pane fade show active" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
||
<pre>
|
||
<code class="language-html" data-lang="html">
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Hello, world!</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="./favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS Front Template -->
|
||
<link rel="stylesheet" href="./assets/css/theme.css">
|
||
</head>
|
||
|
||
<body>
|
||
<h1>Hello, world!</h1>
|
||
|
||
<!-- JS Global Compulsory -->
|
||
<script src="./assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="./assets/js/hs.core.js"></script>
|
||
</body>
|
||
</html>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="nav-gulp1" role="tabpanel" aria-labelledby="nav-gulpTab1">
|
||
<pre>
|
||
<code class="language-html" data-lang="html">
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required Meta Tags Always Come First -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<!-- Title -->
|
||
<title>Hello, world!</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
||
|
||
<!-- Font -->
|
||
<link href="@@vars.themeFont" rel="stylesheet">
|
||
|
||
<!-- CSS Front Template -->
|
||
<!-- bundlecss:theme [@@autopath] -->
|
||
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
||
</head>
|
||
|
||
<body>
|
||
<h1>Hello, world!</h1>
|
||
|
||
<script src="@@autopath/assets/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<!-- bundlejs:vendor [@@autopath] -->
|
||
|
||
<!-- JS Front -->
|
||
<!-- bundlejs:theme [@@autopath] -->
|
||
<script src="@@autopath/assets/js/hs.core.js"></script>
|
||
</body>
|
||
</html>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
<!-- End Tab Content -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="js-structure" class="hs-docs-heading">
|
||
JavaScript structure <a class="anchorjs-link" href="#js-structure" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<!-- Heading -->
|
||
<h3 id="core-js" class="hs-docs-heading mt-2">
|
||
Core JavaScript <a class="anchorjs-link" href="#core-js" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h3>
|
||
<!-- End Heading -->
|
||
|
||
<p>The foundation of the JavaScript structure in Front is based on one main object which does not change the root when the new functionalities are added, but instead, it only extends without affecting the behavior of the core object. The name of the object is <code>HSCore</code> and the content of this object looks like this:</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-js" data-lang="js">
|
||
/*
|
||
* HSCore
|
||
* @version: 2.0.0 (01 Apr 2021)
|
||
* @author: HtmlStream
|
||
* @event-namespace: .HSCore
|
||
* @license: Htmlstream Libraries (https://htmlstream.com/licenses)
|
||
* Copyright 2021 Htmlstream
|
||
*/
|
||
'use strict';
|
||
|
||
const HSCore = {
|
||
init: () => {
|
||
// Botostrap Tootltips
|
||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||
})
|
||
|
||
// Bootstrap Popovers
|
||
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||
return new bootstrap.Popover(popoverTriggerEl)
|
||
})
|
||
}
|
||
}
|
||
|
||
HSCore.init()
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Heading -->
|
||
<h3 id="essentials-of-hscore-objects" class="hs-docs-heading">
|
||
Essentials of HS data-attributes <a class="anchorjs-link" href="#essentials-of-hscore-objects" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h3>
|
||
<!-- End Heading -->
|
||
|
||
<p><code>data-hs-*-options</code> - Using the date-attribute, you can completely specify the settings for all plug-in parameters (except for functions) that are in the official documentation. Special cases will be described in the documentation of the corresponding wrappers/plugins. <code>*-</code> name of the wrapper/plugin.</p>
|
||
|
||
<p>Parameter names must be enclosed in double quotation marks <code>""</code>. <code>"param": ...</code></p>
|
||
|
||
<p>
|
||
For strings, quotation marks are required.
|
||
<code>"stringParam": "Test string",</code>
|
||
<code>"hexParam": "#ff0000"</code>
|
||
</p>
|
||
|
||
<p>For numbers, quotation marks are optional. <code>"intParam": 10</code></p>
|
||
|
||
<p>For boolean values, quotation marks can lead to not obvious consequences (due to implicit type conversion). It is recommended that you specify Boolean values without quotation marks. <code>"boolParam": true</code></p>
|
||
|
||
<p>For arrays and objects - quotation marks can lead to errors, this does not apply to elements of arrays and objects, which can be simple types (see the description for simple types above).</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-html" data-lang="html">
|
||
"arrayParam": [1, "Test string", "#ff0000", false, 5],
|
||
"objectParam": {
|
||
"intParam": 1,
|
||
"stringParam": "Test string",
|
||
"hexParam": "#ff0000",
|
||
"boolParam": false,
|
||
"intParam2": 5
|
||
}
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Heading -->
|
||
<h3 id="advantages" class="hs-docs-heading">
|
||
Advantages <a class="anchorjs-link" href="#advantages" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h3>
|
||
<!-- End Heading -->
|
||
|
||
<ul class="list-py-1">
|
||
<li>Avoiding the probabilities of conflicts between Space codes and third party plugins (libraries).</li>
|
||
<li>Intuitive clear architecture.</li>
|
||
<li>Everything is structured, each component in its own file and in its component in the main object.</li>
|
||
<li>The ability of extending functionality without affecting the behavior of the core object and not changing the existing functionality.</li>
|
||
<li>Creation of wrapper components simply solves complicated initializations structures for the users.</li>
|
||
<li>Very easy access to any starters components and core settings from anywhere in the template.</li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Content -->
|
||
</main>
|
||
<!-- ========== END MAIN CONTENT ========== -->
|
||
|
||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||
<!-- Go To -->
|
||
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
||
data-hs-go-to-options='{
|
||
"offsetTop": 700,
|
||
"position": {
|
||
"init": {
|
||
"right": "2rem"
|
||
},
|
||
"show": {
|
||
"bottom": "2rem"
|
||
},
|
||
"hide": {
|
||
"bottom": "-2rem"
|
||
}
|
||
}
|
||
}'>
|
||
<i class="bi-chevron-up"></i>
|
||
</a>
|
||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||
|
||
|
||
<!-- JS Implementing Plugins -->
|
||
<script src="../assets/js/vendor.min.js"></script>
|
||
|
||
<!-- JS Front -->
|
||
<script src="../assets/js/theme.min.js"></script>
|
||
|
||
<!-- JS Plugins Init. -->
|
||
<script>
|
||
(function() {
|
||
// INITIALIZATION OF HEADER
|
||
// =======================================================
|
||
new HSHeader('#header').init()
|
||
|
||
|
||
// INITIALIZATION OF LISTJS COMPONENT
|
||
// =======================================================
|
||
const docsSearch = HSCore.components.HSList.init('#docsSearch')
|
||
|
||
|
||
// GET JSON FILE RESULTS
|
||
// =======================================================
|
||
fetch('../assets/json/docs-search.json')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
docsSearch.getItem(0).add(data)
|
||
})
|
||
|
||
// INITIALIZATION OF GO TO
|
||
// =======================================================
|
||
new HSGoTo('.js-go-to')
|
||
})()
|
||
</script>
|
||
</body>
|
||
</html>
|