972 lines
37 KiB
HTML
972 lines
37 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>Customization - 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 " 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 active" 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">Customization</h1>
|
||
<p class="docs-page-header-text">Take advantage of the Front's past, current and future updates, by learning how to create your own content without changing the core styles of Front.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Page Header -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="how-to-include-a-typeface" class="hs-docs-heading">
|
||
How to include a typeface? <a class="anchorjs-link" href="#how-to-include-a-typeface" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Add or change Front typography with the following instructions.</p>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="with-sass" class="hs-docs-heading">
|
||
With SASS <a class="anchorjs-link" href="#with-sass" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<ol>
|
||
<li>
|
||
<p>Use the <code>$font-family-base</code> attribute as our typographic base applied to the <code><body></code> in <code>_user-variables.scss</code> file to change the current font family variable with yours.</p>
|
||
|
||
<pre class="rounded mb-4">
|
||
<code class="language-scss" data-lang="scss">
|
||
$font-family-base: "Inter", sans-serif !default;
|
||
</code>
|
||
</pre>
|
||
</li>
|
||
<li>
|
||
<p>Add your font stylesheet into the <code><head></code> before all other stylesheets. Like:</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-html" data-lang="html">
|
||
<!-- CSS Global Compulsory -->
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
|
||
</code>
|
||
</pre>
|
||
</li>
|
||
</ol>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="with-css" class="hs-docs-heading">
|
||
With css <a class="anchorjs-link" href="#with-css" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<ol>
|
||
<li>
|
||
<p>Simply replace the font family <code>font-family</code> from <code><body></code> in <code>theme.css</code> tag with yours.</p>
|
||
|
||
<pre class="rounded mb-4">
|
||
<code class="language-css" data-lang="css">
|
||
body {
|
||
font-family: "Inter", sans-serif;
|
||
}
|
||
</code>
|
||
</pre>
|
||
</li>
|
||
<li>
|
||
<p>Add your font stylesheet into the <code><head></code> before all other stylesheets. Like:</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-html" data-lang="html">
|
||
<!-- CSS Global Compulsory -->
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
|
||
</code>
|
||
</pre>
|
||
</li>
|
||
</ol>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="sass" class="hs-docs-heading">
|
||
SASS <a class="anchorjs-link" href="#sass" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Utilize our source SASS files to take advantage of variables, mixins, and more.</p>
|
||
<p>Whenever possible, avoid modifying Front's core files. For SASS, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it.</p>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="customizing-sass" class="hs-docs-heading">
|
||
Customizing SASS <a class="anchorjs-link" href="#customizing-sass" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with these 2 files <code>src/assets/scss/</code>:</p>
|
||
|
||
<ul>
|
||
<li><code>_user-variables.scss</code> - Variables file for customizing or overriding Bootstrap core and Front elements/components that have been tied to variables.</li>
|
||
<li><code>_user.scss</code> - Create a new style in here.</li>
|
||
</ul>
|
||
|
||
<!-- Alert -->
|
||
<div class="alert alert-soft-dark mt-3" role="alert">
|
||
<span class="fw-semi-bold">Heads up!</span> Custom files along with Bootstrap core CSS files will be generated into the <code>theme.css</code> file.
|
||
</div>
|
||
<!-- End Alert -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="variable-defaults" class="hs-docs-heading">
|
||
Variable defaults <a class="anchorjs-link" href="#variable-defaults" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Every SASS variable in Front includes the <code>!default</code> flag allowing you to override the variable's default value in your own SASS without modifying either Bootstrap or Front's source code. Copy and paste variables as needed, modify their values, and remove the <code>!default</code> flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Front.</p>
|
||
|
||
<p>You will find the complete list of Front's variables in <code>src/assets/scss/front/_variables.scss</code>.</p>
|
||
|
||
<p>Variable overrides within the same SASS file can come before or after the default variables. However, when overriding across SASS files, your overrides must come before you import Front's SASS files.</p>
|
||
|
||
<p>Here's an example that changes the <code>color</code> of the template in the <code>scss/_user-variables.scss</code> file when importing and compiling Front via npm:</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-scss" data-lang="scss">
|
||
// Your variable overrides
|
||
$blue: #377dff; // Primary color
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="modify-map" class="hs-docs-heading">
|
||
Modify map <a class="anchorjs-link" href="#modify-map" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>To modify an existing color in our <code>$theme-colors</code> map, add the following to your custom SASS file:</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-scss" data-lang="scss">
|
||
$theme-colors: (
|
||
"primary": #377dff,
|
||
"danger": #ed4c78
|
||
);
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="add-to-map" class="hs-docs-heading">
|
||
Add to map <a class="anchorjs-link" href="#add-to-map" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>To add a new color to <code>$theme-colors</code>, add the new key and value:</p>
|
||
|
||
<pre class="rounded">
|
||
<code class="language-scss" data-lang="scss">
|
||
$theme-colors: (
|
||
"primary": #377dff,
|
||
"danger": #ed4c78
|
||
);
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="sass-options" class="hs-docs-heading">
|
||
SASS options <a class="anchorjs-link" href="#sass-options" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Customize Front with our built-in custom variables file and easily toggle global CSS preferences with <code>$enable-*</code> SASS variables.</p>
|
||
|
||
<p>You can find and customize these variables for key global options in Front's <code>scss/front/_variables.scss</code> file.</p>
|
||
|
||
<pre class="rounded mb-4">
|
||
<code class="language-scss" data-lang="scss">
|
||
$theme-colors: (
|
||
"primary": #377dff,
|
||
"danger": #ed4c78
|
||
);
|
||
</code>
|
||
</pre>
|
||
|
||
<!-- Card -->
|
||
<div class="card mb-7">
|
||
<!-- Table -->
|
||
<table class="table">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th style="width: 20%;">Variable</th>
|
||
<th>Values</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<tr>
|
||
<td><code>$enable-accessibility</code></td>
|
||
<td><code>true</code> or <code>false</code> (default)</td>
|
||
<td>Enables predefined <code>accessibility</code> styles on various components.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>$enable-shadows</code></td>
|
||
<td><code>true</code> or <code>false</code> (default)</td>
|
||
<td>Enables predefined <code>box-shadow</code> styles on various components.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>$enable-rounded</code></td>
|
||
<td><code>true</code> (default) or <code>false</code></td>
|
||
<td>Enables predefined <code>border-radius</code> styles on various components.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>$enable-caret</code></td>
|
||
<td><code>true</code> or <code>false</code> (default)</td>
|
||
<td>Enables pseudo element caret on <code>.dropdown-toggle</code>.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>$enable-responsive-font-sizes</code></td>
|
||
<td><code>true</code> (default) or <code>false</code></td>
|
||
<td>Enables responsive font sizes.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td><code>$enable-validation-icons</code></td>
|
||
<td><code>true</code> or <code>false</code> (default)</td>
|
||
<td>Enables <code>background-image</code> icons within textual inputs and some custom forms for validation states.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<!-- End Table -->
|
||
</div>
|
||
<!-- End Card -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="color" class="hs-docs-heading">
|
||
Color <a class="anchorjs-link" href="#color" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Many of Front's various components and utilities are built through a series of colors defined in a SASS map. This map can be looped over in SASS to quickly generate a series of rulesets.</p>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="theme-colors" class="hs-docs-heading">
|
||
Theme colors <a class="anchorjs-link" href="#theme-colors" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>We use a subset of all Bootstrap colors to create a smaller color palette for generating color schemes, also available as SASS variables and a SASS map in Front's <code>scss/front/_variables.scss</code> file.</p>
|
||
|
||
<div class="row gx-2">
|
||
<div class="col-md-4">
|
||
<div class="rounded text-white p-3 mb-3" style="background-color: #377dff;">Primary</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="rounded text-white p-3 mb-3" style="background-color: #71869d;">Secondary</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="rounded text-white p-3 mb-3" style="background-color: #00c9a7;">Success</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="rounded text-white p-3 mb-3" style="background-color: #09a5be;">Info</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="rounded text-white p-3 mb-3" style="background-color: #f5ca99;">Warning</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="rounded text-white p-3 mb-3" style="background-color: #ed4c78;">Danger</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="rounded text-white p-3 mb-3" style="background-color: #21325b;">Dark</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="rounded p-3 mb-3" style="background-color: #F9FAFC;">Light</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<p>Here's how you can use these in your SASS:</p>
|
||
|
||
<pre class="rounded mb-4">
|
||
<code class="language-scss" data-lang="scss">
|
||
.alpha {
|
||
color: $primary;
|
||
}
|
||
|
||
// From the SASS map with Bootstrap `color()` function {
|
||
.beta {
|
||
color: color("purple");
|
||
}
|
||
</code>
|
||
</pre>
|
||
|
||
<p><a class="link" href="colors.html">Color utility classes</a> are also available for setting <code>color</code> and <code>background-color</code>.</p>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="grays" class="hs-docs-heading">
|
||
Grays <a class="anchorjs-link" href="#grays" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>An expansive set of gray variables and a SASS map in <code>scss/front/_variables.scss</code> for consistent shades of gray across your project.</p>
|
||
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="rounded-top p-3" style="background-color: #f7faff;">100</div>
|
||
<div class="rounded-top p-3" style="background-color: #f8fafd;">200</div>
|
||
<div class="text-white p-3" style="background-color: #e7eaf3;">300</div>
|
||
<div class="text-white p-3" style="background-color: #bdc5d1;">400</div>
|
||
<div class="text-white p-3" style="background-color: #97a4af;">500</div>
|
||
<div class="text-white p-3" style="background-color: #8c98a4;">600</div>
|
||
<div class="text-white p-3" style="background-color: #677788;">700</div>
|
||
<div class="text-white p-3" style="background-color: #71869d;">800</div>
|
||
<div class="text-white rounded-bottom p-3" style="background-color: #1e2022;">900</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Row -->
|
||
|
||
<!-- Heading -->
|
||
<h2 id="sass-components" class="hs-docs-heading">
|
||
SASS components <a class="anchorjs-link" href="#sass-components" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>Many of Bootstrap's components and utilities are built with <code>@each</code> loops that iterate over a SASS map. This is especially helpful for generating variants of a component by <code>$theme-colors</code> and creating responsive variants for each breakpoint. As you customize these SASS maps and recompile, you'll automatically see your changes reflected in these loops.</p>
|
||
|
||
<!-- Heading -->
|
||
<h2 id="customizing-js" class="hs-docs-heading">
|
||
Customizing JS <a class="anchorjs-link" href="#customizing-js" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
||
</h2>
|
||
<!-- End Heading -->
|
||
|
||
<p>To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with <code>assets/js/theme-custom.js</code> file.</p>
|
||
</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>
|